Googleフォームを使って自サイトに合わせたお問合せフォームを実装する方法

こんにちは。ヒサノアスカ（@AsukaHisano）です。

個人サイトでは「メール運びの小人さん Mail Dwarf」というCGIを使用していたのですが、もう何年も前に開発停止＆脆弱性による使用停止となっていました。

ただヒサノ個人としてあのお手軽かつ便利なメールフォームシステムが本当に好きだったので、自分で作るべきかどうかと悩んだりもしたのですが……とある筋から「Googleフォームをカスタマイズすればできるよ」と教えてもらいました。

そこからいろいろ再調査して実験を繰り返した結果……希望していた挙動が完成したので、ここにその覚書きを載せておきます。

「お問合せフォーム」機能の要件定義

小難しい小見出しを付けてますが、ヒサノがお問い合わせフォームにあってほしいと思っている機能は以下のとおり。

  1. HTMLとCSSを使って、サイトデザインにあわせて自由にカスタマイズできる
  2. 送信後、送信確認画面が画面遷移なしで表示できる
  3. 送信されたメールが、設定したメールアドレスに送信される

なんというか、以前調べた時はGoogleフォームをそのままウェブサイトに埋め込む系記事しか見当たらなかったのですよね……
けどこの全部が問題なく解決できるのであれば、こんな便利なものを使わない手はありません。

というわけで、実際の手順を解説していきます。

スポンサーリンク

Googleフォームをカスタマイズしてサイトの「お問い合わせ」に使う手順

基本的な手順は以下のとおり。

タイムラインのタイトル
  • Step1
    HTMLでフォームを作る

  • Step2
    Step1のフォームにあわせてGoogleフォームを作る
  • Step3
    HTMLフォームにGoogleフォームのactionURLとnameを適用する

  • Step4
    JavaScriptで送信後の挙動を設定する
  • Step5
    GoogleフォームのGASにて指定メールへの送信機能を追加する

これで何をやればいいのかさくっとわかった方はお疲れさまでした。実装頑張ってください。
もう少し詳しい手順が必要な方は、以下から各手順の詳細をご確認ください。

1. HTMLでフォームを作る

まずは一番の基本となるフォームを作ります。

や、別にGoogleフォームを作ってからでもいいんですが、私の場合はまずレイアウトだけ先にHTMLでごりごり書いてから他のことやる癖がついるってのと、HTML作っておけば、裏でCSSとかで装飾とかレスポンシブ調整とかできるのが便利かなーって考えでのHTML優先です。

<form method="post" action="">
    <strong>お名前</strong>
    <input type="text" name="" placeholder="名前を入力してください。" required>
    <strong>メールアドレス</strong>
    <input type="email" name="" autocomplete="email" autocorrect="off" autocapitalize="off" placeholder="メールアドレスを入力してください。" required>
    <strong>お問合せ</strong>
    <textarea name="" rows="3" placeholder="メッセージを入力してください。" required></textarea>
    <button id="id_button" type="submit">送信</button>
</form>

メールアドレスに色々入れてるのは、自動挿入が嬉しいのと、特にスマホでメアド入力するときに通常キーボード表示されると恐ろしくうざい、という経験からの対処しています。自己体験に基づくUXは大事。

もちろんこれ以外にも必要な項目があれば追加してOKです。

2. Step1のフォームにあわせてGoogleフォームを作る

箱となるHTMLが完成したら、今度はGoogleフォームを作ります。
ここは特に難しく考えず、必要な項目を設定していけばOK。

唯一の注意事項は、ラジオボタンやセレクト、リスト名はHTMLで指定したvalueと同じものを使うこと。
valueとGoogleフォーム上の項目名が違っていると、データを送信した際にきちんとカウントされません。（やらかし済み）

スポンサーリンク

3. HTMLフォームにGoogleフォームのactionURLとnameを挿入する

さて、ここからちょっと面倒くさい感じに手を動かすことになります。

  1. Googleフォームの回答画面をプレビューで開く
  2. [ページの検証]コンソールを開き、要素の中からformの部分を見つける
  3. formタグの上で右クリックし、[HTMLとして編集]をクリック
  4. formタグ内をすべてコピーしてエディタに貼付け＆整形する
  5. 必要な項目を抜き出してHTMLに張り付ける

ちなみに[ページの検証]コンソールから必要項目を間違いなく抜き出せるならエディタへの貼付け＆整形は不要です。

フォームの動作に必要な項目は以下のとおり。

  1. formタグのactionにあるURL（https://docs.google.com/forms/（省略）/formResponse）
    ⇒HTMLのactionにコピペ
  2. 各入力項目内のnameにある”entry.（数字）”
    ⇒HTMLの各入力項目のnameにコピペ

