Google フォームをブログに埋め込み、自動返信メールを送る（完成版）

はてなブログなど Javascript を使えるブログに Google フォームをブログデザインのまま埋め込み、Google Apps Script（GAS）を使って自動返信メールや管理者への通知メールを送る方法の完成版です。

• Google フォームと同じ構成で自前のフォームを作る
• Javascript で送信完了ページへの遷移を止める
• GAS で自動返信メールと管理者あて通知メールを送る
• お問い合わせ等

01Google フォームと同じ構成で自前のフォームを作る

まず、Google フォームで希望のフォームを作成し、フォームデータの送信先 action 属性と各要素の name 属性を取り出します。続いて、同じ構成のフォームをブログに作成します。はてなブログの場合は固定ページを inquiry などの URL で作成します。form タグの action 属性、各要素の name 属性には、取り出しておいた Googleフォームの属性を入力します。

メールアドレスは、「メールアドレスを収集する」を使用せず、通常の input 要素で作成したほうがわかりやすいです。こちらを参照してください。

www.imuza.com

次の項目を読んだ上で、上記記事を参考にしてください。

02Javascript で送信完了ページへの遷移を止める

Google フォームは自前のフォームで送信した場合でも Google フォームの送信完了ページを返してきますので、そのページをダミーの iframe で受け、非表示にします。

www.imuza.com

上記記事の「前記事のコードを書き換える」のように HTML と Javascript を書いてください。

03GAS で自動返信メールと管理者あて通知メールを送る

www.imuza.com

上記記事を参考にして、Google フォームからスクリプトエディタを立ち上げ、次のコードを入力し、トリガーを設定してください。

function submitForm(e){
  var itemResponses = e.response.getItemResponses();
  for (var i = 0; i < itemResponses.length; i++) {
    var question = itemResponses[i].getItem().getTitle();
    var answer = itemResponses[i].getResponse();
    if (question == 'お名前') var userName = answer;
    if (question == 'メールアドレス') var userMail = answer;
    if (question == 'お問い合わせ内容') var userMessage = answer;


    // 作成した要素に応じて追加する


  }
  
  // 自動返信メール（件名、本文は自由に）
  var subject = 'お問い合わせ内容確認';
  var body = userName + '様\n\n'
    + 'お問い合わせありがとうございました。\n'
    + 'このメールは自動返信メールです。\n'
    + '後ほど ' + userMail + ' あてにご連絡いたします。\n\n'
    + '-- お問い合わせ内容 ------------------------------------\n\n'
    + userMessage + '\n\n'
    + '----------------------------------------------------------------\n\n'
    + '--\n'
    + 'サイト名など自由に\n';
  GmailApp.sendEmail(userMail, subject, body, {name: 'メールの送信元名'});


  // 通知メール（件名、本文は自由に）
  subject = 'お問い合わせがありました';
  body = userName + '様からのお問い合わせです。\n'
    + userMail + ' あてに返信してください。\n\n'
    + '-- お問い合わせ内容 ------------------------------------\n\n'
    + userMessage + '\n\n'
    + '----------------------------------------------------------------\n\n'
    + '--\n'
    + 'サイト名など\n\n';
  GmailApp.sendEmail('自分の Gmail アドレス', subject, body);
}

完了です。後はフォームを CSS でデザインすれば、Google フォームが完全に自分のブログ内のフォームとして機能します。

04お問い合わせ等

当記事内のスクリプト等によるいかなる損害についても責任を負いかねますので自己責任でご使用ください。

お問い合わせ、バグの報告、仕様変更のご要望等は Contact Us までお願いします。