WordPressのフォームの送信内容を、メールとGoogleスプレッドシートに同時に残す仕組み

ホームページ制作のイメージ(ノートパソコン)

求人サイトに出す原稿を作るには、仕事の内容、勤務時間、給与、休日、応募の条件など、たくさんの情報が必要です。人材のお手伝いをしているお客様から、こんなご相談をいただきました。

「求人の内容を、それぞれの会社の担当者に入力してもらい、一覧で管理したい。今はメールや電話で聞き取って、こちらでExcelに書き写しているが、聞き漏れや転記の間違いが多い」

そこで、WordPressに専用の入力フォームを作り、送信された内容がメールで届くと同時に、Googleスプレッドシートにも1件1行で自動で追加される仕組みを作りました。この記事では、その全体像と、作ってみて分かったポイントをまとめます。

目次

全体の流れ

  • 担当者が、WordPressのフォームのページを開いて入力する(ページにはパスワードを掛けて、関係者だけが開けるようにする)
  • 送信すると、WordPressの管理画面に1件の記録として保存される
  • 同時に、受け付けたことをメールで知らせる
  • さらに、Googleスプレッドシートの「求人依頼」のシートに1行追加される
  • 受け付けた側は、スプレッドシートを一覧として使い、「対応状況」の列で進み具合を管理する

残す場所を3つに分けたのは、どれか1つが止まっても、内容がなくならないようにするためです。メールは「届いたことにすぐ気づく」ため、スプレッドシートは「一覧で見る・並べ替える」ため、WordPressの記録は「万一のときの元帳」として使っています。

求人情報の入力フォーム
11のまとまりに分けた入力フォーム。一時保存やテンプレートのボタンを上に置いた(会社名の選択肢はぼかしています)

1. 入力しやすいフォームにする

一般的なお問い合わせフォームのプラグインでも作れますが、項目が80近くあり、途中で調べものが必要な項目も多いため、専用のフォームを作りました。工夫したのは次の点です。

  • 項目をまとまりごとに区切る:「募集の概要」「仕事内容」「給与」「勤務時間・休日」「勤務地」など11のまとまりに分け、今どこを入力しているかが分かるようにする
  • 途中で一時保存できる:入力の途中で閉じても、同じパソコンで開き直せば続きから入力できる
  • テンプレートとして保存できる:毎回ほとんど同じ内容の求人は、前回の内容を呼び出して、違うところだけ直せばよい
  • 必ず入れてほしい項目は送信前に知らせる:送ってから「あの項目が抜けている」と聞き直す手間をなくす
  • 法律で求人に書く必要がある項目を入れておく:仕事内容や働く場所の「変更の範囲」、受動喫煙を防ぐための取り組みなど

一時保存とテンプレートは、担当者のパソコンのブラウザの中に保存しています。担当者がいつも同じパソコンで入力するという前提があったので、この方法を選びました。念のため、保存した内容をファイルに書き出してバックアップできるようにもしています。

2. 送信内容をメールとWordPressに残す

送信されると、WordPressの管理画面に専用の「求人依頼」という一覧ができ、1件ずつ記録が残ります。ここには受付番号と受付日時が付き、あとから内容を見返せます。同時に、受け付けたことを知らせるメールが届きます。

お客様の求人の情報は外に出すものではないので、この一覧は管理画面の中だけで見られるようにし、ホームページの検索結果にも出ないようにしています。

3. Googleスプレッドシートに1行追加する

スプレッドシートへの書き込みには、GoogleのApps Script(アップス・スクリプト)を使いました。スプレッドシートに付いている小さなプログラムで、「ウェブアプリ」として公開すると、外からデータを受け取れる窓口になります。WordPressは、送信を受け付けるたびに、この窓口へ内容を送ります。

Apps Script側は、受け取った内容を見出しに合わせて並べ、シートの最後に1行足すだけです。

function doPost(e) {
  const data = JSON.parse(e.postData.contents);
  if (data.secret !== SECRET) return json_({ ok: false });   // 合言葉が違えば書き込まない

  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('求人依頼');
  const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
  const line = headers.map(label => {
    const item = data.rows.find(r => r.label === label);
    return item ? item.value : '';
  });
  sheet.appendRow(line);
  return json_({ ok: true });
}

ポイントは3つです。

  • 合言葉を決めておく:窓口のURLを知っている人なら誰でも送れてしまうので、WordPressとApps Scriptで同じ合言葉を持ち、一致したときだけ書き込む
  • 見出しの名前で列を合わせる:フォームの項目が増えても、新しい見出しを右端に足すだけで済むようにする
  • 書き込む欄を「文字」として扱う:電話番号の先頭の0が消えたり、入力された文字が計算式として動いたりするのを防ぐ
スプレッドシートの求人依頼シート
送信のたびに1件1行で追加される一覧(中身はぼかしています)

つまずいたところ

  • 「スプレッドシートに反映されない」と言われた:調べてみると、書き込み先は「求人依頼」のシートで、ご覧になっていたのは最初からある「シート1」でした。書き込みは最初から正しく行われていました。シートが複数あるときは、どこに書き込まれるかを最初に伝えておくことが大切です。
  • 送信は成功するのに、書き込まれない:Apps Scriptの窓口は、受け取ったあとに別のURLへ転送する作りになっています。WordPress側の送り方によっては、転送先でうまく受け付けられないことがありました(別の記事で詳しく書きます)。
  • テストで送った日本語が文字化けした:パソコンの画面から試しに送ったデータが文字化けして、スプレッドシートに変な行が入りました。WordPressの設定画面に「接続テスト」のボタンを付け、テストはそこから送るようにしています。

仕組みを作るときは、うまくいったときだけでなく、「届かなかったときにどう気づくか」「あとから送り直せるか」も一緒に考えておくと安心です。この仕組みでは、WordPressの記録から1件ずつスプレッドシートへ送り直せるボタンも付けています。

同じような仕組みは、いろいろな場面で使えます

求人に限らず、「お客様や取引先に入力してもらった内容を、一覧で管理したい」という場面は多いと思います。見積りや資料請求の受付、イベントの申し込み、社内の申請など、メールで受けてから手で書き写している作業があれば、この形で減らせます。

ワイズ企画では、ホームページの制作や業務の自動化のなかで、こうしたフォームと一覧の仕組みづくりをお手伝いしています。お気軽にご相談ください。

ホームページ制作・多言語化について / AI活用支援について / お問い合わせ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ワイズ企画代表。インドネシアで15年以上の国際ビジネス経験。愛知県豊橋市を拠点に、中小企業のAI活用・ホームページ制作・業務の自動化を支援しています。このブログでは、日々の仕事で実際に使ったAIとWordPressのやり方を記録しています。

目次