こんにちは、フリーランスエンジニア歴5年のしょーごです。
みなさん静的サイトにフォームの埋め込みを行う際、これまで難儀しなかったでしょうか?
私は最初はフォームの実装方法がわからず、フォームのためにわざわざWordPressを埋め込むほどでした。
しかし、それも今回で終わり。新時代はGoogleフォームにより、切り開かれるのです。
前提条件
- jQuery使用
- 結構無理やり(コーポレートサイトよりかアンケート向き)
この記事を書いたのは
しょーご(@samurabrass)
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
\現役エンジニアのレビュー付き/
実践レベルのコーディング課題公開中

- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
コーディングを学習中の方はぜひご活用ください。
\無料の入門編から本格企業サイトまで/
この記事の反響



6/24 Googleフォームの仕様変更に対応
従来のフォームのnameの参照場所が変わったため、変更内容を反映させました。
なお、従来の方法で作成された方は、今回「nameの位置が変わっただけ」ですので、動作は保証されます。ソースコードを変える必要はありません。新規に作成されるかたのみ対象です。
nameが見つからないというお声が聞こえてきますが、このあと紹介する検証ツールでの検索を使えば発見できます!!見つからない場合は目で探すのでなく、検索して見つけてみてください!!👍
ゴール:Googleフォームで静的サイトのフォームを動くようにする
この記事を読んでできるようになること
- Googleフォームとの紐付け
- 送信完了後、同ページに「お問い合わせありがとうございました」のメッセージが出せる
- サンクスページに遷移できる
Googleフォームを作る
まずはGoogleフォームの作成をします。
ドメインがeditだとformが見つけられないため、ドメイン末尾が「viewform」となっていることを確認ください。


HTMLフォームで作る予定のものと、当然同じものを作ります
ここから2020/06/24よりの変更ポイント。
Googleフォームのinputのnameとformのaction先のURLをメモる
まずはわかりやすいようにフォームに適当に値を入れておきます。
値を入れておいた方が検証しやすいので、必ず入れてください。

chromeの検証機能で探します(Windowsの場合Ctrl + F、Macの場合⌘+Fで検索バーが出ます)
検証ツールでinputまたはentry.と入力し、確認してください。
①inputの場合

②entry.の場合

actionの値も押さえる

この数字の部分が自作フォームのnameに入ることになるので、actionの値と共に、メモしておいてください。
メールアドレスが見つからない場合
「メールアドレスを収集する」の場合、input群の一番下にname=”emailAddress”で格納されています。

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フォームなのかなと思います。
ということで、ここまでお疲れさまでした☺️
追加で、自動返信メールなどを付与したい場合
WordPressサイトの場合は?
完全に余談ですが、Google Formは軽めのフォーム設置の場合に使うことが多いです。
きちんとした企業サイトをWordPressで作成する場合はWordPressのプラグインでフォームを実装することが多いです。
なので、実際に案件でこのGoogle Formを利用するのはLP作成など「短期間公開のサイト&短納期の案件」がメインになるかもしれません。
Web制作者を目指す人向け厳選記事!
実務レベルまでの堅実なロードマップ公開中
Web制作の案件獲得方法はこちらから
実案件の進め方はこちら
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。

- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!
\課題の購入はこちらから/
\課題の詳細はこちらから/