googleフォームを利用した静的サイトでのメール自動送信機能付きフォーム作製

　本解説はポートフォリオサイトを作成した際の作成法を記述したものだ。静的サイト等のサーバーレス環境でのフォームを作製する際に参考にしていただけると幸いだ。

自動返信機能はスパムによるフォームへの投稿により、意図的に返信メールを大量のメールアドレスに送信させられる事があります。
取り扱いの際にはスパムへの対策を十分行ってください。
また本記事を閲覧の上実装したプログラムに関して不利益が生じた場合、本記事作製者は責任を負いません。そのため実装の際には自己責任でお願いします。

Google Form Apiに関して

　この記事はGoogle form apiに関して発表される前のモノです。そのため本記事ではこのapiを利用していません。

Googleフォーム作製

　contact に記載して欲しいフォーム内容と同じ内容の googleフォームを作製する。

　必須の項目に関しては設定すべきである。また「回答の検証」機能を用いて e-mail 等の設定を行っても良いが、本解説で扱う方法では error をハンドリング出来ないため使用しないことを推奨する。

自分のフォーム作製

　HTML を利用したフォームに関しては様々な書き方があるが、今回は CSS の記述しない簡単な物にする。
　Googleフォームで必須の項目に設定した項目関しては inputタグ内に required属性を追加する。

hoge.html

<form action="" id="form">
  <label for="corp">貴社名</label><br>
  <input type="text" name="" placeholder="〇〇株式会社" id="corp"><br>
  <label for="name">お名前</label><span class="mandatory">＊必須</span><br>
  <input type="text" name="" placeholder="名前" id="name" required><br>
  <label for="mail">メールアドレス</label><span class="mandatory">＊必須</span><br>
  <input type="email" name="" placeholder="〇〇@〇〇.jp" id="mail" required><br>
  <label for="tell">電話番号</label><br>
  <input type="tel" name="" placeholder="00-0000-0000" id="tell"><br>
  <label for="con">お問い合わせ内容</label><span class="mandatory">＊必須</span><br>
  <textarea type="text" name="" placeholder="内容" id="con" required></textarea><br><br>
  <input type="submit" value="送信する" id="submit">
</form>

googleフォームから値の取り出し

　右上送信から googleフォームの公開アドレスを取得して、そのサイトに入る。
　
　
　サイト内で検証から webページの HTML を閲覧する。

1. form タグの action を取得する

　CONTROL + F 等で form のタグを検索する。

　そのタグの属性名action の属性値（URL）をコピー、記述する。

2. input タグの name を取得する

　CONTROL + F 等で entry の属性値を検索する。

　そのタグの属性名name の属性値（entry.数値）をコピー、記述する。

　上から順番に Googleフォームの順番と対応しているため、順番を変えないようにする

　以上の手順より Googleフォームを利用した静的サイトのフォームは完成である。しかし現状では submit ボタンを押した際に Googleフォームのページに飛ばされる。

iframeを利用したページジャンプの阻止

　本解説では強引な方法だが iframe を利用してページジャンプを阻止する。
　まずフォームタグに属性値target を追加する

<form action="https://docs.google.com/---------" id="form" target="submitComplate">

　また formタグの外にdisplay: none;の iframe を記載し、そこに submit 後のページを表示させる。

<iframe name="submitComplate" srcdoc="<p>_</p>" style="display: none;"></iframe>

　これでページジャンプは阻止できたが、この状態だと submit を押した際に表記が変わらないためフォームを送信できているか解らない。

　そのため form を送信した際のイベントを取得して、そのイベントが発生した際に submit ボタンを消し、送信完了表示をする。

<input type="submit" value="送信する" id="submit">
<span id="fin_submit" class="nonvisi">送信が完了しました</span>

　submitの下に送信完了表示を記載。

<script>
    document.getElementById("form").addEventListener('submit', (e) => {
      document.getElementById("fin_submit").classList.remove('nonvisi');
      document.getElementById("submit").classList.add("nonvisi");
    });
</script>
<style>
  .nonvisi{
    display: none;
  }
</style>

　フォームが送信された際に、ボタンを消しつつ送信完了と表示するように JavaScript と CSS を組む。

　これまでをまとめると下記のコードとなる。

