GASで資料請求フォームを実装——Formspreeから自作への移行

最初はFormspreeを使っていた。

Formspreeはフォームのaction属性に専用URLを設定するだけでメールが届くサービスだ。設定は簡単だ。その施工会社のウェブサイトを最初に作ったとき、とりあえずFormspreeで動かした。

「とりあえず」が積み重なると、いずれ限界が来る。

Formspreeの限界

2つの問題が出た。

1つは、無料プランでは自動返信メールが有料機能だということ。その施工会社では申込者に「資料請求ありがとうございます」という返信と、パートナー向け資料（PDF）のダウンロードリンクを送りたかった。それが有料プランでないとできない。

もう1つは、問い合わせデータをスプレッドシートに記録したかった。後から「先月何件来たか」「どの地域から多いか」を確認するために。Formspreeはメールで通知するだけで、データの蓄積を自分でコントロールできない。

GASに切り替えた。メール送信（GmailApp）・スプレッドシート記録（SpreadsheetApp）・レスポンスのカスタマイズが全て無料でできる。

GASのdoPost実装

function doPost(e) {
  try {
    const params = e.parameter;

    if (params.website && params.website !== '') {
      return ok(); // ハニーポット：スパムとして処理スキップ
    }
    if (!/[ぁ-ん]|[ァ-ン]|[一-龯]/.test(params.name)) {
      return ok(); // 名前に日本語がない：スパムとして処理スキップ
    }
    const phone = (params.phone || '').replace(/[-\s]/g, '');
    if (!/^0\d{9,10}$/.test(phone)) {
      return ok(); // 日本の電話番号でない：スパムとして処理スキップ
    }

    const ss = SpreadsheetApp.openById(SHEET_ID);
    const sheet = ss.getSheetByName('問い合わせ');
    const now = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd HH:mm:ss');
    sheet.appendRow([now, params.name, params.phone, params.email, params.purpose, params.message]);

    sendApplicantMail(params);
    sendAdminMail(params);

    return ok();
  } catch(e) {
    return error(e.toString());
  }
}

スパム対策は後述するが、この構造の中に3段階で入っている。スパムと判定した場合は成功レスポンスを返しながら実際の処理はスキップする。スパムボットに「送信が成功した」と思わせることで再試行を減らす。

自動返信メールの設計変更

最初の実装ではメール本文にPDFのダウンロードリンクを直接書いた。

考え直した。フォームに偽のメールアドレスを入力してPDFを取得するリスクへの対処だ。メールが実際に届いた人だけがPDFを入手できる設計にすることで、資料の配布先が管理できる。

自動返信メールは「資料のダウンロードリンクはメールに記載しております」という文言に変えた。担当者が折り返しで案内する設計だ。「最初に全部自動化する」よりも、問い合わせを一度人間が受け取るフローの方がこのビジネスには合っていた。

タイムゾーンの落とし穴

スプレッドシートに記録した日時が9時間ずれた。

GASのプロジェクトのタイムゾーン設定がUTCになっていたためだ。new Date()の結果をそのまま書き込むとUTC時刻になる。

const now = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd HH:mm:ss');

コードの中で明示的にタイムゾーンを指定する方が、別のプロジェクトに移植したときに同じ問題が起きにくい。プロジェクト設定を変えるより、コードに書く。

問い合わせ目的の選別

「その他のお問い合わせ」が増えてきた。営業メールや商品紹介だ。これらがスプレッドシートに記録されると管理コストが増える。

フォームに「お問い合わせ目的」ラジオボタンを追加した。「パートナー加盟を検討している」と「その他」の2択だ。「その他」を選んだ場合はGASにPOSTせずに、ブラウザ側でお断り画面を表示する。

実装はJavaScript1行だ。フォームのsubmitイベントで目的を確認して、「その他」なら送信を止めてお断り画面を表示する。スプレッドシートには加盟検討者の記録だけが残るようになった。

*次回は「スパム対策：ハニーポット・日本語チェック・電話番号バリデーション」*

*シンプルシステム株式会社代表　伊藤勝彦*