フォームの埋め込み方法を調べている時点で、フォーム自体はもう作り終えていることが多いはずです。質問の並びも決めた、必須の印も付けた、あとはこれを自分のサイトのどこに、どういう形で出すかという判断だけが残っている状態です。
ここでつまずくのは、技術の話が分からないからではありません。埋め込みという言葉が指しているものが実は3通りあり、それぞれ得意な場面が違うのに、どの解説記事も自分が使っている道具のやり方だけを書いているからです。しかも本当に効いてくるのは、埋め込んだあとの見た目ではなく、届いた回答を受けて返す作業のほうです。
この記事では、埋め込みの方式を3つに分けて向き不向きを整理し、あえて埋め込まずに別ページへ飛ばしたほうがよい場合も含めて書きます。受付をひとりで回している立場から見て、どこを決めれば先に進めるのかが分かる形にしています。
「フォームを埋め込む」が指している3つの方式
同じ「埋め込み」でも、中で起きていることは方式によってまったく違います。表示の速さ、見た目のそろえやすさ、スマホでの扱いやすさ、送信したあとに何を出せるか。これらは全部この選択で決まります。まずここを分けて理解しておくと、あとの判断がすべて楽になります。
多くのフォーム作成ツールは、この3つのうち複数を提供しています。管理画面に「埋め込みコード」というボタンがあり、押すとタブが分かれていて、片方には角括弧で始まるHTMLのかたまり、もう片方にはスクリプトのかたまり、その横に共有用のURLが並んでいる。あの並びは、そのままこの3方式に対応しています。どれを貼っても表示はされるので、違いが分からないまま何となく一番上を選んでいる人が少なくありません。
自分のページの中に別のページを差し込む方式
ひとつめは、ページの中に小さな窓を開けて、その中に別のページをそのまま映す方式です。HTMLではiframeという書き方を使います。埋め込みコードとして配布されているものが <iframe src="..."> で始まっていれば、これに当たります。
この方式の長所は、貼るだけで確実に動くことです。中身は提供元のページがそのまま表示されるので、こちら側のCSSやJSの影響をほとんど受けません。サイトのデザインが古かったり、他のプラグインと相性が悪かったりしても、窓の中だけは提供元が動作を保証している状態で表示されます。設定をほとんど触らずに済むので、サイトを触れる人が自分ひとりしかいない場面では現実的な選択になります。
短所は3つあります。まず見た目がそろいません。窓の中はあくまで別のページなので、こちら側のフォントや余白、ボタンの色をそのまま引き継ぐわけではありません。提供元の設定画面で色を指定できる場合もありますが、サイト全体の雰囲気と完全に一致させるのは難しいと考えたほうが現実的です。
次に高さの問題があります。窓の高さは貼る側が数字で指定します。ところが中身の高さは、入力エラーが出たり、選択肢によって追加の質問が現れたりすると変わります。指定した高さより中身が長くなると、窓の中だけに小さなスクロールバーが出ます。ページ全体のスクロールと窓の中のスクロールが二重になり、スマホでは特に操作しづらくなります。
3つめは、窓の中で起きたことが外から見えにくいことです。送信が完了したときにページ全体を切り替えたい、完了と同時に計測タグを動かしたい、といった要望は、方式の性質上そのままでは通りません。提供元が窓の内外でやり取りする仕組みを用意している場合にだけ実現できます。
自分のページの中にフォームを描き出す方式
ふたつめは、小さなJSを読み込ませて、そのJSがページの中にフォームの部品を直接組み立てる方式です。埋め込みコードが <script src="..."> で始まり、その近くに空の <div> が置かれていれば、これに当たります。
長所は、フォームがこちらのページの一部になることです。同じページの中にある要素なので、こちら側のCSSを当てられる場合があり、フォントや余白をサイトになじませやすくなります。高さも中身に合わせて自然に伸び縮みし、窓の中だけスクロールバーが出るという事故が起きません。送信が終わったあとに同じページの中でメッセージを差し替える、といった動きも作りやすくなります。
短所は、こちら側の事情に影響されることです。サイトに入っている他のJSと衝突したり、テーマのCSSがフォームの部品にまで効いてしまってボタンが潰れたり、逆にこちらのデザインが崩れたりすることがあります。広告をまとめて遮断する拡張機能を入れている閲覧者の環境で、外部から読み込むJSがまとめて止められて何も表示されない、という報告も窓口の担当者からしばしば出ます。
もうひとつ、読み込みの重さが乗る点も見ておく必要があります。外部から追加でJSを取りに行くので、その分だけページの表示完了が遅れます。トップページのように多くの人が最初に開くページへ置く場合は、この差が効いてきます。フォームがページの下のほうにあるなら、画面に入ってから読み込む形にできるかどうかを提供元の案内で確かめてください。
埋め込まずに別ページへ飛ばす方式
3つめは、そもそも埋め込まない方式です。自分のサイトには「応募はこちら」というボタンだけを置き、押すと提供元が用意したフォームのページへ移動します。
この選択を最初から外している人がいますが、実務では十分に有力な手です。理由は単純で、こちら側でやることが何もないからです。HTMLを触る必要がなく、テーマの更新でコードが消える心配もなく、他のプラグインと衝突することもありません。フォームの中身を直したいときも、提供元の管理画面で直せばその瞬間に反映されます。
見た目がサイトと違うことは、たしかに欠点として挙げられます。ただし、応募や申し込みの入口では、そこまで大きな不利にはなりにくい面もあります。押した先が明らかにフォームのページで、そこに必要なことだけが書いてあるほうが、余計な情報に囲まれた埋め込み枠より入力に集中できます。導線を短くするほうが効く場面と、見た目をそろえるほうが効く場面があり、前者なら別ページで足ります。
判断の目安を挙げると、次のような場合は埋め込まずに飛ばすほうが早く片付きます。サイトを触れる人が自分ではなく、依頼して直してもらう必要がある。会社のCMSでHTMLの直接編集が禁止されている。募集期間が短く、終わったら消す予定である。項目が多く、埋め込むと枠の中が縦に長くなりすぎる。フォームを複数の場所から案内したいので、URLひとつで管理したい。どれか当てはまるなら、まず別ページで始めて、必要になってから埋め込みに移してかまいません。
埋め込むと決める前に確かめておくこと
方式を選ぶ前に、決めておくと後戻りしなくて済むことがあります。ここを飛ばして貼ってしまい、あとから全部やり直すのが一番もったいない進み方です。
見た目をどこまでそろえたいか
「サイトと同じ見た目にしたい」は要望としては自然ですが、どこまでを指しているのかを先に言葉にしておくと迷いが減ります。フォントが同じであればよいのか、ボタンの色まで合わせたいのか、余白の取り方や見出しの大きさまで一致させたいのか。ここが「フォントとボタンの色だけ」で済むなら、窓を開ける方式でも提供元の設定で近づけられることが多く、工数は小さく収まります。
一方で、既存ページのレイアウトの中にフォームを溶け込ませたい、左右2列の中にフォームを入れたい、といった要求になると、ページの一部として描き出す方式でないと苦しくなります。ここは好みではなく作業量の問題です。窓を開ける方式で無理に見た目を寄せようとして、CSSで高さを推測しながら調整し続ける状態になると、フォームの項目を1つ足すたびに調整が必要になります。
スマホでの高さと入力のしやすさ
いまは申し込みや問い合わせの多くがスマホから届きます。埋め込みの検討では、スマホでどう見えるかを最初に確認してください。特に窓を開ける方式では、高さの指定が固定だと、縦に長いフォームが小さな窓の中に押し込められて、指でスクロールしても意図した場所に止まらない状態になります。
もうひとつ見落とされやすいのが、キーボードが出たときの挙動です。入力欄に触れると画面の下半分がキーボードで隠れます。窓の中でスクロールが起きると、いま入力している欄がキーボードの裏に回り込んで見えなくなることがあります。この状態でも入力は続けられますが、自分が何を打っているか見えないので、途中でやめる人が出ます。埋め込んだら必ず自分のスマホで最後まで入力して送信してみてください。パソコンの画面幅を縮めた確認だけでは、この現象は再現しません。
ページの読み込みが重くならないか
外部から読み込むものが増えれば、その分だけ表示は遅くなります。埋め込みはどの方式でも外部への通信を追加するので、置く場所によっては体感に響きます。1件あたりの追加が0.5秒でも、フォーム以外に地図や動画やチャットも埋め込んでいれば、積み上がって表示完了が数秒ずれます。
対策は単純で、全ページ共通の場所に置かないことです。フッターやサイドバーに埋め込むと全ページで読み込みが発生します。フォームは専用のページか、必要なページだけに置く。その上で、画面に入るまで読み込みを遅らせる指定ができるかどうかを提供元の案内で確かめる。これだけで大半は解決します。
送信されたあとに何を表示したいか
意外と後回しにされるのが、送信ボタンを押した直後に何が出るかです。ここは応募者や問い合わせ主の体験に直結します。「送信しました」とだけ小さく出て終わるのか、いつ頃返事が来るのかまで書いてあるのか。後者にしておくと「届いていますか」という追加の問い合わせが目に見えて減ります。
窓を開ける方式では、完了の表示も窓の中で起きます。ページ全体を別の完了ページに切り替えたい場合は、提供元がその仕組みを持っているかを確かめる必要があります。ページの一部として描き出す方式なら、同じページの中で案内文を差し替える形が作りやすくなります。この違いを知らずに貼ってから「完了ページに飛ばしたい」と言われて詰まる例は多いので、先に決めておいてください。
迷惑投稿をどう止めるか
公開されている場所にフォームを置けば、自動化された送信が必ず来ます。実際の申し込みが1日3件のフォームに、機械からの送信が1日30件入るようになると、受信箱の中で本物を探す作業が発生します。件名が同じなので絞り込みも効きません。
対策は提供元が用意している機能をそのまま使うのが確実です。人間かどうかを判定する仕組み、同じ人からの連続送信を制限する仕組み、特定の単語を含む送信を弾く仕組みなど、どれが使えるかは道具によって違います。埋め込む方式によって使える対策が変わる場合もあるので、貼る前に確認しておいてください。届く量が増えてから対策を入れると、それまでに溜まった分を手で仕分ける羽目になります。
サイトの作り別に見た進め方
埋め込みの手順そのものは、サイトが何でできているかによって変わります。ここでは代表的な4パターンでの考え方を整理します。
WordPressで作られたサイトの場合
編集画面でブロックを追加し、カスタムHTMLのブロックに埋め込みコードを貼る形が基本です。ブロックエディタでは、貼り付けたあとにプレビューに切り替えると表示を確認できます。クラシックエディタを使っている場合は、ビジュアルではなくテキストのタブに切り替えてから貼ってください。ビジュアルのまま貼ると、タグが文字として表示されたり、勝手に整形されて壊れたりします。
固定ページごとではなく、テーマのテンプレートに直接書き込む方法もありますが、これは避けたほうが安全です。テーマを更新すると書き込んだコードが消えます。どうしてもテンプレートに入れるなら子テーマを使ってください。
WordPressでフォームを扱っている人の多くは、すでにプラグインでフォームを作っています。よく使われているもののひとつがContact Form 7で、こちらは短いコードをページに貼るとフォームが表示される仕組みです。すでに動いているなら、無理に外部のフォームへ移す必要はありません。プラグインで作るフォームと外部サービスのフォームで、送信されたあとの扱いがどう変わるのかは、Contact Form 7との比較で送信後の記録の残り方まで含めて整理しています。
静的なHTMLで作られたサイトの場合
HTMLファイルを直接編集できるなら、これが一番素直に進みます。フォームを出したい位置に埋め込みコードを貼り、保存してアップロードするだけです。窓を開ける方式なら貼った位置にそのまま出ますし、描き出す方式なら空の要素とスクリプトの両方を指示どおりの位置に置いてください。片方だけ貼って表示されないという相談はよくあります。
貼る場所を決めるときは、囲んでいる要素の横幅を確認してください。狭いカラムの中に貼ると、フォームの入力欄が横に潰れて読みにくくなります。フォームは横幅にゆとりのある場所に置くのが原則です。
ノーコードのサイト作成サービスの場合
サイトを作るサービス自体にフォームの機能が付いていることが多く、まずはそれで足りるかを確かめるのが先です。足りない場合は、埋め込み用のブロックやウィジェットが用意されているので、そこに埋め込みコードを貼ります。
注意点として、サービスによっては外部のJSの実行を制限していることがあります。窓を開ける方式は通るのにスクリプトの方式は通らない、という制限のかかり方をする場合もあるので、まず窓を開ける方式で試すと切り分けが早く済みます。プランによって埋め込み自体が使えないこともあるため、その場合は無理をせず別ページへ飛ばす形にしてください。
会社のCMSで自由に編集できない場合
社内の広報が管理していて、ページの追加も編集も依頼が必要という環境は珍しくありません。この場合、埋め込みは依頼から反映まで日数がかかり、項目をひとつ直すたびに同じ待ち時間が発生します。募集期間が決まっている案件では、この待ち時間が致命的になります。
こういう環境では、別ページへ飛ばす形が現実的です。サイト側に置くのはリンク1本だけなので、依頼も1回で済みます。フォームの中身はこちらの管理画面でいつでも直せます。見た目の統一より、締切に間に合うことのほうが優先される場面は実際に多くあります。
埋め込みでつまずく場所と、その直し方
貼ったあとに起きる典型的な現象と、原因の見当をつける順番をまとめます。
何も表示されない
まず、貼ったコードが省略されていないかを確認してください。管理画面からコピーする際に、途中で切れていたり、引用符が別の文字に置き換わっていたりすることがあります。特に、エディタの自動整形で引用符が全角のカギ括弧のような文字に変換されると動きません。
次に、別のブラウザや別の端末で開いてみてください。特定の環境でだけ表示されないなら、拡張機能が外部の読み込みを遮断している可能性があります。この場合はこちらで直せることが少ないので、代替としてフォームのURLを文章の中にも書いておくと取りこぼしが減ります。
サイト全体が暗号化された通信で配信されているのに、埋め込み先が暗号化されていない通信の場合、ブラウザが読み込みを止めます。埋め込みコードのURLの先頭を確認してください。
枠の中だけスクロールバーが出る
窓を開ける方式で高さの指定が足りていない状態です。高さの数字を大きくすれば当面は消えますが、フォームの項目を増やしたりエラー表示が出たりすると再発します。根本的に直したいなら、中身の高さに合わせて枠を伸ばす仕組みが提供元にあるかを確かめるか、ページの一部として描き出す方式に切り替えるかのどちらかになります。
送信できたのか分からない
送信ボタンを押したあと、画面が変わらない、あるいは一瞬何か出て消える、という状態は最も避けたい形です。押した人はもう一度押します。結果として同じ内容が2件届き、受け取る側は同一人物かどうかを判断する作業が増えます。1件の突き合わせに2分かかるとして、重複が20件あれば40分が消えます。
完了の表示が確実に出るかどうかは、必ず自分で送信して確かめてください。埋め込んだ状態での送信テストです。フォームの管理画面のプレビューで送信できても、埋め込んだ状態では動かないことがあります。
途中で入力をやめる人が多い
表示も送信も問題なく動いているのに、届く件数が想定より少ないときは、入力の途中で離脱されている可能性があります。埋め込みが原因になっている場合、疑うべき箇所は限られます。窓の中でスクロールが二重になっていないか、スマホでキーボードが出たときに入力中の欄が隠れないか、必須の印を付けた項目が多すぎないか、そして最初の画面に入力欄がいくつ見えているか。
最後の点は見落とされがちです。窓を開ける方式で高さを大きく取ると、開いた瞬間に入力欄が十数個並んだ画面が現れます。これを見た時点で「あとにしよう」と離れる人が出ます。項目が多いフォームは、いくつかの段階に分けて出せるかを提供元の機能で確かめてください。段階に分けられない場合は、フォームの前に所要時間の目安と必要な情報を書いておくだけでも変わります。何を用意すればよいか分かっていれば、途中で止まる理由が減ります。
計測の数字が合わない
窓を開ける方式では、窓の中で起きた表示や送信が、こちら側の計測ツールから見えないことがあります。ページの表示数は増えているのに送信完了の計測が動かない、という食い違いはここから来ます。埋め込み方式を変えるか、提供元が送信完了を外へ知らせる仕組みを持っているかを確認するかで対処します。数字が合わないまま広告を運用すると判断を誤るので、早めに整理しておいてください。
埋め込み方式より効いてくるのは、送信されたあと
ここまで表示の話を書いてきましたが、受付をひとりで回している人にとって本当に負担になるのは、届いたあとの作業です。埋め込み方式の選択は最初の1回だけの判断ですが、届いたあとの作業は届くたびに繰り返されます。
よくあるのは、フォームからの通知メールが受信箱に溜まり、その内容を表計算ソフトに転記して管理する形です。1件の転記が3分でも、100件で5時間になります。しかも転記は作業であって判断ではないので、時間をかけた分だけ何かが前に進むわけではありません。
さらに厄介なのが、返信の状態が残らないことです。誰がどこまで返したのかが表の外にあると、二重返信と返し忘れは必ず起きます。担当が2人以上いればなおさらで、同じ応募者に別々の人が別々の文面で返信する事故は、受付の現場で繰り返し起きています。表に「返信済み」の列を足しても、返信そのものはメールソフトで行うので、列の更新を忘れた瞬間に信用できない表になります。
送信されたあとの道具がそろっているかどうかは、フォームを選ぶときの評価軸として、埋め込みの見た目より重く見てよい部分です。具体的には、届いた回答が一覧で見えるか、状態を切り替えられるか、その画面から直接返信できるか、返信の履歴が回答に紐づいて残るか、複数人で見ても誰が何をしたか分かるか。この5点が押さえられていれば、転記も突き合わせも要らなくなります。どこまで揃っているかはできることに機能単位でまとめてありますし、実際の画面の動きは動くところを見るで触って確かめられます。
回答者側の負担も同じくらい重要です。回答するのにアカウント登録を求めると、そこで応募をやめる人が出ます。特に採用の応募や助成金の申請では、応募者はすでに書類の準備で消耗しているので、追加の登録が最後の一押しになって離脱します。埋め込み方式を検討する段階で、回答者に何を要求する設計になっているのかも一緒に確認してください。
個人情報と同意の扱いを、貼る前に決める
フォームで氏名やメールアドレスを受け取る以上、その扱いは埋め込みの前に決めておくべき事項です。埋め込んだあとに「同意のチェックを入れ忘れていた」と気づくと、それまでに届いた分の扱いに悩むことになります。
法律は、集めた個人情報を何のために使うのかを、あらかじめはっきりさせておくことを求めています。
個人情報取扱事業者は、個人情報を取り扱うに当たっては、その利用の目的（以下「利用目的」という。）をできる限り特定しなければならない。 出典: www.ppc.go.jp
実務に落とすと、フォームの近くに「入力いただいた情報は、応募内容の確認と選考のご連絡にのみ利用します」といった一文を置き、詳しい内容を書いたページへのリンクを添える形になります。窓を開ける方式で埋め込む場合、この一文を窓の中に入れるのか、窓の外のページ側に書くのかを決めておいてください。窓の中に入れておけば、フォームのURLを直接案内したときにも同じ表示が出ます。
保管の期間と、いつ消すのかも決めておくと後が楽です。応募の受付では、選考が終わったあとの書類をいつまで持つのかが必ず問題になります。ここを最初に決めておかないと、何年も前の応募データが表計算ファイルの中に残り続けます。
なお、どこまでの記載が必要かは扱う情報の中身や事業の形によって変わります。個別の判断は所管の窓口や専門家に確かめてください。この記事は一般的な整理にとどめています。
用途別に見た、埋め込み方式の決め方
最後に、受け付ける内容ごとにどの方式が合いやすいかを整理します。ここまでの内容を、実際の場面に当てはめる形です。
応募の書類を受け取る場面では、埋め込みより別ページのほうが素直に収まることが多くなります。応募フォームは項目が多く、職務経歴や志望動機のような長い入力欄が並ぶので、窓の中に押し込めると入力しにくくなります。募集要項のページからリンクで飛ばし、フォームのページでは入力だけに集中してもらう形が扱いやすい構成です。応募が届いたあとの選考の進み具合をどう管理するかは採用の応募受付に、受付から書類の確認、連絡までの流れを想定した形でまとめてあります。
公募や助成金の受付は、募集期間が決まっていて、期間が終われば入口を閉じる必要があります。サイトのHTMLを直接触る運用だと、締切のたびに削除の作業が発生します。リンクだけにしておけば、受付を止めるのはフォーム側の設定変更で済みます。要件の確認や書類の不備の差し戻しまで含めた受付の流れは助成金・公募の受付で整理しています。
問い合わせの受付は、サイトの中に自然に置きたい要望が強い場面です。会社概要や事業紹介と同じ体裁で見せたいので、ページの一部として描き出す方式が向きます。ただし問い合わせは自動送信が最も集まりやすい入口でもあるので、対策とセットで考えてください。二重返信や返し忘れが起きやすいのもこの入口です。担当の決め方と返信の記録の残し方は問い合わせの受付にまとめています。
イベントや講座の申し込みでは、定員という要素が加わります。埋め込みの方式より、定員に達したときに受付を止められるか、キャンセルが出たときに繰り上げられるかのほうが重要です。告知ページの中に申し込み欄を置いて導線を短くしたいので、描き出す方式が向く場面です。当日までの連絡をどう回すかも含めて、イベントの申し込みと講座の受講申し込みにそれぞれの流れを書いています。
施設の利用申請や修理の受付は、届いたあとに確認と可否の連絡が必ず発生します。ここでフォームだけを整えても、確認の作業は減りません。申請の内容と対応の状態を同じ画面で追えるかどうかが効いてきます。日程の調整まで含む流れは施設利用の申請、受付から対応の完了までを追う形は修理・サポートの受付にまとめています。会費の案内まで続く入会の受付は会員の入会申し込みが近い形です。
いま使っている道具から動かすかどうかを考えている場合は、埋め込みのしやすさだけで判断しないことをすすめます。回答の集まり方と、そのあとの作業がどう変わるのかを並べて見てください。表計算ソフトで回答を追う形からの移行を検討しているならGoogleフォームとの比較が、社内のアカウントで運用している形からの検討ならMicrosoft Formsとの比較が、それぞれ判断の材料になります。どちらの記事も、まず今の道具で足りる場合を先に書いています。
費用の考え方は料金に、導入前に多い疑問はよくある質問にまとめてあります。埋め込みの方式は途中で変えられますし、最初は別ページで始めて、運用が固まってから埋め込みに移しても遅くありません。先に決めるべきなのは、届いたあとに自分が回せる形かどうかのほうです。
Q1. iframeとスクリプト、どちらの埋め込み方法を選べばよいですか？
サイトのデザインに完全になじませたい、送信後に同じページで表示を切り替えたい場合はスクリプトの方式が向きます。とにかく確実に表示させたい、他のプラグインとの衝突を避けたい場合はiframeの方式が安全です。迷ったらiframeで始めて、見た目の要望が出てから切り替えても問題ありません。
Q2. 埋め込まずに別ページへ飛ばすのは不利になりませんか？
入口が明確であれば大きな不利にはなりません。むしろ項目が多い応募フォームや、サイトのHTMLを自分で編集できない環境では、別ページのほうが扱いやすくなります。募集期間が終わったときに受付を止める作業も、フォーム側の設定だけで済みます。
Q3. 埋め込んだフォームが表示されないときは何を確認しますか？
コードが途中で切れていないか、引用符が全角に変換されていないかをまず確認してください。次に別のブラウザや別の端末で開き、特定の環境だけの問題かを切り分けます。サイトが暗号化通信なのに埋め込み先が暗号化されていない場合も、ブラウザが読み込みを止めます。
Q4. 埋め込む前に決めておくべきことは何ですか？
見た目をどこまでそろえたいか、スマホで最後まで入力できるか、送信後に何を表示するか、迷惑投稿をどう止めるか、そして個人情報の利用目的をどこに書くか。この5点を先に決めておくと、貼ったあとのやり直しがほとんど起きません。