通常のinput要素はinputタグ内にnameがありますが、ラジオボタンはJSで動かしているっぽいので、素直に「entry.」とかで検索すると早いです。

ちなみにこの時点で、送信完了画面はGoogleフォームデフォルトのままですが、データの送信自体はできるようになってます。

4. JavaScriptで送信後の挙動を設定する

ここまできたら、送信時の挙動をJavaScriptで設定します。

＜JavaScript＞

<script type="text/javascript">
  function showThxMessage() {
    document.googleForm.submit();
    document.getElementById('form').style.display = 'none';
    document.getElementById('thxMessage').style.display = 'block';
    $("#id_button").on("click", function () {
      $(this).parent("form").get(0).reportValidity();
    });
  }
</script>

内容としては、submitしたときに、フォーム部品が入っているid=”form”のブロックを消して、非表示にしていたid=”thxMessage”を表示するって感じです。

次のこのJSを動かすために、元のHTMLを改造します。

＜HTML＞

<form name="googleForm" method="post" action="https://docs.google.com/forms/（略）/formResponse" target="thxMsg" onsubmit="showThxMessage();">
  <div id="form" style="width:90%; margin:auto;">
    <strong>お名前</strong>
    <input type="text" name="entry.（略） " placeholder="名前を入力してください。" required>
    <strong>メールアドレス</strong>
    <input type="email" name="entry.（略）" autocomplete="email" autocorrect="off" autocapitalize="off" placeholder="メールアドレスを入力してください。" required>
    <strong>お問合せ</strong>
    <textarea name="entry.（略）" rows="3" placeholder="メッセージを入力してください。" required></textarea>
    <button id="id_button" type="submit">送信</button>
    <iframe name="thxMsg" style="display:none;"></iframe>
  </div>
  <article id="thxMessage" style="display:none; text-align: center;">
    お問い合わせありがとうございます。<br>
    いただいたメールを確認し、近日中にご返信いたします。
  </article>
</form>

改造の主な内容は以下のとおり。

  • formタグ：name=”googleForm” target=”thxMsg” onsubmit=”showThxMessage();”を追加
  • フォーム部品をid=”form”のブロック要素で囲む
    ※例ではdivを使ってますが、別のものでもOKです。
  • id=”form”ブロックの閉じタグ直前にname=”thxMsg”のiframeを挿入
    ⇒送信後に画面遷移をさせないために必要
  • id=”thxMessage”のブロックタグをform閉じタグの直前に挿入
    ⇒送信完了時に表示させるメッセージ。

ちなみに各名前はお好みにあわせて適切に変更してください。

これでフォーム送信後、ページ遷移なしで送信完了メッセージが表示されるようになりました！

5. GoogleフォームのGASにて指定メールへの送信機能を追加する

お問い合わせフォームのメールを、Googleフォームを開設したGmailで受け取るだけならGoogleフォームで受信設定すればOKです。
でもブログ用のメールアドレスを使っているならそのアドレスで受信するのが面倒もなくていいですよね。

その操作はGoogleフォームの設定画面の右上、[送信]ボタン隣の三点アイコン内「＜＞スクリプトエディタ」からGASを使って設定できます。

スクリプトエディタが開けたら、以下のスクリプトをコピペしてしまいましょう。

function sendform(e){
  var items = e.response.getItemResponses();
  var msg = '';
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    var q = item.getItem().getTitle();
    var a = item.getResponse();
    msg += q + ': ' + a + '\n\n';
  }
  GmailApp.sendEmail('（使いたいメアド）', '（メールの共通タイトル）', msg);
}

そしてこのスクリプトを動作させるトリガを[編集]＞[現在のプロジェクトのトリガー]の設定画面で設定します。
画面右下の[＋ トリガーを追加]ボタンを押し、表示のとおりに設定しましょう。

これで設定自体は終わりです。

実際にちゃんと動作するか試してみましょう。

スポンサーリンク

今後の要改善点

というわけで、自分のサイトなどからGoogleフォームを使ってお問合せやらアンケートなどが送れるようになりましたが、実はこのやり方だと、一部ちょっと使いづらい部分が残っています。

メール送信にGmailを使っているため、お問い合わせが来るたびに送信フォルダに履歴が残ってしまうのもあまり嬉しくないのですが、それ以上に嬉しくないのがメールの送信元。
現状では、メールの送信元がGoogleフォームを登録したGmailになっているため、お問い合わせ内容に対して単純に返信することができないのですよね……

なのでメール送信元を変更できるようGASをいじる必要がありそうですが、まあこの辺りはまた後日いろいろ調べて対応しようと思います。

スポンサーリンク
タイトルとURLをコピーしました