hoge.html

  <form action="" id="form">
    <label for="corp">貴社名</label><br>
    <input type="text" name="" placeholder="〇〇株式会社" id="corp"><br>
    <label for="name">お名前</label><span class="mandatory">＊必須</span><br>
    <input type="text" name="" placeholder="名前" id="name" required><br>
    <label for="mail">メールアドレス</label><span class="mandatory">＊必須</span><br>
    <input type="email" name="" placeholder="〇〇@〇〇.jp" id="mail" required><br>
    <label for="tell">電話番号</label><br>
    <input type="tel" name="" placeholder="00-0000-0000" id="tell"><br>
    <label for="con">お問い合わせ内容</label><span class="mandatory">＊必須</span><br>
    <textarea type="text" name="" placeholder="内容" id="con" required></textarea><br><br>
    <input type="submit" value="送信する" id="submit">
    <span id="fin_submit" class="nonvisi">送信が完了しました</span>
  </form>
</body>
<script>
    document.getElementById("form").addEventListener('submit', (e) => {
      document.getElementById("fin_submit").classList.remove('nonvisi');
      document.getElementById("submit").classList.add("nonvisi");
    });
</script>
<style>
  .nonvisi{
    display: none;
  }
</style>

reCAPTCHA V2

　Google の CAPTCHA 認証システムである reCAPTCHA V2 を利用して機械によるフォームの送信を防ぐ。
　要らない場合は読み飛ばして問題ない。

reCAPTCHA　ここから reCAPTCHA V2 を取得する。」

　適当にラベル名を決め、reCAPTCHA V2のチェックボックスを選択し、掲載する予定のドメインを登録する（一応検証用にローカルホストも登録しておく）

　gmailを入力し、同意して送信。

　するとサイトキーが表示されるため、上のキーのみをコピーする。

　もとの HTML に戻り以下の記述をそれぞれコメントの箇所に記述

<!-- head等スクリプトを記載しているところに -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<!-- head等スクリプトを記載しているところに reCAPTCHAが成功した際に実行される -->
<script>
      var myAlert = (code) =>{
        if(code !== ""){
          document.getElementById("submit").removeAttribute("disabled");
        }
      }
</script>

<!-- reCAPTCHAを記載したいところに -->
<div class="g-recaptcha" data-sitekey="サイトキー" data-callback="myAlert"></div>

<!-- 内容を変更(disabledを追加) -->
<input type="submit" value="送信する" id="submit" disabled>

　これでreCAPTCHAが成功した際にsubmitを押せるようになった。

コード全文 【クリックして展開】

hoge.html

  <form action="" id="form">
    <label for="corp">貴社名</label><br>
    <input type="text" name="" placeholder="〇〇株式会社" id="corp"><br>
    <label for="name">お名前</label><span class="mandatory">＊必須</span><br>
    <input type="text" name="" placeholder="名前" id="name" required><br>
    <label for="mail">メールアドレス</label><span class="mandatory">＊必須</span><br>
    <input type="email" name="" placeholder="〇〇@〇〇.jp" id="mail" required><br>
    <label for="tell">電話番号</label><br>
    <input type="tel" name="" placeholder="00-0000-0000" id="tell"><br>
    <label for="con">お問い合わせ内容</label><span class="mandatory">＊必須</span><br>
    <textarea type="text" name="" placeholder="内容" id="con" required></textarea><br>
    <div class="g-recaptcha" data-sitekey="サイトキー" data-callback="myAlert"></div><br>
    <input type="submit" value="送信する" id="submit" disabled>
    <span id="fin_submit" class="nonvisi">送信が完了しました</span>
  </form>
</body>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
    document.getElementById("form").addEventListener('submit', (e) => {
      document.getElementById("fin_submit").classList.remove('nonvisi');
      document.getElementById("submit").classList.add("nonvisi")
    });

    var myAlert = (code) =>{
      if(code !== ""){
        document.getElementById("submit").removeAttribute("disabled");
      }
    };
</script>
<style>
  .nonvisi{
    display: none;
  }
</style>

メール自動返信機能

　フォームに新規投稿があった際に自動で返信する機能。この機能をつけることで「5分以内に自動返信メールが届かない場合フォームの入力が失敗していますが。お手数ですが再度入力をお願いします」と記載できる。

　フォームにスクリプトエディタを記載して実装する方法が存在するが、私の環境では動かなかったためスプレッドシートにスクリプトエディタで記載する方法をとる。
　Googleフォーム回答画面右上のスプレッドシートからスプレッドシートを新規作成する。

　スプレッドシートのツールからスクリプトエディタを選択する。

　この際「ページが見つかりません」という表示が出る人がいると思う。その場合は現在ログインしているすべての Googleアカウントからログアウトして、このフォーム作成に利用したGoogleアカウントのみログインするとこの先の操作が可能になる。

　その後のスクリプトエディタ、コード.gsの表記を以下の様に変える

コード全文 【クリックして展開】

コード.gs

