2018-11-27T07:26:26Z

GoogleAppsScriptでお問い合わせフォームを作成する

GoogleAppsScriptでお問い合わせフォームを作成する。

概要

  • GoogleAppsScriptを使用して、自由な外観のお問い合わせフォームを作成する
  • サーバレスでお問い合わせフォームを作成する
  • お問い合わせフォームにはJavaScriptが不要
    • ただし、GoogleAppsScriptの応答時にJavaScriptを使用する
    • そのため、JavaScript無効時は、GoogleAppsScriptデフォルトの応答画面となる

動作概要

  1. ユーザがWebページ上のお問い合わせフォームに入力する
  2. ユーザがお問い合わせフォームで送信ボタンを押下する
  3. お問い合わせフォームがGoogleAppsScriptにアクセスする
  4. GoogleAppsScriptが指定メールアドレスにお問い合わせフォーム内容送信する
  5. GoogleAppsScriptが指定送信完了画面をユーザに出力する
  6. 終わり

補足

  • メール送信先は、GoogleAppsScriptを動作するGoogleアカウントと同一だと受信トレイ表示しないため、注意
  • メール送信の制約
  • 自由な外観のお問い合わせフォームが必要ない場合
    • Googleフォームでお問い合わせフォームが作成できる
  • 拡張案
    • メール送信をスプレットシートへの書き込みなどに変更するのも実用的かも
    • reCAPTCHAを設定すればスパム対策もできるかも

完成品

お問い合わせ
お問い合わせ

GoogleAppsScriptの作成

var param = {};

function doPost(e) {
  param.name = e.parameter.name;
  param.email = e.parameter.email;
  param.message = e.parameter.message;
  param.noscript = e.parameter.noscript;

  var message = ''
  + 'お名前:' + param.name + '\n'
  + 'メールアドレス:' + param.email + '\n'
  + 'お問い合わせ内容:\n'
  + param.message;
  Logger.log(message);

  MailApp.sendEmail('email@example.com', '【ブログ】問い合わせフォーム', message);
  if (param.noscript == 'true') {
    return;
  } else {
    return HtmlService.createTemplateFromFile("complete").evaluate();
  }
}

※「email@example.com」を書き換える
※「【ブログ】問い合わせフォーム」を好みのメールタイトルに書き換える

<!DOCTYPE html>
<html lang="ja">
<head>
 <title>お問い合わせ送信完了</title>
</head>
<body>
  <h1>お問い合わせ送信完了</h1>
  <p>お問い合わせは、以下の内容で送信されました。</p>
  <hr/>
  <p>お名前:<?= param.name ?></p>
  <p>メールアドレス:<?= param.email ?></p>
  <p>お問い合わせ内容:<br/><?= param.message ?></p>
</body>
</html>

ウェブアプリケーションとして導入

[公開] > [ウェブアプリケーションとして導入]でウェブアプリケーションのURLを取得する。

  • 次のユーザーとしてアプリケーションを実行:自分
  • アプリケーションにアクセスできるユーザー:全員(匿名ユーザを含む)

※ソースを変更毎にプロジェクトバージョンの更新が必要となります。

ウェブアプリケーションのURL

フォームサンプル

<form name='contact-form' action="ウェブ アプリケーションの URL" method="post">
  <div>お名前</div>
  <input class='contact-form-name' name='name' size='30' type='text' value='' placeholder='匿名'/>
  <div>メールアドレス </div>
  <input class='contact-form-email' name='email' size='30' type='text' value='' placeholder='email@example.com'/>
  <div>お問い合わせ内容 </div>
  <textarea class='contact-form-message' name='message' rows='10' placeholder='本文'></textarea>
  <p></p>
  <input class='contact-form-button-submit' type='submit' value='送信'/>
  <noscript><input type='hidden' name='noscript' type='text' value='true'/></noscript>
</form>

※「ウェブ アプリケーションの URL」を書き換える

 コメントを書く