Gatsbyに問い合わせフォームを追加する[GoogleForms]

静的ウェブサイトであるGatsbyでは、フォームを直接実装することはできません。そのため外部サービスを使って実装することになります。

フォームを提供しているサービスは探せばたくさんありますが、有料のものが多い印象でした。無料で使えそうなものもありましたが、どれも広告がついてしまいそうだったので、今回はGoogleFormsを利用することにします。

GoogleFormsで問い合わせフォームを作成

Googleにアクセスして、右上にある9個の点があるようなアイコンからFormsを選択します。

続いて、[新しいフォームを作成]から[空白]のフォームを選んで作成し始めます。

ここで、Gatsbyウェブサイトに設置したいフォームと同じ形式で、フォームを作成していきます。今回は、名前とメールアドレスを記述式テキスト入力するシンプルなフォームを使います。

質問を追加するには、右側にある"+"が○で囲まれたボタンを選択します。

画像で[ラジオボタン]となっている部分を選択すれば、質問の形式を変えることができます。

質問を消す場合は、[必須]の左にあるゴミ箱ボタンを選択します。

Google Formでのフォーム作成自体はこれだけで終わりです。

GoogleFormsから質問のID情報を抽出する

次にGatsbyウェブサイトで作成するフォームと、GoogleFormsで作成したフォームを連携させなければなりません。

GoogleFormsでは質問ごとにIDが割り当てられています。このIDを抽出してGatsbyウェブサイトのフォームで使うことで、GoogleFormsのどの質問にどの項目を送信するかを明確にすることができます。

この方法は2021年11月現在時点のもので、Googleがソースコードを変更した場合は、変わる可能性があるのでご注意ください。

まず、GoogleFormsでフォームを作成し終わったら、右上にある"眼"のアイコンをクリックして、フォームのプレビューを表示しましょう。

プレビューを表示させたら、そのページのソースコードを表示させます。利用しているブラウザがGoogle Chromeなら、右クリック→[ページのソースを表示]で表示できます。

よくわからないコードがズラーっと並んでいますが、この内容を理解する必要はありません。

このソースコード内を"FB_PUBLIC_LOAD_DATA_"で検索します。そうすると以下のような情報が見つかります。

var FB_PUBLIC_LOAD_DATA_ = [null,["これはフォームのチュートリアルです",[[483637745,"名前",null,0,[[1188677493,null,1]]],[1725783114,"メールアドレス",null,0,[[403131878,null,1,null,[[2,102]]]]]]

この変数の右側に、先ほどGoogleFormsで作った項目の情報があります。以下の部分ですね。

[483637745,"名前",null,0,[[1188677493,null,1]]]
[1725783114,"メールアドレス",null,0,[[403131878,null,1,null,[[2,102]]]]]

この項目の右側にある大きい数字を使います。今回の場合、名前は"1188677493"で、メールアドレスは"403131878"です。この数字はあとで利用します。

続いて、このソースコード内で"formResponse"と検索します。以下のようなアドレスが見つかるので、このアドレスもメモしておきます。

https://docs.google.com/forms/u/0/d/e/1FAIpQLSf7dasDxSgt_663gyJ7mgi0KTWy1kSSAVTnTxPhdLUPO4LRFg/formResponse

Gatsbyウェブサイトでフォームを作成する

最後にGatsbyウェブサイト上でフォームを作成します。

src/pagesにform.jsとform_sent.jsの２つのファイルを作成します。form.jsにフォームを作成し、form_sent.jsはフォームを送信した後に表示されるページです。

まずform_sent.jsはフォームが送信されたこと表示するだけのページです。

# src/pages/form_sent.js

import * as React from 'react'
import Layout from '../components/layout'

const FormSentPage = () => {

 return (
   <Layout pageTitle="Form Sent Page">
     <h2>フォームが送信されました</h2>
   </Layout>
 )
}
export default FormSentPage

form.jsには名前とメールアドレスを送信するフォームを設置します。

# src/pages/form.js

import * as React from 'react'
import Layout from '../components/layout'
import { navigate } from "gatsby"

const FormPage = () => {
 return (
   <Layout pageTitle="Form Page">
       <form onSubmit={ () => {navigate("/form_sent")}} action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf7dasDxSgt_663gyJ7mgi0KTWy1kSSAVTnTxPhdLUPO4LRFg/formResponse" target="hidden_iframe">
           <h2>サンプルフォーム</h2>
           <div>
               <label htmlFor="name">名前</label>
               <input id="name" type="text" name="entry.1188677493" placeholder="名前" required></input>
           </div>
           <div>
               <label htmlFor="email">メールアドレス</label>
               <input id="email" type="text" name="entry.403131878" placeholder="email@example.com" required></input>
           </div>
           <button type="submit">送信</button>
       </form>
       <iframe title="hidden_iframe" name="hidden_iframe" style={{display:'none'}}></iframe>
   </Layout>
 )
}
export default FormPage

formのactionにはGoogleFormsから入手したURLアドレスを入力します。

formのnameには先ほどGoogleForms入手した各項目のIDを使って、"entry.XXXX"という形式で入力します。僕の場合は、名前はentry.1188677493になり、メールアドレスはentry.403131878となりました。これでこの項目が、GoogleFormsのどの項目の情報かわかるようになっています。

また、通常GoogleFormsに回答を送信すると、以下のようなページに飛んでしまいます。

これを避けるために、formのtargetを非表示のiframeに送っています(hidden_iframe)。

これに加えて、Gatsbyのnavigateを利用して、フォーム送信後のページであるform_sentに遷移しています。

この状態で、ローカル開発環境で実行してみます。(見た目はわかりやすいように少しいじってます)

http://localhost:8000/form

フォームの項目を入力して、送信ボタンを押すと、フォーム送信後のページに遷移し、さらにGoogleFormsに回答が追加されています。

実装結果

Tutorial:Form Page | 好かれるマーケティング研究室

まとめ

GatsbyでGoogleFormsと連携するための基本的な内容について説明しました。

実際に利用する場合は、入力内容の検証なども行いたいところです。今回の場合、無効なメールアドレス形式で送信してしまうと、ページ遷移はしますが、GoogleFormsに回答が送信されなかったりします。

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