この記事では、Googleフォームを静的サイトのお問い合わせフォームと連携させる方法をご紹介します。
初めての埋め込みの際にエラーが出てしばらく悩んだので、エラー時に注意すべき点も記しています！
手順
以下のような手順で進めて行きます。 この記事では手順２－３について説明致します。
１．静的サイトのお問い合わせフォームをHTMLでコーディング
２．Googleフォームで、静的サイト問い合わせフォームの質問内容と対応するフォームを作成する
３．Googleフォームと静的サイトお問い合わせフォームを連携させる
４．サンクスページへの遷移
Googleフォームでフォームを作成する
まずは静的サイトで作成したお問い合わせフォームの質問内容に対応するフォームを作成します。
私は記述式の質問の他、ラジオボタン・チェックボックス・プルダウン形式の質問も入れました。
Googleフォームと静的サイトお問い合わせフォームを連携させる
プレビュー画面を開き値を入れる
Googleフォームが出来上がったら、フォーム右上のプレビューボタン（目のようなマーク）を押します。
inputの値を探しHTMLに記述する
プレビュー画面に切り替わったら、以下画像のように全ての質問に値を入れて検証画面を開きます。
※値を入れておいた方が検証画面で該当部分を見つけやすいです。
検証画面を開いたらCtrl+Fで"entry”と入力して検索します。（Macの場合⌘+F）
するとフォームに入力した値が入っている箇所が見つかります。この"entry.〇〇〇〇"の部分をHTMLのフォーム内にコピペしていきます。
例えば上記の例で言うと、名前(大山田太郎)はentry.869146989ということがわかるので、HTMLでコーディングしたフォーム、名前のinputタグ内に、name=" entry.869146989 "と記述します。
他の項目も同様にHTMLに記述していきます。
actionの値を探しHTMLに記述する
次にform actionの値を探します。
https://docs.google.com/forms/～/formResponseをコピーし、HTMLでコーディングしたformタグ内actionにペーストします。
サイトのお問い合わせフォームから送信してみる
上記の作業でサイトのお問い合わせフォームとGoogleフォームが連携できているはずです。
実際にサイトのお問い合わせフォームに値を入れて送信してみましょう！
うまく送信できていれば以下のようにGoogleフォームに値が飛んでいるはずです！
簡単に問い合わせフォームとGoogleフォームを連携させることができるんですね！びっくりです！
エラーが出たときの対処方法
うまく送信できなかったときに確認すべき事項は2つあります。
entryとactionの値の再確認
上記で説明した"entry"と"action"の値が正しくコピペされているか再度確認しましょう！！
inputタグ内のvalueの値を確認
送信すると回答が反映されず、Googleフォームの左下に「見直しを必要とする質問があります」とエラーが出ることがあります。
どこを見直すとも書いてないし、どこを見直したらいいんやー！！と涙目でしたが、HTML内のvalueの値を修正したらうまく回答が反映されました！
ラジオボタン、チェックボックスについてはGoogleフォーム内の回答とHTML inputタグ内のvalueの値を同じにしなければいけません。
全角や半角の違いでも機能しないので、うまくいかない場合は再度valueの値を見直してみましょう。
まとめ
初めて実装した時、このvalueの罠に引っ掛かりました(^_^;)
この記事が困っている方の一助になれば幸いです。
