2019/07/31WEB制作ツイートシェアはてなポケットGoogleフォームってとっても便利なんだけど、使いたくない最大の理由はデザインが変更ができないので使ってるのが見た目でバレて「なんかダサい」。今回はそんな悩みを解決するオリジナルデザインでGoogleフォームを埋め込む裏技を紹介したいと思う。Googleフォームを使えばスプレッドシートとも簡単に連結できる!更にシステム側はGoogleフォームを使うので用意するのはビジュアルだけでOK!難しいphpの知識もいらないよ。Htmlだけでメールシステムを動かすことができるのだ!Googleフォームを用意するまず始めにGoogleフォームを用意しよう。Googleフォームの作り方についてはこちらの記事を参考にどうぞ。borderlessryohei.comGoogleフォーム使い方。今回はサンプルで作ったこちらのフォームを元に説明したいと思う。用意したのは「名前」「メールアドレス」「メッセージ本文」のシンプルなフォーム。裏側で動くのはこのフォームになるので表側のフォームもこれに合わせてビジュアルを整えよう。オリジナルフォームを用意する今回はサンプルとしてこんな感じのものでテスト。メールシステムも必要ないので静的な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開発に興味ある方はお気軽にご連絡ください。WEB制作、オフショア開発のご相談はこちらからWEB制作をご検討の方、制作パートナーを募集している企業さまはお気軽にご相談下さい。Good.Hackerでは設計からデザイン、構築、マーケティングまで幅広く対応しています。2015セブ在住の私が、3泊4日のセブ旅行プランを作ってみたよ。