function onFormSubmit(e) {
  // フォームの回答を取得
  var corp = e.namedValues['貴社名'][0];
  var name = e.namedValues['お名前'][0];
  var tell = e.namedValues['電話番号'][0];
  var email = e.namedValues['メールアドレス'][0];
  var message = e.namedValues['お問い合わせ内容'][0];
  
  // 自動返信メール件名
  var subject = 'お問い合わせいただきありがとうございました。';
      
  // 自動返信メール本文
  if(!corp){
    if(!tell){
      var body = name + '様\n' +
      '\n' +
      'この度はお問い合わせいただき、誠にありがとうございます。' +
      '\n' +
      '後日あらためてご連絡させていただきますので\n' +
      'よろしくお願い申し上げます。\n' + 
      '\n' +
      '─────────────────────────\n' +
      'ご送信内容の確認\n' +
      '─────────────────────────\n' +
      '\n' +
      '【氏名】\n' +
      name + '\n' + 
      '\n' +
      '【メールアドレス】\n' +
      email + '\n' + 
      '\n' +
      '【お問い合わせ内容】\n' +
      message+'\n'+'\n'
      + '\n※このメールはGoogleフォームからの自動送信メールです。';
    }else{
      var body = name + '様\n' +
      '\n' +
      'この度はお問い合わせいただき、誠にありがとうございます。' +
      '\n' +
      '後日あらためてご連絡させていただきますので\n' +
      'よろしくお願い申し上げます。\n' + 
      '\n' +
      '─────────────────────────\n' +
      'ご送信内容の確認\n' +
      '─────────────────────────\n' +
      '\n' +
      '【氏名】\n' +
      name + '\n' + 
      '\n' +
      '【メールアドレス】\n' +
      email + '\n' + 
      '\n' +
      '【電話番号】\n' +
      tell + '\n' + 
      '\n' +
      '【お問い合わせ内容】\n' +
      message+'\n'+'\n'
      + '\n※このメールはGoogleフォームからの自動送信メールです。';
    }
  }else{
    if(!tell){
      var body = corp +" "+name + '様\n' +
      '\n' +
      'この度はお問い合わせいただき、誠にありがとうございます。' +
      '\n' +
      '後日あらためてご連絡させていただきますので\n' +
      'よろしくお願い申し上げます。\n' + 
      '\n' +
      '─────────────────────────\n' +
      'ご送信内容の確認\n' +
      '─────────────────────────\n' +
      '\n' +
      '【氏名】\n' +
      name + '\n' + 
      '\n' +
      '【メールアドレス】\n' +
      email + '\n' + 
      '\n' +
      '【お問い合わせ内容】\n' +
      message+'\n'+'\n'
      + '\n※このメールはGoogleフォームからの自動送信メールです。';
    }else{
      var body = corp +" "+name + '様\n' +
      '\n' +
      'この度はお問い合わせいただき、誠にありがとうございます。' +
      '\n' +
      '後日あらためてご連絡させていただきますので\n' +
      'よろしくお願い申し上げます。\n' + 
      '\n' +
      '─────────────────────────\n' +
      'ご送信内容の確認\n' +
      '─────────────────────────\n' +
      '\n' +
      '【氏名】\n' +
      name + '\n' + 
      '\n' +
      '【メールアドレス】\n' +
      email + '\n' + 
      '\n' +
      '【電話番号】\n' +
      tell + '\n' + 
      '\n' +
      '【お問い合わせ内容】\n' +
      message+'\n'+'\n'
      + '\n※このメールはGoogleフォームからの自動送信メールです。';
    }
  }
  
  // メール送信
  MailApp.sendEmail({
    to: email,
    subject: subject,
    body: body
  });
}

　記述不要なフォーム項目に関して条件分岐させて、値がある場合はその結果を出力するといったことをしている。変数を賢く使えば短くなるが、面倒くさいため実行していない。

　その後コードを保存して関数が onFormSubmit になっていることを確認する。
　

　左のトリガーを選択

　トリガーを追加から追加する。イベントの種類を選択をフォーム送信時に変更し保存する。

　保存の際にこのようなポップアップが出るが、左下詳細をクリックし安全ではないサイトに進み、要求されたアプリケーションを承認する。

　以上でメールの自動返信機能の搭載は完了だ。

まとめ

　大分長くなったが以上で「googleフォームを利用した静的サイトでのメール自動送信機能付きフォーム」の作製が完了した。ポートフォリオ等のフォームを搭載したいときに役立てて欲しい。

参考文献

• Googleフォームを利用した静的サイトでのフォーム　https://qiita.com/samuraibrass/items/d6afda6bd8f3306cee4f
• reCAPTCHA　https://www.webdesignleaves.com/pr/plugins/google_recaptcha.php
• メール自動返信機能　https://valmore.work/auto-response-from-google-form/