サイトのお問い合わせフォームといえばWordPressのサイトであればプラグインを入れたり、静的なサイトだったらフリーのphpのメールフォーム（こんなのとか）を入れたりするのがよくある対応ですが、今回はGoogle formをサイトに連携してお問い合わせフォームを作る方法をやってみたいと思います。

概要

Google formはそのままサイトに埋め込むこともできるのですが、それだとサイトのトンマナにあっていないため使いづらかったり、サイトのコンテンツとしてみなされずスルーされる可能性も考えられます。

そこでGoogle formを利用しつつ、デザインをカスタマイズして、実用性のあるフォームの作成を考えていきたいと思います。

DEMOはこちらに

フォームのページ

▼もとになったフォーム
https://docs.google.com/forms/d/1eQHZhmrpjji7wn_9eZI2vIJdM1weV2C2wM_LmaLXBkU/edit

実装方法

まずはGoogle formを新規作成して必要な項目を追加します。
作成したら発行されたリンクでフォームを開き、ディベロッパーツールでソースを参照します。
すると、このフォームのaction属性と各項目のname属性を取得することができます。
これを後ほど実装したフォームで使用します。

htmlは実際のフォームと変わりなくinputタグやselectタグなどを用いて作成していきます。
そのほかのdivタグやpタグを使っても問題ありません。

作成したhtmlに先ほど作成したフォームからaction属性とname属性をコピーしてそれぞれの項目に貼り付けます。

ここで一度フォームを送信してみましょう。先ほどのフォームに回答が送られているはずです。

今の段階でフォームを送信すると、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を記述します。
場所はformタグの中であればどこでいいですが、入力の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」という項目が送信先に使用するフィールドです。
「How would you like to create the email template for notifications?」というところでメールの文面を編集できます。html編集もあるので、htmlメールも行けるかも。

こちらは無料プランだと位置に20件までしか送れないので、実用性を考えると有料プランになってしまうかと思います。

メリット・デメリット

構築が簡単

Googleの機能を使うので、比較的簡単にフォームの構築を進めることができます。
送られたメールもスプレッドシートに送ることができるので、管理がしやすいです。

Googleに依存する

Googleの機能を使っているので、Google側で変更があってこれまで通りの運用ができなくなった場合にほかのサービスに乗り換えるなど対応が必要になります。
また、機能によっては有料のものがあり、条件に該当する場合は導入までのハードルになりえます。

まとめ

Google formを利用してのお問い合わせフォームの構築は比較的簡単に進めることができ、もともといろいろな機能が用意されているためカスタマイズもしやすいです。

フォームの選定でお悩みの場合は一考の価値ありそうです。