GoogleフォームのWebサイトへの埋め込みはとても簡単です。
Googleフォームの管理画面から簡単な操作でフォームを作り、そのフォームの埋め込みタグをコピーしてWebサイトに貼り付けるだけでフォームが設置できるのです。
ただ、このように便利なGoogleフォームにも、デザインが変更できないというデメリットがあります。デザインを変えるためには、フォームを埋め込むときに自作のフォームと連携させる必要があるのです。
ここでは、GoogleフォームをWebサイトに埋め込む方法と、フォームのデザインを変える方法を解説します。
▼簡単にフォームをサイトに埋め込める「formrun」
formrunなら作成したフォームをそのまま、簡単にサイトへの埋め込みが可能です。専門知識は不要で、早く簡単に、安全性が高く、高品質なフォームをつくりたい方には、弊社の「formrun」がおすすめです。まずは、無料でフォームをつくって試してみてください。
Googleアカウントがある方はワンクリックで登録が可能です。ぜひformrunに登録してフォームを作成してみてください。
>> 無料でフォームを作成する
WebサイトへのGoogleフォームの埋め込み手順
Googleフォームの埋め込みに、プログラミング言語の知識は必要ありません。Webサイトへの埋め込みの方法は、管理画面からHTMLコードを取得し、WebサイトのHTMLにペーストするだけだからです。
Googleフォームの埋め込みは、以下3つの簡単なステップで完了します。
- 公開設定を行う
- 埋め込み用のHTMLコードを生成
- WebサイトにHTMLコードを埋め込む
1.設定画面を開いてGoogleフォームの公開設定を確認
Googleフォームの作成手順については下記で詳しく解説しているので、まだフォームを作っていない人はこちらを参考に作ってください。
>> 【2024年完全版】Googleフォームの使い方を徹底解説｜作り方から作成例まで詳しく紹介
フォームが出来上がったら、Googleフォームの管理画面右上にある歯車アイコンをクリックします。「設定」のウィンドウが開いたら、「ログインが必要：」の「回答を 1 回に制限する」にチェックが入っていないか確認してください。
デフォルトではチェックは入っていないのですが、万一チェックが入っている状態だと、ユーザーはGoogleアカウントにログインしてからでないと回答できなくなってしまいます。確認後、右下の「保存」をクリックします。
2.埋め込み用のHTMLコードを作成する
次に、作ったGoogleフォーム埋め込み用のHTMLコードを作成します。
Googleフォームの編集画面右上にある、紫色の「送信」ボタンをクリックすると、「フォームを送信」のウィンドウが開きます。「送信方法」の右にある「< >」を選択してください。
「HTMLコードを埋め込む」にiframeタグが表示されます。右下にある「コピー」をクリックすれば、この HTMLコードがクリップボードにコピーされますので、メモ帳などにペーストして残しておきましょう。
ちなみに、Googleフォームの埋め込み用HTMLコードには、<iframe>というタグが使われています。iframe（アイフレーム）とはHTML文書の中にフレームを設けて、もうひとつ別のHTMLファイルが組み込めるタグのことです。だからこそ、Webサイトを変更することなくタグを貼り付けるだけでフォームの機能を利用できるのです。
「幅」と「高さ」の指定
「フォームを送信」のウィンドウ下部で「幅」と「高さ」が指定できます。Webサイトに埋め込むときにサイズを指定したい場合には、「幅」を入力してから埋め込み用のHTMLコードを作成してください。
「高さ」は指定したとしても、自動で固定の高さに調整されてしまうので意味がありません。
スマートフォンやタブレットなど、どんな端末でも見やすいように自動で幅を変化させるには、コピーしたHTMLコードの「width=”640″」部分を「width:100%」に書き換えます。
<iframe |
3.WebサイトへのHTMLコードの埋め込み
次に、コピーしたフォームのHTMLタグをWebサイトのなかに埋め込みます。
フォームを埋め込む場合には、HTMLファイルだけでできたWebサイトに埋め込む場合と、CMSでできたWebサイトに埋め込む場合があります。どちらの場合も、HTMLソース内にiframeタグを貼り付けるだけでGoogleフォームが設置できます。
WordPressなどようなCMSでできたサイトの場合は、HTMLを編集できるエディタにおいて、Googleフォームのタグを貼り付けます。
フォントやカラーなど、Googleフォームのカスタマイズをしたい方は、下記を参考にしてみてください。
Googleフォームのカスタマイズ方法を解説！埋め込み方法も紹介
Googleフォーム埋め込みのデメリット
Googleフォームの埋め込みタグを利用したこの方法はとても簡単なので、誰でもすぐに利用できると思います。
しかし、この方法で作ったフォームはデザインの変更ができないので、ひと目見ればすぐにGoogleフォームを利用しているとわかってしまいます。無料ツールを利用しているということで企業としての信頼性が損なわれたり、セキュリティ面が気になり問い合わせを躊躇するユーザーもいるかもしれません。
だからこそ、企業が利用する場合にはGoogleフォームとはわからないようにデザインを変更した方がよいです。Googleフォームとわからないようデザイン変更するには、以下のように自作のフォームと連携させる必要があります。
▼ 簡単にフォームをサイトに埋め込める「formrun」
formrunなら作成したフォームをそのまま、簡単にサイトへの埋め込みが可能です。専門知識は不要で、早く簡単に、安全性が高く、高品質なフォームをつくりたい方には、弊社の「formrun」がおすすめです。まずは、無料でフォームをつくって試してみてください。
Googleアカウントがある方はワンクリックで登録が可能です。ぜひformrunに登録してフォームを作成してみてください。
>> 無料でフォームを作成する
自作のフォームと連携してデザインを変える方法
自作のフォームとGoogleフォームを連携させれば、自社サイトのデザインに合わせられるので、Googleフォーム感を抑えられます。
ここではあくまでフォームの表面的なデザイン変更方法を紹介します。確認ページや完了ページはGoogleフォームのデザインのままですのでご注意ください。
1.HTMLでフォームを自作する
自作のフォームをGoogleフォームと連携させるには、Googleフォームと同じ項目のフォームをまずHTMLで作成する必要があります。
以下のようなコードをHTMLで書いてみましょう。HTMLファイルを作成するか、CMSのエディターモードでHTMLのフォームを作成してください。
<form> |
ここでは、「メールアドレス」と「お問い合わせ内容」の入力欄を作っています。
2.Googleフォームで同じ項目のフォームを作る
1で作成した自作のフォームと同じ項目「メールアドレス」「お問い合わせ内容」の順に、Googleフォームを作成します。
3.送信先URLを取得する
次に、HTMLで自作したフォームと、Googleフォームを結びつける作業を行っていきます。
Googleフォームの編集画面右上にある、紫色の「送信」ボタンをクリックして、真ん中にあるチェーンのアイコンからリンクを選択してください。
このリンクに記載されているURLは、Googleフォームで送信を押したときに遷移するページのURLです。2で作成した自作のフォームを送信したときにも、このページに遷移するようにしなくてはなりません。
また、入力した項目をGoogleフォームとも結びつける必要があります。
そこで、送信ボタンのリンクとinputタグのnameを取得し、自作のフォームに貼り付けていきます。
4.自作のフォームにactionタグをペースト
リンク先を開いたら、ブラウザ右上の設定を開き、「その他のツール」→「デベロッパーツール」で、デベロッパーツールを表示させます。デベロッパーツール上でWindowsであれば「Ctrl+Fキー」で検索窓を表示させてください。
検索窓に ”action” と入れて、Elements内にひとつだけある「form action=”XXXX/formResponse“」を探し出します。
“XXXX/formResponse”のURLをコピーして、自作したフォームの中のformタグの中に以下のようにペーストします。
<form |
5.自作のフォームにinputタグをペースト
次にデベロッパーツールの検索窓に ”entry” と入れて、作成した項目数分の
「name=”entry.XXXX“」を探し出します。
上から順に、以下をコピーしてください。
name=”entry.数字“（メールアドレスに該当する箇所）
name=”entry.数字“（お問い合わせ内容に該当する箇所）
それらの「name」タグの中身を、自作のフォームの「name」のなかにペーストします。
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfo6pexuuv-SRzuy-V-EilQSj_cdhqrCOtXVYbK5KrNN_R-1Q/formResponse"> |
これでGoogleフォームの機能を自作フォームのデザインで利用できるようになりました。
6.CSSで形を整えたら完成
フォームのデザインは自社サイトに合わせてCSSで変更をします。以下のように、各項目に対してCSSを設定し、色やサイズなどを自由に変更しましょう。
input[type="email"]{ |
ブラウザを開いてからフォームの送信ボタンを押せば、Googleフォームの送信画面に移行し、通常通り回答の集計が閲覧できます。
この方法は、iframe埋め込みに比べればかなり自由にデザインができます。
まとめ：デザインにこだわるなら「formrun」がおすすめ
Googleフォームの埋め込みは簡単ですが、デザインを見ればすぐにGoogleフォームとわかってしまいます。また自作のフォームを利用するのは上のような作業が必要になりますし、reCAPTCHA（リキャプチャ）などWebサイトを守るスパム対策機能はありませんし、ファイル添付機能などもありません。
そこで、企業のWebサイトにフォームを埋め込むなら「formrun」がおすすめです。デザインの変更やセキュリティはもちろん、ステータス管理やコンバージョンの計測など、フォームの運用に必要なあらゆる機能が無料で利用できます。
自社サイトのブランディングやオリジナリティを重視するなら、まずは無料でformrunをお試しください。
▼ 簡単にフォームをサイトに埋め込める「formrun」
formrunなら作成したフォームをそのまま、簡単にサイトへの埋め込みが可能です。専門知識は不要で、早く簡単に、安全性が高く、高品質なフォームをつくりたい方には、弊社の「formrun」がおすすめです。まずは、無料でフォームをつくって試してみてください。
Googleアカウントがある方はワンクリックで登録が可能です。ぜひformrunに登録してフォームを作成してみてください。
>> 無料でフォームを作成する
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
