お問い合わせフォームとGoogleフォームの連携方法
2021年12月24日
目次
このファイルは、 src/contents/news/how-to-connect-contact-form.md に対応しています。
お問い合わせフォームと Google フォームの連携方法
-
Google フォームを作成します。
- https://docs.google.com/forms/u/0/
- 以下の画像のようになれば問題ないです。
-
新しい回答の通知を受け取るようにする
- 1 で作成した Google フォームの回答タブをクリックする
- スプレッドシートマークの右にある 3 点マークをクリックする。
- 「新しい回答についての通知を受け取る」をクリックしてにチェックをつける
-
お問い合わせ内容をスプレッドシートに同期させる
- 1 で作成した Google フォームの回答タブをクリックする
- スプレッドシートマークをクリックする
- 「新しいスプレッドシートを作成」または、「既存のスプレッドシートを選択」を選び作成をクリックする
-
難 Google フォームの各項目の ID と URL を確認する
-
1 で作成した Google フォームの上部にある「目のボタン（プレビュー）」を押す。
-
開いたページの URL を確認します。（後ほど使います。）
-
4.2 で開いたフォームに適当な値を入力します。
-
開発者ツールを開きます。
-
開発者ツールの中の
InspectorやElement,要素などといった名前のタブを開きます。 -
Inspectorタブを開くと、HTML が表示されます。そのままどこでも良いのでクリックしてInspectorにフォーカスを当ててください。 -
Ctl + FまたはCmd + Fを押して、Inspectorの検索バーを出現させます。 -
Inspectorの検索バーにentry.と入力してください。すると、この画像のように 4 件ヒットするはずです。value="名前"などとなっている箇所は 3 番で入力した値に応じて変わります。
-
検索結果を元に、フォームの項目とそれに対応する
entry.で始まる id を確認します。（後で使います。）
-
-
Google フォームの情報をサイトに反映させる
gatsby-config.tsを開きます。- 鉛筆マークからこのファイルの編集を選択してください。
- およそ 5 ~ 14 行目に既存の Google フォームの設定値があることを確認してください。
- そのうち、
googleFormUrlに 4.2 で確認した URL を貼り付けてください。 fieldsに 4.9 で確認した値を貼り付けます。nameには名前に対応するentry.で始まる id を貼り付けます。belongsには所属に対応するentry.で始まる id を貼り付けます。contactAddressには連絡先に対応するentry.で始まる id を貼り付けます。bodyには内容に対応するentry.で始まる id を貼り付けます。
- クオーテーション（
'）などを消してしまっていないか確認したら、ページの下部にある緑色のCommit changesと書いてあるボタンを押してください。- その際に、ボタン上部に 2 つの入力欄とラジオボタンが表示されますが、基本的にそのままで問題ありません
- 入力欄はどちらも空で問題ありません。
- ラジオボタンは、「
Commit directly to the develop branch.」を選択してください
これで設定は終了です。5~10 分ほどすると更新が反映されます。