CHENK!!
BCMからのお知らせ

WPのお問い合わせ内容をスプレットシートで管理→更新されたらSlackに通知する方法

 

WordPressのページにお問い合わせの項目を作っていますか?

  

お問い合わせの項目を作った方が訪問者の疑問などに答えられるだけでなく、新しいページのアイデアやテーマに気づかせてくれるかもしれません。

  

お問い合わせの項目を作り、Googleのスプレッドシートに一覧にまとめることはWordPressのプラグインを活用すれば、とっても簡単にできますので、ぜひ設定してみてください!

  

  

そして、スプレッドシートにお問い合わせが更新されたら、Slackに通知が飛ぶように設定してみます。

  

お問い合わせはすぐに気がつくことが大切です!

すぐに設定できますので、一度に設定してしまいましょう!

  

  



スポンサードリンク

1.WordPressにお問い合わせの項目を追加する

  

今回は、WordPressにお問い合わせ項目を追加するために、『CF7 Google Sheets Connector』をプラグインします。

  

このプラグは作成者が日本人であることに加え、とっても簡単に、コードをいじる必要もなくお問い合わせフォームが作れてしまうのでオススメです!

  

数あるプラグの中でも常に人気ランキングの上位に君臨しています。

 

WordPressとスプレッドシートの連携は全部で6行程です。

  

①お問い合わせ内容を一覧で表示するスプレッドシートの作成

②スプレッドシートにお問い合わせを書き込む表の作成

③『CF7 Google Sheets Connector』をプラグイン

④コンタクトフォームの編集

⑤「Google Sheets」の設定

⑥CF7 Google Sheets Connectorとスプレッドシートを連携

  

  

それではさっそくプラグインの準備をしていきましょう!

  

*なお、『CF7 Google Sheets Connector』をプラグインするにあたり、【簡単】Contact Form 7とGoogle Spreadsheetを自動連携する方法を参考させていただいております。

  

 

1-1.お問い合わせ内容を一覧で表示するスプレッドシートの作成

  

まずは、お問い合わせが来た時に表示するためのスプレッドシートを作成していきましょう。

  

  

先のサイトにあわせて、

  

・シート名:contact

・タブ名:sheet

  

とさせていただきました。

今後、この名前で説明しますので、これらの名前を合わせた方が便利です。

  

  

1-2.スプレッドシートにお問い合わせを書き込む表を作成する

 

  

お問い合わせ項目、『CF7 Google Sheets Connector』を使う上でこれらの情報は必要であろうと思うものを表にまとめます。

  

『CF7 Google Sheets Connector』の設定画面でデフォルトで用意されている項目が大半です。自分の必要な情報だけまとめられるように項目を作るのもアリです!!

  

注意!:今回はコピペして使えるコードが画像の通りになっているので、コードの入力が得意でない方は、記事と同じように項目を記入してください

  

↓をコピペしてお使いください。

  

・data …お問い合わせが来た日にち

・time …お問い合わせが来た時間

・user-agent …お問い合わせの端末情報

・your-name …名前

・your-email …メールアドレス

・your-message …お問い合わせメッセージ

  

注意!:必ず1行目に項目を書くようにしてください!!

私はこれが原因でコードが走らなくなりました!

 

  

1-3.『CF7 Google Sheets Connector』をプラグインする

 

  

スプレッドシートとCF7 Google Sheets Connectorを連携させるにはまず、プラグインの画面で『CF7 Google Sheets Connector』を有効にします。

  

  

ちなみに…

プラグインは管理者のみが使える機能です。プラグインをしたい場合は、管理者にお願いしましょう。

  

1-4. コンタクトフォームの編集

 


  

左から「お問い合わせ」の項目を選び、「新規追加」を選択。

*プラグインした初期の画面とは多少異なります。

  

  

①お問い合わせフォームの題名をつけましょう

②このショートコードをコピーし、記事に貼り付けるだけで簡単にお問い合わせフォームができます。

 


↑このようにwordPress内の固定ページにコピペしました。

 
 

  

フォームのデフォルトはこのようになっています。*WordPressに挿入したときの完成図

  

上部タグ「フォーム」、「メール」、「メッセージ」、「その他の設定」は自分の必要なものに応じて変更してください。

    
    

*おしゃれなフォームのCSSのお手本が掲載されていました→【WordPress】Contact Form 7を見やすく表示するCSS【コピペ用】

  

1-5. 「Google Sheets」の設定

 

  

スプレッドシートと「CF7 Google Sheets Connector」を繋ぐためにGoogle Sheetsの設定をします。

    

上の通り、

  

Google Sheet Name …contact 

Google Sheet Tab Name …sheet

  

