Contact Form 7からの問い合わせをSlackにも通知する！ GASとプラグインで実装【WordPress】

プラグイン「Contact Form 7」をインストールして、WordPressで問い合わせフォームを作ってください。

Contact Form 7でWordPressに問い合わせフォームを実装する手順については割愛します。設置方法から知りたい方は、「5分でお問い合わせフォームが設置できるContact Form 7の使い方」をご覧ください。

WordPressのプラグイン一覧画面の上「新規プラグインを追加」をクリック。

右上の検索ボックスで、「CF7 Google Sheets Connector」を入力します。するとプラグインが表示されるので、「今すぐインストール」ボタンをクリック。

直接ダウンロードする場合はこちらから
→ CF7 Google Sheets Connector

インストールされたら「有効化」ボタンをクリックします。

プラグイン一覧画面に戻るので、CF7 Google Sheets Connectorの「Setting」をクリック。

「Sing in with Google」ボタンをクリックしてください。

Googleアカウントをプラグインに認証する必要があるので、任意のアカウントを選択してください。

この際、選択したGoogleアカウントへのアクセス権限を設定する必要があります。「Googleドライブ」と「スプレッドシート」へチェックを入れ、「続行」をクリックしてください。

ここでチェックを入れ忘れると、次の画面がエラーになります。

するとプラグインの画面に戻ります。最後に、「Save」ボタンをクリックして認証を完了させます。

次に、Contact Form 7から届くメールを蓄積するためのデータベース用スプレッドシートを準備しましょう。

スプレッドシートから、4つの情報を控えてコピーしておく必要があります（のちほどWordPress側に入力）。

それぞれは、以下のように取得できます。

シートIDとタブIDはGoogleスプレッドシートのURLから取得。
「https://docs.google.com/spreadsheets/d/【シートID】/edit#gid=【タブID】」となっています。

スプレッドシートにも、Contact Form 7から値を受け取るための設定が必要です。

まずは、WordPressに戻り、左のサイドバーの「問い合わせ」から、連携したいContact Form 7のフォームの編集画面を開いてください。

フォームのエディターから、各項目の名前（下の画像で赤枠で囲った部分）をコピーします。

これらを、シートの第一行（ヘッダー）に貼り付けてください。

必ずContact Form 7のものと同じ項目名にしておく必要がありますのでコピペしましょう。たとえば、Contact Form 7上では「your-name」という項目なのに対し、シート上で第一行を「名前」などにしてしまうと、データが届きません。

ちなみに、「お名前」や「ふりがな」など日本語もヘッダーとして入れたい場合は、以下のように第二行に入れると良いですよ。

続けてContact Form 7のエディター上で、新しく「Google Sheets」というタブができているので、こちらをクリック。

先ほど作成したスプレッドシートから、4つの情報（シート名・シートID・タブ名・タブID）をコピペし、最後に「保存」ボタンをクリック。

以上でContact Form 7とスプレッドシートの連携が完了です！ Contact Form 7から問い合わせがあった際、その内容がシートの最終行へ追加されていくようになります。

まずSlack上で、「その他」＞「自動化」の順にクリックします。

Appで「Incoming WebHooks」というアプリを検索し、Slackに追加します。

追加したら「設定」をクリック。

ブラウザに移動するので、「Slackに追加」ボタンをクリック。

Incoming WebHookによって、Slackに通知するチャンネルを選択します。今回は問い合わせ内容を転送するので、問い合わせ関連のチャンネルが良いでしょう。

「新しいチャンネルを作成する」で新規作成も可能です。

チャンネルを（新規作成し）選択したら、「Incoming WebHook インテグレーションの追加」をクリックしてください。

以上でチャンネルとIncoming WebHookの連携が完了です。以下赤枠の「Webhook URL」は後ほど必要になります。

次に、Googleスプレッドシートに届いた問い合わせ内容を、Slackにも転送できるよう、GASを組んでいきます。

スクリプトの完成系は以下のとおりです。

// Slack Webhook URL
const SLACK_WEBHOOK_URL = 'ここにSlackからWebhook URLをコピペ';

// 新しい行が追加されたときに呼び出される関数
function sendSlackNotification(e) {
  const sheet = SpreadsheetApp.getActive().getSheetByName('ここにタブ名'); 
  const lastRow = sheet.getLastRow();
  const rowData = sheet.getRange(lastRow, 1, 1, sheet.getLastColumn()).getValues()[0];

  const name = rowData[0];
  const furigana = rowData[1];
  const phone = rowData[2];
  const email = rowData[3];

  const payload = {
    text: `新しい問い合わせが追加されました\n名前: ${name}\nふりがな: ${furigana}\n電話番号: ${phone}\nメールアドレス: ${email}`
  };

  const options = {
    method: 'post',
    contentType: 'application/json',
    payload: JSON.stringify(payload)
  };

  UrlFetchApp.fetch(SLACK_WEBHOOK_URL, options);
}

このスクリプトをGASへ入力してください。

このとき、以下の4つをしっかり確認してください。

ここまでできたら、一度テスト送信してみましょう。

まず、スプレッドシートで、Slackに通知するテスト用の行を最終行に手打ちで追加します。

その後、GAS上で「実行」をクリックしてください。

このとき、承認作業が求められる場合は、「権限を確認」をクリック。

Googleアカウントでログインして承認を済ませてください。

このとき、「このアプリはGoogleで確認されていません」というポップアップが表示される場合は、左下「詳細」＞「⚪︎⚪︎⚪︎（安全ではないページ）に移動」をクリックして、「許可」をクリックすると先に進めます。

スクリプトを実行し、エラーがなければ実行ログに「実行完了」と表示されます。

Slack側に正しく届いているか確認してみましょう。

Incoming Webhookより通知が届いているのが確認できます！

Slackに届く文章の文面を変えたい場合は、GASスクリプトのconst payloadの中のtextを編集してくださいね。

最後に、スプレッドシートにデータが届いたら、その変更を検知して関数が実行される（Slackに通知される）ようにトリガー設定しましょう。

まず、GASの左のサイドバーから「トリガー（時計マーク）」をクリックします。

右下の「トリガーを追加」ボタンをクリック。

実行する関数名（先のコードをコピペしたならsendSlackNotification）を設定し、「イベントの種類」は「変更時」にして、最後に「保存」をクリックします。

このトリガーにより、「シート最終行に追加されたとき」→「sendSlackNotification関数を実行」→「Slackに通知される」という自動化ができます。

以上で、SlackとContact Form 7の連携システムが完成しました！