Googleフォームの埋め込み方法2つ！サンプルも紹介

GoogleフォームのWebサイトへの埋め込みはとても簡単です。

Googleフォームの管理画面から簡単な操作でフォームを作り、そのフォームの埋め込みタグをコピーしてWebサイトに貼り付けるだけでフォームが設置できるのです。

ただ、このように便利なGoogleフォームにも、デザインが変更できないというデメリットがあります。デザインを変えるためには、フォームを埋め込むときに自作のフォームと連携させる必要があるのです。

ここでは、GoogleフォームをWebサイトに埋め込む方法と、フォームのデザインを変える方法を解説します。

▼簡単にフォームをサイトに埋め込める「formrun」

formrunなら作成したフォームをそのまま、簡単にサイトへの埋め込みが可能です。専門知識は不要で、早く簡単に、安全性が高く、高品質なフォームをつくりたい方には、弊社の「formrun」がおすすめです。まずは、無料でフォームをつくって試してみてください。

まずは無料でフォームを作成する

WebサイトへのGoogleフォームの埋め込み手順
Googleフォーム埋め込みのデメリット
自作のフォームと連携してデザインを変える方法
まとめ：デザインにこだわるなら「formrun」がおすすめ

WebサイトへのGoogleフォームの埋め込み手順

Googleフォームの埋め込みに、プログラミング言語の知識は必要ありません。Webサイトへの埋め込みの方法は、管理画面からHTMLコードを取得し、WebサイトのHTMLにペーストするだけだからです。

Googleフォームの埋め込みは、以下3つの簡単なステップで完了します。

公開設定を行う
埋め込み用のHTMLコードを生成
WebサイトにHTMLコードを埋め込む

1.設定画面を開いてGoogleフォームの公開設定を確認

Googleフォームの作成手順については下記で詳しく解説しているので、まだフォームを作っていない人はこちらを参考に作ってください。

【2021年版】Googleフォームの使い方を1から徹底解説｜基本から応用まで詳しく紹介

フォームが出来上がったら、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
 src="https://docs.google.com/forms/d/e/1FAIpQLSfww6a1HqVM7jjW4jOZG0y3VBSvEG41R
 2bOjGpJEC_kLtV1Qw/viewform?embedded=true" width="100%" height="1106"
 <frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

3.WebサイトへのHTMLコードの埋め込み

次に、コピーしたフォームのHTMLタグをWebサイトのなかに埋め込みます。

フォームを埋め込む場合には、HTMLファイルだけでできたWebサイトに埋め込む場合と、CMSでできたWebサイトに埋め込む場合があります。どちらの場合も、HTMLソース内にiframeタグを貼り付けるだけでGoogleフォームが設置できます。

WordPressなどようなCMSでできたサイトの場合は、HTMLを編集できるエディタにおいて、Googleフォームのタグを貼り付けます。

フォントやカラーなど、Googleフォームのカスタマイズをしたい方は、下記を参考にしてみてください。

Googleフォームのカスタマイズ方法を解説！埋め込み方法も紹介

Googleフォーム埋め込みのデメリット

Googleフォームの埋め込みタグを利用したこの方法はとても簡単なので、誰でもすぐに利用できると思います。

しかし、この方法で作ったフォームはデザインの変更ができないので、ひと目見ればすぐにGoogleフォームを利用しているとわかってしまいます。無料ツールを利用しているということで企業としての信頼性が損なわれたり、セキュリティ面が気になり問い合わせを躊躇するユーザーもいるかもしれません。

だからこそ、企業が利用する場合にはGoogleフォームとはわからないようにデザインを変更した方がよいです。Googleフォームとわからないようデザイン変更するには、以下のように自作のフォームと連携させる必要があります。

自作のフォームと連携してデザインを変える方法

自作のフォームとGoogleフォームを連携させれば、自社サイトのデザインに合わせられるので、Googleフォーム感を抑えられます。

ここではあくまでフォームの表面的なデザイン変更方法を紹介します。確認ページや完了ページはGoogleフォームのデザインのままですのでご注意ください。

1.HTMLでフォームを自作する

自作のフォームをGoogleフォームと連携させるには、Googleフォームと同じ項目のフォームをまずHTMLで作成する必要があります。

以下のようなコードをHTMLで書いてみましょう。HTMLファイルを作成するか、CMSのエディターモードでHTMLのフォームを作成してください。

<form>
 <label for="email">メールアドレス</label>
 <input id="email" type="text" name="name" placeholder="example@mail.co.jp">
 <label for="msg">お問い合わせ内容</label>
 <textarea id="msg" name="name" placeholder="お気軽にお問い合わせください。"></textarea>
 <button type="submit" name="button" value="送信"></button>
 </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
 action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfo6pexuuv-SRzuy-V-EilQSj_cdhqrCOtXVYbK5KrNN_R-1Q/formResponse">
 <label for="email">メールアドレス</label>
 <input id="email" type="text" name="name" placeholder="example@mail.co.jp">
 <label for="msg">お問い合わせ内容</label>
 <textarea id="msg" name="name" placeholder="お気軽にお問い合わせください。"></textarea>
 <button type="submit" name="button" value="送信"></button>
 </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">
 <label for="email">メールアドレス</label>
 <input id="email" type="text" name=&quotentry.1494757024" placeholder="example@mail.co.jp">
 <label for="msg">お問い合わせ内容</label>
 <textarea id="msg" name=&quotentry.1297989009" placeholder="お気軽にお問い合わせください。"></textarea>
 <button type="submit" name="button" value="送信"></button>
 </form>

これでGoogleフォームの機能を自作フォームのデザインで利用できるようになりました。

6.CSSで形を整えたら完成

フォームのデザインは自社サイトに合わせてCSSで変更をします。以下のように、各項目に対してCSSを設定し、色やサイズなどを自由に変更しましょう。

input[type="email"]{
 padding: 10px;
 width: 65%;
 color:#999;
 border:1px solid #999;
 }
 textarea{
 padding: 10px;
 height: 100px;
 color:#999;
 font-size: 14px;
 width: 65%;
 border:1px solid #999;
 }
 button{
 background: #5250e0;
 color: white;
 font-size:16px;
 font-weight:bold;
 padding: 10px 20px;
 margin: 0 5px;
 }