Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

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

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

Googleフォーム作製

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

 必須の項目に関しては設定すべきである。また「回答の検証」機能を用いて 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>

image.png

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

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

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

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

 そのタグの属性名action の属性値(URL)をコピー、記述する。
hogehoge.png

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

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

 そのタグの属性名name の属性値(entry.数値)をコピー、記述する。
hoge2.png

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

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

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 を利用して機械によるフォームの送信を防ぐ。
 要らない場合は読み飛ばして問題ない。
image.png

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

 適当にラベル名を決め、reCAPTCHA V2のチェックボックスを選択し、掲載する予定のドメインを登録する(一応検証用にローカルホストも登録しておく)
image.png
 gmailを入力し、同意して送信。
hogggge.png
 するとサイトキーが表示されるため、上のキーのみをコピーする。
kldjfs.png

 もとの 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フォーム回答画面右上のスプレッドシートからスプレッドシートを新規作成する。
image.png
 スプレッドシートのツールからスクリプトエディタを選択する。
image.png
 この際「ページが見つかりません」という表示が出る人がいると思う。その場合は現在ログインしているすべての Googleアカウントからログアウトして、このフォーム作成に利用したGoogleアカウントのみログインするとこの先の操作が可能になる。
image.png

 その後のスクリプトエディタ、コード.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 になっていることを確認する。
 image.png

 左のトリガーを選択
image.png

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

image.png

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

image.png

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

まとめ

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

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?