プログラミング

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

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

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

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

前提条件

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

しょーご
しょーご
Googleフォームは無料だし使えるなら使いたいよね

この記事の反響

6/24 Googleフォームの仕様変更に対応

従来のフォームのnameの参照場所が変わったため、変更内容を反映させました。

なお、従来の方法で作成された方は、今回「nameの位置が変わっただけ」ですので、動作は保証されます。ソースコードを変える必要はありません。新規に作成されるかたのみ対象です。

nameが見つからないというお声が聞こえてきますが、このあと紹介する検証ツールでの検索を使えば発見できます!!見つからない場合は目で探すのでなく、検索して見つけてみてください!!👍

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

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

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

Googleフォームを作る

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

ドメインがeditだとformが見つけられないため、ドメイン末尾が「viewform」となっていることを確認ください。

googleフォーム
作成画面の場合、フォーム右上のプレニューより参照してください
googleフォーム作成

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

ここから2020/06/24よりの変更ポイント。

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

まずはわかりやすいようにフォームに適当に値を入れておきます。

値を入れておいた方が検証しやすいので、必ず入れてください。

googleフォーム name 場所

chromeの検証機能で探します(Windowsの場合Ctrl + F、Macの場合⌘+Fで検索バーが出ます

検証ツールでinputまたはentry.と入力し、確認してください。

①inputの場合

Googleフォーム name 場所

②entry.の場合

googleフォーム name 場所

actionの値も押さえる

googleフォーム action
actionの値も確認、送信先はactionに入っているため

この数字の部分が自作フォームのnameに入ることになるので、actionの値と共に、メモしておいてください。

メールアドレスが見つからない場合

「メールアドレスを収集する」の場合、input群の一番下にname=”emailAddress”で格納されています。

googleフォーム name 場所

検証ツールでの検索に慣れましょう!!。
nameが見つからない場合でも積極的に検索して探すことができれば、今後のアプデにも対応できます。

HTMLフォームを作成

<div class="form-wrapper">
    <form
      action="https://docs.google.com/forms/hogehoge~"
      id="form">
      <div class="box">
        <label for="name">お名前</label>
        <input type="text" name="entry.396652" id="name" placeholder="お名前" required>
      </div>
      <div class="box">
        <label for="mail">メールアドレス</label>
        <input type="mail" name="entry.1934980" id="mail" placeholder="メールアドレス" required>
      </div>
      <div class="box">
        <p class="box">お好きなプログラミング言語</p>
        <div class="flex-box"><input type="radio" name="entry.1977612" required value="scala">
          <p>scala</p>
        </div>
        <div class="flex-box"><input type="radio" name="entry.1977612" required value="kotlin">
          <p>kotlin</p>
        </div>
        <div class="flex-box"><input type="radio" name="entry.1977612" required value="basic">
          <p>basic</p>
        </div>

      </div>
      <div class="box">
        <textarea name="entry.181178" 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利用のため
  • name=”entry.1977611″などと、entry.先ほどの数字とする

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

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


送信すると、



おおー受け取れてる!!

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

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

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

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

$(document).ready(function () {

      $('#form').submit(function (event) {
        var formData = $('#form').serialize();
        $.ajax({
          url: "https://docs.google.com/forms/hogehoge",
          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に飛ばしています。


css書いてないので、ページ遷移してる感がないですが、一応遷移してますw



こうしてみると、Googleフォームの集計機能すごいっすね…

問題点

バリデーション

入力必須ぐらいなら、

<input type="text" required>

みたいにrequired使えば

デフォでこのように表示してくれるけど、バリデーションはフロントよりサーバーサイド(PHP)でやるのが鉄板らしいから、どうなんでしょうか。

クロスドメイン問題

僕も詳しくないですが、そういう問題があるらしい。

https://alliance7.blogspot.com/2019/01/google-formaxioscros.html

動作するので、致命的だとは思いませんが、エラーが検知できないとかなんとか。

ステータスコード0で成功、200でfalseの違和感

ここの挙動が正直いまいちわからないです。

受託制作での場合は、相手にGoogleフォームを作ってもらう必要あり

Googleアカウント情報をもらうのは煩わしいので、相手にGoogleフォームを作ってもらう必要があります。
少し、相手のITリテラシーが必要かもです。

Googleフォームは静的サイトで軽く使いたい場合に

ガッチリしたコーポレートフォームはPHP工房かな?

Googleフォームで何か不具合が起きたことはないですが、企業サイトでがっつりフォームを作るならPHP工房

お手軽に動くフォームを設置するのならGoogleフォームなのかなと思います。

ということで、ここまでお疲れさまでした☺️

追加で、自動返信メールなどを付与したい場合

Web制作完全独学ロードマップはこちら

Web制作の案件獲得ロードマップ

実案件の進め方

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. XD,PSDデザインからのコーディング
  2. 2回の表示確認特典
  3. ポートフォリオOK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

さらに、まとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

あなたに是非読んでほしい記事です!