Bit Media

ガジェット & カルチャー & ライフスタイル

Web

Google Formsを自由なデザインで自サイトに組み込む方法

2018/10/25

ちょいと先日、WordpressなどCMSを組み込んでないサイトでお問い合わせフォームを作るのに、何か変わったやり方ないかなと考えて、Google Formsを使ってできないかと調べた結果、通常のHTML+CSSで組んだフォームからGoogle Foremsに送ることができるというのを見つけて、試してみたのでその覚書です。

今回作ってみたのはこのようなお問い合わせフォームです。Google Formsのデザインとは全く違いますね。それもそのはずでこのフォーム自体はオリジナルでイチから作っています。
それでは作り方を。

デモはこちらからご覧になれます
※送信するとGoogle Formsに内容が送信されてしまいますので注意。

1.お問い合わせフォームを作る

まずは普通にお問い合わせフォームを作ります。

先程のフォームの見本画像を想定してますので、記入欄内に項目が表示されるよう「placeholder」、なるべく記入が楽になるように「autocomplete」を入れています。必須項目は「required」を入れます。

2.Google Formsを作る


先程のお問い合わせフォームと同じ項目でGoogle Formsを作成します。
作成しましたら右上にあるプレビュー(目玉マーク)をクリックします。
そうしましたら、プレビュー画面のページのソースを表示します。
検索でまず「<form」を検索し、その後にある「action="https://docs.google.com/forms/hogehogehogehoge"」をメモしておきます。
次にフォームで使用しているタグを検索します。
「<input」と「<textarea」を検索し、そのタグ内にある「name="hogehoge"」とれがどの項目かメモします。多分、収集するメールアドレスは「name="emailAddress"」で、その他は「name="entry.00000000000"」のような値になっているかと思います。

3.お問い合わせフォームにGoogle Formsの値を入れる

1で作ったフォームに、2でメモした「action」と「name」の値を入力します。

これでフォームに記入しテスト送信を行ってみてください。
Google Formsの送信完了ページに遷移したら一旦無事に動いています。

そこで問題です。
Google Formsの送信完了ページに遷移なんてしたくないですね。
で、調べました。

4.送信完了ページへ遷移しないようにする

Google Form を自前のフォームで実装(はてなブログで完全カスタマイズ可) - IMUZA.com
Google Form ブログ実装のためのバリデーションを考える - IMUZA.com

僕はJavascript全くわからないので、こちらのサイトが参考になりました。
というか、まるっと上記IMUZAさんのソースをそのまま使用させていただきました。
IMUZAさんありがとうございます。
ということで、上記サイトの内容に合わせ下記のように書き直しました。

<form>の「action」と各入力項目の「name」は各自の値入れてくださいね。
そしてJavascriptも追加です。

仕組みは、<form>の「target」にダミーで設置した「iframe」を設定し、そこにGoogle Formsの送信完了ページを飛ばしています。
そしてJavascriptで送信後のフォームを消し、代わりに「お問い合わせありがとうございました」メッセージを表示させています。

デモはこちらからご覧になれます
※送信するとGoogle Formsに内容が送信されてしまいますので注意。

今回の記事作成に当たりホームページ作成・Webデザイナーのsynapse design lab.さんに協力いただきました。ありがとうございました。

-Web