【動画つき】初心者でも10分でできた！作ったフォームをiframeでサイトに設置する方法
こんにちは。formLab編集部です。
いつもformrunをご利用いただき、誠にありがとうございます。
お客様が作成されたフォームは、どのような形で公開していますか？
formrunでは、作成したフォームをご自身のWebページ内に設置して公開できる「iframe埋め込み機能」があります。FREEプランからご利用でき、コードを用いてフォームを作成したことのない人でも簡単に設定可能です。
そんなiframe埋め込み機能ですが、
「作成したフォームをWebサイトに埋め込みたいが、なんだか難しそう...」
「iframe埋め込みを試してみたが、なぜか上手くいかない…」
このようなお悩みをお持ちの方はいませんか。
コードが登場することもあって、iframe埋め込み機能は、Web初心者にとって無縁の・難しいことのように思えるかもしれません。
本記事では、iframe埋め込みの実際の操作手順を、コーディング未経験の弊社インターン生がWordpressで作ったページに実際にフォームを埋め込む実演の動画つきでご紹介します。
最後にformrunでiframe埋め込み機能を使うメリットについても紹介しているので、ぜひ貴社のサイトでも活用してみてください。
1. iframe埋め込みとは
iframe埋め込みとは、外部のサイトのWebページを自身のホームページにそのまま埋め込むことを指します。iframeのスクリプトをコピー＆ペーストすることで、ホームページへ埋め込むことができます。
例えば、自身で作成したホームページに Youtube や Google Map などの外部リンクを埋め込みたい場合、iframeタグをホームページに埋め込むことで表示させることができます。
formrunで作ったフォームの公開には、大きく二種類の方法があります。
①フォーム単体で公開する
formrunでフォームを作成すると、フォームのURLは「https://form.run/@XXXX（任意の文字列）」となり、独立したページとして存在します。
そのため、フォームURLをSNSやメール等でシェアしないと、お客様はフォームにたどり着けません。
②iframe埋め込み機能を使って公開する
一方、formrunの「iframe埋め込みフォーム」を活用すると、例として「外部のサイト（https://◯◯◯◯◯）」にformrunで作成したフォームを埋め込めるため、「外部サイト（https://◯◯◯◯◯）」のURLを顧客にシェアすることで、フォームからの回答を促すことができます。
次でいよいよ、iframe埋め込み機能の実際の操作手順について、動画で解説していきます。
2. 作成にあたり用意するもの
- formrunで作成したフォーム
- フォームを設置したい自社ホームページやLP（ランディングページ）
想定作業時間：10分程度
フォーム作成〜サイトへの埋め込み完了まで
▶︎フォームの作成の手順を1から知りたい方はこちら
3. 実際の作業手順（動画解説）
では、実際にformrunで作成したフォームをホームページに埋め込む際の手順を見ていきましょう。
今回は、CMSで最もメジャーな、Wordpressでの埋め込み方法をご紹介します。
他にSTUDIO、Wix、ペライチ、Ameba Ownd、Jimdoへの埋め込み方法については、こちらの記事でご紹介しております。
→【フォームをシェアしたい方必見！】iframe埋め込みを用いて、ホームページでフォームを共有しよう（STUDIO・Wix・ペライチ・Ameba Ownd・Jimdo・WordPress）
※ご注意
貴社のホームページが WordPress.com をお使いの場合、
・WordPressのビジネスプラン以上のご契約
・ホスティング設定を有効化する
の2条件がないと、埋め込みが正しく反映されない可能性があります。設定・プランについては、貴社内のWeb管理者に確認してみてください。
WordPress.org をお使いの場合は問題ございません。
4. iframe機能を活用する際のフォーム作成ポイント
iframe埋め込み機能でフォームを埋め込む際には、フォームのデザインにも注意したいところ。
ホームページのデザインとフォームの色やフォントがあまりにもかけ離れていると、ユーザーにとっては大きな違和感です。
フォームからの離脱を増やしてしまうかもしれません。
ここでは、フォームの見た目を整えるためのformrunの機能について二つほどご紹介します。
①「フォント」「レイアウト」の変更
フォーム中の文言に使われるフォントは、フォーム編集画面の「デザイン」タブより変更できます。
現在は10種類のフォントに対応しております（22/10月現在）。貴社のWebサイトのフォントに近いものをお選びください。
レイアウトも、フォーム編集画面の「デザイン」タブより変更できます。
フォームをiframe埋め込み機能で埋め込む場合、レイアウトはカバーが画像の露出が少ない「カバーなし」または「トップ」が推奨です。
②「背景・タイトル・項目・ボタン・テキスト」のカラー変更
フォーム編集画面の「デザイン」タブより、フォームの個別の要素のカラーを自由に変更できます。
あなたのサイトの世界観やブランドイメージに合わせて、フォームをカスタマイズすることができます。
フォームのカラーを自社のサイトに馴染ませることで、ユーザーも違和感なくフォームに回答できるので、フォームの通過率アップにも繋がります。
こんな人におすすめ
・埋め込みフォームを利用しサイトに自然に馴染ませたい方
・用途に合わせて多彩なフォームを作成したい方
・ブランドイメージに合わせて指定のカラーコードでフォームを作成したい方
▶︎設定の詳細はこちら
5. 埋め込みにformrunを使うメリット
- FREEプランから、無料でできる
- コードを用いてフォームを作成したことのない人でも簡単に設定可能
- ページを遷移させずにフォームを入力できるので回答者の負荷が減る
- 埋め込みしたフォームで、顧客データの運用までできる
実際にformrunでiframe埋め込みを活用しているユーザー様に声を聞いてみたところ、iframe埋め込みをしている理由として最も多かったのが
「ページ遷移数を減らし、ユーザビリティを高める」ことでした。
お客様にスムーズに回答を促すことができれば、求めるエントリーが増え、貴社のビジネスにとってもプラスになるはずです。
今回は、フォームをWebサイトに埋め込む作業にハードルを感じている方向けにiframeを用いたフォームの埋め込み方法を紹介しました。
ぜひ、formrunで作成したフォームを埋め込んで、ホームページにフォームを公開してみてはいかがでしょうか。
