オリジナルデザインでGoogleフォームを埋め込んで、お問い合わせフォームとスプレッドシートを連携させる裏技！

Googleフォームってとっても便利なんだけど、使いたくない最大の理由はデザインが変更ができないので使ってるのが見た目でバレて「なんかダサい」。
今回はそんな悩みを解決するオリジナルデザインでGoogleフォームを埋め込む裏技を紹介したいと思う。
Googleフォームを使えばスプレッドシートとも簡単に連結できる！
更にシステム側はGoogleフォームを使うので用意するのはビジュアルだけでOK！
難しいphpの知識もいらないよ。
Htmlだけでメールシステムを動かすことができるのだ！

Googleフォームを用意する

まず始めにGoogleフォームを用意しよう。
Googleフォームの作り方についてはこちらの記事を参考にどうぞ。

今回はサンプルで作ったこちらのフォームを元に説明したいと思う。
用意したのは「名前」「メールアドレス」「メッセージ本文」のシンプルなフォーム。
裏側で動くのはこのフォームになるので表側のフォームもこれに合わせてビジュアルを整えよう。

オリジナルフォームを用意する

今回はサンプルとしてこんな感じのものでテスト。
メールシステムも必要ないので静的なhtmlでも普通に動く。
コードはこんな感じ。

まず最初から説明すると

https://docs.google.com/forms/d/e/1FAIpQLScGhgyRaYz7C6Q0h0jdnSKDMff4TcV8RPc2AMPW-lt2CdCLfg/formResponse
この部分が自分がサンプルで作ったGoogleフォームのURL。
なのでこの部分にはそれぞれのGoogleフォームのURLを入れればOK！

次に重要なのが各nameタグのバリューだ。
ここは作ったGoogleフォームのソースを確認しよう。

こんな感じで各回答箇所を確認するとentryから始まる数字があるので、各項目全部を調べて指定の数字を入力するだけ。
全部の項目設定後、送信ボタンを押せば裏側ではGoogleフォームのシステムが動いてメッセージを送信してくれる。
なのでもちろん内容はGoogleフォーム側の回答にたまるし、スプレッドシートにも自動で情報が追加される！
めっちゃ便利！

送信後にGoogleフォームに飛ぶのをさける

何も設定しないと送信後に上のようにGoogleフォーム側のthanksページに飛んでしまうのでそうならないようにリダイレクトの設定をしておこう。

上記の日本語の部分にthnakページのurlを入れれば送信後にGoogleフォーム側のthanksページにいかず設定したページに飛んでくれる。

必須項目のエラーメッセージもページ内で起動させる

何も設定しないと必須項目にエラーがあった場合は上の画像のようにGoogleフォーム側に飛んでしまう。
それを避けるためにjsを追加しておこう。

今回の場合だとこんな感じ。
後は自分のフォームの内容にそって変更して貰えばOK。
デモを用意しておくのでチェックしたい方はテストしてみてね。
デモURLはこちら
送信後は自動でこっちのスプレッドシートに内容が反映されてるはず。
スプレッドシートを確認

デメリット

デメリットにも触れておくと、やはり複雑なフォームに関しては実装ができない。
あくまで実装できるのはGoogleフォームで実装できる内容だけになることと、Google様のフォームシステムを使っているのでGoogle様が仕様変更すると使えなくなる可能性があるってことかな。
あとは集計データーをGoogle側に保存したくない人は避けた方がいいかもしれない。

まとめ

友人に紹介されるまで全然知らなかったGoogleフォームの便利な埋め込み方法。
実際調べてみたんだけど日本語情報が全然なかったので自分で書いてみた！
参考にしたのは以下のページ
https://blog.webjeda.com/google-form-customize/
Googleフォームの最大の悩みである「Googleフォーム使ってます」感をなくす裏技！
お問い合わせフォームとスプレッドシートを連動させるって情報をまとめる側からすると超便利。
簡単なお問い合わせフォームならこれ使っちゃうのが一番便利だし簡単じゃないかな。
参考にどうぞ！
フィリピンでのWEB開発に興味ある方はお気軽にご連絡ください。