フォームで申込があった際にスプレッドシートにデータを記録するには、Googleフォームが簡単です。
ですが、Googleフォームのデザインは特徴的です。オリジナルのフォームを使いたい場合HTML/CSSで作成したフォームとGoogleフォームを連携させる必要があります。
もちろん、これも可能です。ですが、バリデーションを別途組みこむ必要があります。何よりも、フォームの設問内容が変わったときに、HTML/CSSフォームとGoogleフォームの2つの内容を修正しなければいけません。
例えば、ラジオボタンの項目を1つ追加するだけでもこの追加改修が必要になります。
こういった手間を避けるために、フォームで送信後に自動メールを送信し、その内容を取得してスプレッドシートに転記する方法があります。
ここではその方法についてまとめています。
メールの内容を取得してスプレッドシートに転記する流れ
メールの内容を取得してスプレッドシートに転記する処理の流れは以下のようになります。
フォーム送信後に決まったタイトルと内容のメールを送信する
例えば、以下のような申込フォームがあるとします。
フォームが送信された場合に、入力内容を記載したメールを自動送信します。
ここで重要なのは「タイトル」と「内容」と「宛先」です。
ここではタイトル名が 【セミナー申込】で始まるようにしています。また、各入力内容を「・セミナー」「・名前」のようにして識別できるようにしています。
宛先は、GASを実行したときにアクセスできるGmailアドレス(自分のアカウント)にしておきます。
スプレッドシートを作成する
続いて、取得したデータを保存するためのスプレッドシートを作成します。
ここでは「フォーム申込統合」というシートを作成してい以下の列を作成します。
- ID
- 種類
- Gmail ID
- タイムスタンプ
- メールアドレス
- お名前
- フリガナ
- 携帯番号
- 年齢
- 対象セミナー
GASでメールの内容を取得して、スプレッドシートに転記する
GASを使って、メールの内容を取得して、スプレッドシートに転記するプログラムを完成させます。
1時間前までに受信したGmailをチェックして、指定したアドレスから送られてきたメールでかつ、指定したタイトル名(ここでは 【セミナー申込み】)となっているメールを全て取得します。
取得したメールから指定したデータを抜き出して、対象のスプレッドシートに追記します。
以下のコードで、ssidに対象のスプレッドシートのIDを入力します。mailFromAddressは対象のメールの送信元のアドレスを記載します。
function getFromGmail() {
const ssid = ""
const mailHeader = "【セミナー申込み】";
const mailFromAddress = "送信者のアドレス";
const ss = SpreadsheetApp.openById(ssid);
const sheet = ss.getSheetByName("フォーム申込統合");
let titleRow = 8;
let lastRow = sheet.getLastRow();
let startCol = 1;
let gmailIdCol = 3;
let gmailIds = [];
let endCol = sheet.getLastColumn();
//id取得(値なしの場合はエラー処理)
try{
gmailIds = sheet.getRange(titleRow + 1, gmailIdCol, (lastRow - titleRow +1) + 1, 1).getValues().flat();
console.log(gmailIds);
} catch(e){
console.log("エラー:", e);
}
// /////////Gmailでメール取得
const query = `from:${mailFromAddress} newer_than:1h subject:"${mailHeader}"` //1時間前までのメールを検索
const mailThreads = GmailApp.search(query);
let threads = GmailApp.getMessagesForThreads(mailThreads);
// //スレッド毎に処理を実施
threads.forEach( thread =>{
thread.forEach( (message, i) => {
// Gmailのid
let gmailId = message.getId();
//Gmailのidが存在しない場合のみ追加
if( !gmailIds.includes( gmailId ) ){
//id
let id = lastRow - titleRow + i + 1;
console.log("id:", id);
//送信日時
let recivedDate = message.getDate();
let timeStamp = Utilities.formatDate(recivedDate, 'Asia/Tokyo', 'yyyy/MM/dd HH:mm:ss');
// 件名
let subject = message.getSubject();
Logger.log(subject);
////件名がmailHeaderと先頭一致の場合のみ追加処理を実行
if( subject.slice(0, mailHeader.length) == mailHeader ){
// メール内容
let body = message.getPlainBody();
////body(メール本文から)データ取得 ※自由入力欄は改行まで含めて検索
let seminar = body.match(/・セミナー:(.*)/)[0].replace( "・セミナー:", "" );
let fullName = body.match(/・名前:(.*)/)[0].replace( "・名前:", "" );
let furigana = body.match(/・フリガナ:(.*)/)[0].replace( "・フリガナ:", "" );
let email = body.match(/・メールアドレス:(.*)/)[0].replace( "・メールアドレス:", "" );
let phone = body.match(/・電話番号:(.*)/)[0].replace( "・電話番号:", "" );
let age = body.match(/・年代:(.*)/)[0].replace( "・年代:", "" );
let emailInfo = [];
emailInfo.push( id, "Gmail", gmailId, timeStamp, email, fullName, furigana, phone, age, seminar);
lastRow += 1;
//Gmailのデータを貼り付け
sheet.getRange(lastRow,startCol,1,emailInfo.length).setValues([emailInfo]);
}
}
});
});
}
コードを実行すると、対象のメールがあれば中身を取得してスプレッドシートに転記します。
↓ 上記メールを取得してスプレッドシートに転記
送信時にWebhookでGAS(doGet関数)を実行する
ここまでで、送信されたメールから指定した内容のメールを取得してスプレッドシートに転記する処理が完了しました。
あとは、メールが送信されたときに、上記のGASのコードを実行するように設定します。
doGet関数の作成
GASで新しい.gsファイルを作成して、doGet関数を記述します。
function doGet() {
getFromGmail();
}
GASをデプロイする
まずは、GASをデプロイしてWebhook用のURLを取得します。
右上の「デプロイ → 新しいデプロイ」をクリックします。
種類を「ウェブアプリ」、実行するユーザーを「自分」、アクセスできるユーザーを「全員」としてデプロイします。
ウェブアプリのURLが発行されるので記録しておきます。
メール送信時にデプロイしたURLを叩く
最後に、メール送信時にデプロイしたGASのウェブアプリのURLを叩く設定をします。
例えば、WordPressのcontact form7でメールを送信している場合は、functions.phpに以下のコードを記述します。
add_action('wpcf7_mail_sent', 'call_gas_webhook');
function call_gas_webhook($cf7) {
$url = 'https://script.google.com/macros/s/.../exec'; // デプロイしたウェブアプリのURL
wp_remote_get($url, [
'timeout' => 5, // 必要に応じてタイムアウト時間を設定
]);
}
'timeout' => 5
は、PHPのwp_remote_getまたはwp_remote_post関数でリクエストを実行する際に指定できるタイムアウト時間を設定しています。この値は、リクエストがタイムアウトするまでの秒数を指定します。
上記設定では、5秒後に強制終了します。
以上で設定は完了です。
メールを送信すると同時に、指定したウェブアプリのURLがgetメソッドで叩かれ、GASのdoGet関数が作動します。