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

フォーム作成ツール

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

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

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

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

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

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

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

  1. 公開設定を行う
  2. 埋め込み用のHTMLコードを生成
  3. 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タグ埋め込み画像
次に、コピーしたフォームの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を取得する

送信先URLを取得画面
次に、HTMLで自作したフォームと、Googleフォームを結びつける作業を行っていきます。

Googleフォームの編集画面右上にある、紫色の「送信」ボタンをクリックして、真ん中にあるチェーンのアイコンからリンクを選択してください。

このリンクに記載されているURLは、Googleフォームで送信を押したときに遷移するページのURLです。2で作成した自作のフォームを送信したときにも、このページに遷移するようにしなくてはなりません。

また、入力した項目をGoogleフォームとも結びつける必要があります。

そこで、送信ボタンのリンクとinputタグのnameを取得し、自作のフォームに貼り付けていきます。

4.自作のフォームにactionタグをペースト

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入力画面
次にデベロッパーツールの検索窓に ”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;
}

ブラウザを開いてからフォームの送信ボタンを押せば、Googleフォームの送信画面に移行し、通常通り回答の集計が閲覧できます。

この方法は、iframe埋め込みに比べればかなり自由にデザインができます。

まとめ:デザインにこだわるなら「formrun」がおすすめ

formrun

Googleフォームの埋め込みは簡単ですが、デザインを見ればすぐにGoogleフォームとわかってしまいます。また自作のフォームを利用するのは上のような作業が必要になりますし、reCAPTCHA(リキャプチャ)などWebサイトを守るスパム対策機能はありませんし、ファイル添付機能などもありません。

そこで、企業のWebサイトにフォームを埋め込むなら「formrun」がおすすめです。デザインの変更やセキュリティはもちろん、ステータス管理やコンバージョンの計測など、フォームの運用に必要なあらゆる機能が無料で利用できます。

自社サイトのブランディングやオリジナリティを重視するなら、まずは無料でformrunをお試しください。