と書き込みます。

  

1-6.CF7 Google Sheets Connectorと スプレッドシートを連携

 


  

左側のGoogle Sheetsのタブから「Get Code」を選択します。

  

  

内容を読み、「許可」を選択します。

  

コードが出てくるので、コピーしておいてください。

    

  

コピーしたコードを先ほどの「Google Sheets」の「Google Access Code」に貼り付け、「Save」を押します。

  

  

これで、お問い合わせメッセージがスプレッドシートに表示されるようになりました!

  

   

  

  

2.お問い合わせメッセージが届いたことをSlackに通知する

  

お問い合わせメッセージが届いたらすぐに対応する…ということはサイト訪問者に大きな信頼を与えます。

 

そこで、お問い合わせメッセージが届いたらSlackに通知が行くように設定し、さらなるサイトの質の向上を目指しましょう!

  

コピペしたら使えるようになっているので、プログラミング未経験者でも全く問題ありません!

  

こちらは全部で3工程です!

 

①『Incoming WebHooks』をSlackと連携する
②コードをコピペ
③トリガーを設定

  

さっそく設定していきましょう!

  

*なお、GoogleSpreadSheetの内容をSlackで自動投稿するを参考にさせてもらいました。

  

2-1. 『Incoming WebHooks』をSlackと連携する

 

  

Incoming WebHooksは、プログラミングの知識なしでbotが作れてしまう優れものです!

  

とっても簡単に設定できるので、一度試してみては…?

  
  
  

まずは、Slackにログインしている状態で、下のURLをクリック。

https://my.slack.com/services/new/incoming-webhook/

 

  

お問い合わせが届いたことを通知したいグループを選択します。

*まずはテストを行うために、新しいチャンネルを作成したほうがいいかもしれません。

  

その後、「着信Webフック インテグレーションの追加」を押します。

  

  

一番上に書いてあるWebhookのURLをコピーしておきましょう。

  

 

  

設定するのは3項目です。

  

①先ほど設定したチャンネルになっているか確認してください。

②「お問い合わせbot」などわかりやすい名前に変更しましょう

③アップロードが面倒であればアイコンを絵文字のなかから選びましょう

 

ちなみに、これらの内容はいつでも変更可能です!

  

完了しましたら、設定を保存してください。

  

  

チャンネルに「◯◯◯が結び付けられました」と表示されたら完了です。

  

  

2-2. コードをコピペ

 

  

次に、プロジェクトを設定していきます。

  

  

先ほどのスプレッドシートを開き、

「ツール」→「スクリプト エディタ」を選択。

  

  

名前はいい感じに決めてください(笑)

  

  

このように入力します。

 

↓こちらをコピーしてお使いください

 

↓以下変更しなければいけない部分が3箇所あるので変更してください。
(番号はコードの画像に対応しています。)

  

① return 以降 nameやtime、messageなどを組み合わせてSlack通知したい言葉にしてください。
(キーワードを増やすとき… + / 日本語を増やすとき…”***”)
 

②スプレッドシートの上部にあるURLの赤の部分をコピペ↓

(https://docs.google.com/spreadsheets/d/****************/edit#gid=0 )
 

③”2-1.『Incoming WebHooks』をSlackと連携する”でコピペしたWebhookのURLをペースト

 

2-3.トリガーの設定

 

あと一息です!

トリガーを設定します。トリガーとは、コードのなかで何を「引き金」にするのか

を設定することを言います。

 

 

スクリプトエディタの上部にある

「編集」→「すべてのトリガー」を選択

 

 

「postSlack」「スプレッドシートから」「値の変更」→「保存」

 

に設定します。

 

 

この画面に戻り、command+R(画面の再度読み取り)をしてください。

 

これで、設定は完了です。

実際に「お問い合わせフォーム」からきちんと作動するかテストしてみてください。

 

 

注意!:毎回スクリプトを書き換えたら、「現在のプロジェクトのトリガー」を開き、保存する、「画面の再度読み取り」をすることを忘れないでください。

 

まとめ

  

いかがだったでしょうか。

  

今回は、WordPress内にお問い合わせフォームを作り、それをスプレッドシートにまとめて管理、さらに、お問い合わせがきたらSlackに通知する という設定をしてみました。

  

お問い合わせにはすぐに対応することが大切です!
ぜひ、参考にしてみてください。

 

Slack連携でさらに業務効率化へ

iPad無人受付システムRECEPTIONISTは、Slackを介してお客様の来訪を担当者に直接お知らせします。これまでの取次業務がなくなり、無駄な時間をカットすることで仕事にもっと集中できる職場になります。

詳細を見る!

NEW
新着記事