サイトのお問い合わせフォームといえばWordPressのサイトであればプラグインを入れたり、静的なサイトだったらフリーのphpのメールフォーム（こんなの とか）を入れたりするのがよくある対応ですが、今回はGoogle formをサイトに連携してお問い合わせフォームを作る方法をやってみたいと思います。
概要
Google formはそのままサイトに埋め込むこともできるのですが、それだとサイトのトンマナにあっていないため使いづらかったり、サイトのコンテンツとしてみなされずスルーされる可能性も考えられます。
そこでGoogle formを利用しつつ、デザインをカスタマイズして、実用性のあるフォームの作成を考えていきたいと思います。
DEMOはこちらに
フォームのページ
▼もとになったフォームhttps://docs.google.com/forms/d/1eQHZhmrpjji7wn_9eZI2vIJdM1weV2C2wM_LmaLXBkU/edit
実装方法
Google formの用意
まずはGoogle formを新規作成して必要な項目を追加します。
フォームのhtmlの実装
htmlは実際のフォームと変わりなくinputタグやselectタグなどを用いて作成していきます。
作成したhtmlに先ほど作成したフォームからaction属性とname属性をコピーしてそれぞれの項目に貼り付けます。
Google formのhtml
エディターのコード
エディターのコード
ここで一度フォームを送信してみましょう。先ほどのフォームに回答が送られているはずです。
完了画面の実装
今の段階でフォームを送信すると、Google formの完了画面に遷移してしまうと思います。
そこで同じサイト内の完了ページに遷移するようにしてあげましょう。
まずあらかじめ完了ページのhtmlを用意しておきます。
それからフォームのhtmlのほうに戻り、formタグに target=”hidden_iframe” と onsubmit=”submitted=true;” を追記します。
<form action="https://docs.google.com/forms/~~~~~~" method="post" target="hidden_iframe" onsubmit="submitted=true;">そしてformタグの閉じタグの後に以下を記述します。
<script type="text/javascript">
var submitted = false;
</script>
<iframe
name="hidden_iframe"
id="hidden_iframe"
style="display: none"
onload="if(submitted) {window.location='完了ページのパスを入れる';}"
></iframe>これで送信後、用意した完了ページに遷移するかと思います。
ただフォームを実装するだけならここまででいいのですが、より実用的なものにするために確認画面を実装していきます。
確認画面の実装
フォームの画面はオリジナルのものですので、確認画面というものは存在しません。ということで自分で用意していきます。
と言っても確認ページに一度遷移してから完了画面に遷移させるというのは技術的にかなり難易度が高い話・・・
ということで今回はJSの力を使います。
簡単に説明すると、入力項目の下に、確認画面用のhtmlをあらかじめ用意して非表示にしておき、確認ボタンをクリックしたときに、入力内容を入れた状態で表示させる、という方法を取ります。
①まず、確認画面のhtmlを記述します。
②次に確認画面のhtmlと送信ボタンを非表示にし、入力のhtmlの後に確認ボタンを設置します。
③そして、確認ボタンをクリックすると、フォームに入力された内容をそれぞれ確認画面の表示位置に入れた状態で確認画面を表示する処理をJavascriptで記述します。
<form action="https://docs.google.com/forms/・・・・" method="post" target="hidden_iframe" onsubmit="submitted=true;">
～～～入力のhtml～～～
<button type="button">確認する</button>
<div class="formConfirm" id="confirm">
～～～確認のhtml～～～
<button type="submit">送信する</button>
</div>
</form>↑コードの一例
↑動作のイメージ
自動返信メールの実装
最後に自動返信メールの実装を進めていきましょう。
ここはGoogle form のアドオンを利用します。
「Email Notifications for Forms」というアドオンを導入します。https://workspace.google.com/marketplace/app/email_notifications_for_google_forms/984866591130?hl=ja
その名の通りメール関係の機能がいろいろあるアドオンですが、今回は「Create Email Notification」を選択します。
すると画面右下に設定画面が出てきますので、自動返信メールの設定をしていきます。
「Submitter Email Field」という項目が送信先に使用するフィールドです。
こちらは無料プランだと位置に20件までしか送れないので、実用性を考えると有料プランになってしまうかと思います。
メリット・デメリット
メリット
構築が簡単
Googleの機能を使うので、比較的簡単にフォームの構築を進めることができます。
デメリット
Googleに依存する
Googleの機能を使っているので、Google側で変更があってこれまで通りの運用ができなくなった場合にほかのサービスに乗り換えるなど対応が必要になります。
まとめ
Google formを利用してのお問い合わせフォームの構築は比較的簡単に進めることができ、もともといろいろな機能が用意されているためカスタマイズもしやすいです。
フォームの選定でお悩みの場合は一考の価値ありそうです。
