Googleフォームを静的サイトに埋め込みカスタマイズ【非同期通信Ajax】

みなさん静的サイトにフォームの埋め込みを行う際、これまで難儀しなかったでしょうか？

私は最初はフォームの実装方法がわからず、フォームのためにわざわざWordPressを埋め込むほどでした。

しかし、それも今回で終わり。新時代はGoogleフォームにより、切り開かれるのです。

前提条件

jQuery使用
結構無理やり（コーポレートサイトよりかアンケート向き）

全く同じ内容をqiitaにもあげています（https://qiita.com/samuraibrass/items/d6afda6bd8f3306cee4f）

Contents

ゴール：Googleフォームで静的サイトのフォームを動くようにする
Googleフォームを作る
Googleフォームのinput、textareaのnameの値、formのaction先のURLをメモる
HTMLフォームを作成
GoogleフォームにHTMLフォームから送信してみる
お問い合わせ完了メッセージをだす。
サンクスページへ遷移
問題点
Googleフォームは静的サイトで軽く使いたい場合に

ゴール：Googleフォームで静的サイトのフォームを動くようにする

この記事を読んでできるようになること

Googleフォームとの紐付け
送信完了後、同ページに「お問い合わせありがとうございました」のメッセージが出せる
サンクスページに遷移できる

Googleフォームを作る

まずはGoogleフォームの作成をします。

HTMLフォームで作る予定のものと、当然同じものを作ります

Googleフォームのinput、textareaのnameの値、formのaction先のURLをメモる

chromeの検証機能で探します。

ラジオボタンだけ、各要素の後に最後に１つだけinputがあるのでそこだけメモります。

ここがフォームの送信先になります。

HTMLフォームを作成

<div class="form-wrapper">
    <form
      action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeiu2OXn6fYEOh2-9KW-t0mFtIPBiIbBoSD8RRyaRBxqDNmQQ/formResponse"
      id="form">
      <div class="box">
        <label for="name">お名前</label>
        <input type="text" name="entry.396652230" id="name" placeholder="お名前" required>
      </div>
      <div class="box">
        <label for="mail">メールアドレス</label>
        <input type="mail" name="entry.1934980237" id="mail" placeholder="メールアドレス" required>
      </div>
      <div class="box">
        <p class="box">お好きなプログラミング言語</p>
        <div class="flex-box"><input type="radio" name="entry.1977612351" required value="scala">
          <p>scala</p>
        </div>
        <div class="flex-box"><input type="radio" name="entry.1977612351" required value="kotlin">
          <p>kotlin</p>
        </div>
        <div class="flex-box"><input type="radio" name="entry.1977612351" required value="basic">
          <p>basic</p>
        </div>

      </div>
      <div class="box">
        <textarea name="entry.181178006" id="" cols="30" rows="10" placeholder="自由記述"></textarea><!-- /# -->
      </div>
      <input type="submit" class="submit-btn">
    </form>
    <p class="end-message">お問い合わせありがとうございました</p>
    <p class="false-message">送信失敗です</p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

.end-message {
  display: none;
}

.false-message {
  display: none;
}

ここで、googleフォームと同じ内容のHTMLフォームを作成し、nameとactionの値を合わせます。

下のend-messageとfalse-messageはjQueryで送信後に出現させたいので、
cssで標準でdisplay: none;で非表示にしています。

formタグにid=”form”→form内のinputのvalueを取得するためid指定（名前は任意）
jQuery読み込み→Ajax利用のため

この辺りは後々必要になってくるので、記述しておきます。

GoogleフォームにHTMLフォームから送信してみる

送信すると、

おおー受け取れてる！！

とここで感動してもいいですが、

いきなりこんなページに飛ばされるのは、ユーザビリティ的に問題があります。

ここからajax実装で、この画面に遷移しないように手を加えていきましょう。

お問い合わせ完了メッセージをだす。

$(document).ready(function () {

      $('#form').submit(function (event) {
        var formData = $('#form').serialize();
        $.ajax({
          url: "https://docs.google.com/forms/u/0/d/e/1FAIpQLSeiu2OXn6fYEOh2-9KW-t0mFtIPBiIbBoSD8RRyaRBxqDNmQQ/formResponse",
          data: formData,
          type: "POST",
          dataType: "xml",
          statusCode: {
            0: function () {
              $(".end-message").slideDown();
              $(".submit-btn").fadeOut();
              //window.location.href = "thanks.html";
            },
            200: function () {
              $(".false-message").slideDown();
            }
          }
        });
        event.preventDefault();
      });

    });

#formのsubmitイベントが起こった時、serializeでform内のinputのvalueを取り出しformDataに代入
$.ajaxでurlにgoogleフォーム送信先(action)のurl記入
statusCodeが0の時に送信アクションで、jQueryのメソッドでsubmit-btnを消し、end-message（お問い合わせありがとうメッセージ）を表示。
最後にevent.preventDefaultでsubmitイベントを無効化し遷移させない

という流れ。

送信後完了メッセージをslideDownで表示することができました。

さりげに送信後submit-btnをfadeOutさせているところに、気配りを感じますよね？（二重投票防止のため）

非同期でもデータが受け取れてます。
なんか感動…

サンクスページへ遷移

こちらは一瞬です。

statusCode: {
            0: function () {
              //$(".end-message").slideDown();
              //$(".submit-btn").fadeOut();
              window.location.href = "thanks.html";
            },

window.location.hrefで送信後、thanks.htmlに飛ばしています。