こんにちは、テクノロジーコンサルティング課のゴマ太郎です。
今回は Google Forms を用いてフォームを自社サイトに、簡単にかっこよく、実装する方法を紹介します。
いざ自力で実装しようとすると、回答を蓄積する DB の設定や回答があった際の通知処理など、フォームのフロントエンド実装の他にも考えることが多く出てきます。そのようなバックエンドの面倒事については考えず、楽をしたいという方に向けての記事になります。
1. Google Forms の実装パターン
1-1. 実装パターン
Google Forms を用いたサイトへのフォーム実装パターンは大きく３つあります。※ 私が知らないだけで他にもあるかもしれません
① Google Forms に遷移させる
aタグ等で素の Google Forms に遷移させ、そこで回答してもらうパターンです。
② Google Forms を埋め込む
自作ページに Google Forms の埋め込みコードを記述するパターン
iframeタグでページの一部に Google Forms のフレームが表示されます。
③ Google Forms に重ねる
Google Forms と同じ質問項目を自作ページに用意し、送信に使用される属性値に Google Forms の属性値をコピーするパターンです。
ユーザからは自作のページにしか見えませんが、その回答の送信先は Google Forms になっているという仕組みになります。
デスノートでもこれを使ったトリックで名前を書かせるシーンがあった気がしますね。
1-2. 各パターンの比較
前節で紹介した３パターンには以下のような特徴があります。実装担当者のスキルや、重視したい点によって最適なものを選択してください。
| ① 遷移させる | ②埋め込む | ③重ねる | |
|---|---|---|---|
| 実装コスト | ◎ | 〇 | △ |
| UI のカスタマイズ性 | ✕ | △ | ◎ |
| フォームの編集 | 〇 | 〇 | △ |
| 仕様変更への対応 | ◎ | 〇 | △ |
| SEO 対策 | ✕ | △ | ◎ |
実装コスト
実装にかかる時間や必要となる技術的コストの観点で比べると、①②が容易で、③は比較的難易度が高いほうになります。
次の章で細かい実装方法については解説しますが、①と②は Google Forms を作成したらその URL や 埋め込みコード をコピペするだけで実装されます。それに対し③は自作ページにもフォームを作成し、その属性値をいじる必要があるため少々知識が必要になってきます。
UI のカスタマイズ性
UI のカスタマイズ性、すなわちデザインの自由度の観点で比べると、③ ＞ ② ＞ ① の順になります。
回答者目線だと、③は Google Forms を使っていることすらバレにくく、②でもフレーム外のデザインは自分でカスタム作成できるため比較的サイトイメージを崩さずに実装ができます。①に関しては完全に Google Forms のページに遷移させるのでバレバレですね。
フォームの編集
フォームの編集、すなわち質問文や選択肢の情報変更がしやすいかどうかになります。
こちらですと①②は Google Forms を編集すれば自動で反映されますが、③だと属性値も変わってしまう可能性があるため、属性値の修正も必要になることがあります。
仕様変更への対応
③はやや無理矢理で Google 公認の実装方法ではないため、 Google Forms 側で仕様の変更があった際には正常に動作しなくなるリスクがあります。
それに対し①②は Google Forms 側で用意している機能を使っているため、仕様変更により使えなくなるといったリスクは比較的低いかと思われます。
SEO 対策
SEO 対策を重要視している場合には、③ ＞ ② ＞ ① の順になるかと思われます。
①は一度他のサイト（Google Forms）にリダイレクトしているため、サイトの滞在時間やページビューが減少し、 SEO に悪影響を及ぼす可能性があります。
②ではユーザはサイト内で操作を続けることができるため、滞在時間やページビューが向上する可能性があり SEO にはプラスです。ただしフォームの内容やメタデータが Google によってインデックスされないため、フォーム自体の内容は SEO には寄与しません。
③の方法では、フォームは完全に自作サイト上でホストされるため、フォーム内容が直接 SEO に貢献します。さらにユーザは外部サイトに移動することなく、サイト内で操作を完結できるため、滞在時間や UX の向上にもつながります。
2. 実装方法
2-1. ① Google Forms に遷移させる
Google Forms を作成する
共有リンクを取得する
自作サイトに Google Forms への遷移リンクを作成する
<body>
<a href="https://forms.gle/abcdefg1234567">Google Forms に遷移</a>
</body>
以上が ① Google Forms に遷移させる の実装手順となります。
2-2. ② Google Forms を埋め込む
Google Forms を作成する
前節と同様
埋め込みコードを取得する
自作サイトに 埋め込みコード を貼り付ける
<body>
<iframe src="https://docs.google.com/forms/d/e/abcdefghijklmn1234567890/viewform?embedded=true" width="500" height="600" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
</body>
以上が ② Google Forms を埋め込む の実装手順となり、実装後は下図のようになります。
※ 埋め込み箇所が分かりやすいよう、ページに背景色をつけています。
2-3. ③ Google Forms に重ねる
この実装方法には、フォームページを自作ページにカスタマイズしただけでは、入力エラー時や送信完了時に Google Forms のページに遷移してしまうという注意点があります。送信完了画面（サンクスページ）のカスタマイズ方法は検索するとすぐに出てきて解決しますが、入力エラー画面のカスタマイズ方法について紹介している記事はなかなか見つけられませんでした。送信前に自作の入力チェックを挟む方法についても、気が向いたら調査して記事にできればと思います。
Google Forms を作成する
前節と同様
プレビューモードで開く
開発者ツールを開く
F12キーを押し、開発者ツールを開きます
必要となる属性値を確認する
Ctrl + F で検索ボックスを出し、「<form」で検索、 form タグの action 属性を確認
「entry.」で検索、各フィールドの name 属性を確認
ラジオボタンは一度選択状態にするとフィールドが出現し、確認できるようになります
自作フォームを作成する
Google Forms に重ねたいフォームを作成します。
form タグの action 属性と、各フィールドの name 属性には、先ほど確認した属性値をセットしてください。
<body>
<form action="https://docs.google.com/forms/u/0/d/e/abcdefghijklmn1234567890/formResponse" method="POST">
<div>
<p>今日の朝食は何でしたか？</p>
<input type="text" name="entry.1675098666">
</div>
<div>
<p>今日の夕食は何ですか？</p>
<input type="text" name="entry.1528919465">
</div>
<div>
<p>米派？パン派？</p>
<label><input type="radio" name="entry.127213574" value="米">米</label>
<label><input type="radio" name="entry.127213574" value="パン">パン</label>
</div>
<button>送信</button>
</form>
</body>
以上が ③ Google Forms に重ねる の実装手順となります。
3. 最後に
今回は Google Forms と自作サイトの連携 について、各パターンの特徴と実装方法について紹介しました。最後の ③ のパターンについては注意点もありましたが、 Google Forms を使うとフォームの実装が楽になるだけでなく、スプレッドシート出力によるデータ集計や、回答があった際に通知を受け取る設定など便利な機能が自身で実装せずとも利用できます。是非お試しください。
＼システム開発なら、株式会社シー・エス・エスへ／
この記事を書いた人
ニックネーム
ゴマ太郎
経歴
新卒入社３年目（22卒）
昨年度までイノベーションLABにて技術調査を担当しておりましたが、今年度から新設されたテクノロジー・コンサルティング課（通称：TC課）へ異動となりました。今はセールスエンジニアとして提案活動をしながら引き続き技術調査も行っております。
一言
最近ピックルボールというスポーツを始めました。マイナーラケットスポーツが好きです。
