マサオカ(@iMassa07)です。
本日は「WordPressブログのお問い合わせをChatWorkで通知する方法」を紹介します。


DM感覚でサクサクチェックできて楽ちん!

この方法はいいことがたくさん。
①メールが届かないエラーから解放されて②サイトが少し速くなり③スマホアプリから気軽に問い合わせチェックできるようになります。
問い合わせ内容はデータベースに保管されるので、④バックアップも万全です。
それでは紹介します。
- メールが届かないエラーがなくなる
- サイト速度が低下しない
- DM感覚で問い合わせチェックできる
- 一覧バックアップが取れる
この記事のもくじ
問い合わせフォームのダメなところ

あなたは「お問い合わせフォーム」何を使っていますか?
WordPressは「フォームを送る機能」がないので、フォーム用のプラグインを使う人が多いですね。
「Contact Form 7」とか「Jetpack Contact Form」「MW WP Form」が有名です。

私はプラグインを使わずに「Googleフォーム」でお問い合わせを収集しています。
フォームプラグインの特徴
プラグインのメリット
- 導入事例がたくさん
- インストールするだけで使える
プラグインのデメリット
- たまにメールが届かないエラー
- プラグインが増える
問い合わせフォームプラグインを使うメリットは2つ、「導入事例がたくさんある」「インストールするだけでかんたんに設置できる」です。
「プラグイン名 使い方」でググれば使い方がすぐ出るし、トラブルシュート事例もたくさん出てきます。

私も最近まで使ってました。紹介した三つのプラグインも経験済みです。
ただ、どのプラグインも長く使うと「メールが届かなくなるエラー」が起こりました。
JetPackは一番キツくて、有効化できなくなり問い合わせが閉じていたサイトもあります。
大量のサイトを管理していると、こんな細かなエラーチェックをする時間がもったいない。そこで使ったのがGoogleが提供するアンケート収集サービス「Googleフォーム」でした。
Googleフォームの特徴
Googleフォームのメリット
- どんなWordPressでもデータ収集できる
- プラグインを使わなくていい
Googleフォームのデメリット
- お問い合わせの確認が面倒
Googleフォームを使う理由は2つ。「アプデやテーマ相性に関わらずフォーム収集できる」「プラグインを減らすことが、サイトの速度に影響を与える」からです。
GoogleフォームはGoogleスプレッドシートに直接問い合わせデータを収集するので、WordPressの状態は関係ありません。

WPアップデートのたびにプラグイン動作をチェックしなくて大丈夫!
ただ、Googleフォームで問い合わせ内容を確認するのがめんどくさいんです。
問い合わせチェックのフロー

メールには、問い合わせ内容が表示されていません。

この時点でも、問い合わせ内容の確認ができません。



めんどくさい。毎回やるのが本当にめんどくさい。
プラグインとGoogleフォームのいいとこを取り入れる
- プラグインを使うとエラーで問い合わせ収集できないことがある
- Googleフォームを使うとメールチェックがめんどくさい
この2つのめんどくさい問題を解消するのが今回の方法です。ChatWorkのタスク管理機能が使えるので、返信管理にも便利。
- サイト側のエラーチェックしなくてOK
- プラグインが一つ減る
- ChatWorkで内容を通知
- データはGoogleスプレッドシートに保管
お問い合わせをChatWorkで通知する方法

- ChatWorkのサブアカウントを作成
- 「グループチャット」にメインとサブアカウントを追加
- お問い合わせ用のGoogleフォームを作成
- フォームが追加されたらGASでChatWorkに通知

パソコンでやってね!
ChatWorkの通知用アカウントを準備
通知用のChatWorkアカウントを作成してください。
通知用アカウントでログインしたまま、ChatWork API トークンを取得します。

ChatWork API トークンhttps://www.chatwork.com/service/packages/chatwork/subpackages/api/token.php
ChatWorkにログインして、メインアカウントと通知用アカウントを含めたグループチャットを作成します。

グループチャット名は「サイト名+お問い合わせ通知」などにしましょう。

設定から「グループチャット」の設定をクリックして開きます。

画面下部にある、9桁のルームIDをコピーしてください。

あとで使います。
メインアカウントを使ってChatWork連携するとポップアップ通知できません。サブアカウントを使いましょう。

Googleフォームを作成する
お問い合わせ用のGoogleフォームを作成します。


お問い合わせに設定したのは、この5つの項目です。
- お名前(必須)
- メールアドレス(必須)
- ウェブサイト
- お問い合わせ内容(必須)
- ロボット検証(必須)
フォームは、メールアドレスやURLなど入力ルールも設定できます。

お問い合わせフォームの回答タブをクリックして、新しいスプレッドシートを作成して下さい。


問い合わせフォーム用のスプレッドシートが作成できました。

このスプレッドシートにお問い合わせ内容が保存されます。
GoogleフォームとChatWorkを連携する
Googleスプレッドシートを開き、ツールから「スクリプトエディタ」をクリックします。

エディタが開いたら、リソースから「ライブラリ」をクリック。

ライブラリを検索にプロジェクトキーM6TcEyniCs1xb3sdXFF_FhI-MNonZQ_sT
を入力します。
M6TcEyniCs1xb3sdXFF_FhI-MNonZQ_sT

Google Apps Scriptを使って連携します。以下のコードをコピーして、赤枠を編集ください。
function autoReply() {
var sheet = SpreadsheetApp.getActiveSheet();
var row = sheet.getLastRow();
var name = sheet.getRange(row, 2).getValue();
var mail = sheet.getRange(row, 3).getValue();
var site = sheet.getRange(row, 4).getValue();
var contents = sheet.getRange(row, 5).getValue();
//ChatWorkのメッセージを作成
var notify_body
= "[info][title]" + name + "様から問い合わせがありました。[/title]\n"
+ "連絡先:" + mail + "\n"
+ "サイト:" + site + "\n"
+ "問合せ内容:\n" + contents + "\n[/info]";
//ChatWorkに送信
var roomId = "【ChatWorkのグループチャットルームIDを入力】"//ルームID
var client = ChatWorkClient.factory({token: "【ChatWork APIを入力】"});//ChatWorkAPI
client.sendMessage({room_id: roomId, body: notify_body});
}

このコードは、今回作成したスプレッドシートを前提にしています。

スプレッドシートの項目(フォームの質問内容)を追加したい場合は、4行目から7行目を修正して使ってください。
メッセージを送るトリガーを設定します。

イベントの種類を選択を「フォーム送信時」にしてください。

アカウント認証画面に移ります。Googleアカウントで許可を行ってください。この途中で「このアプリは確認されていません」というメッセージが出ますが気にせず進んでください。


トリガーの一覧画面に、作成したトリガーが表示されたら完了です。

問い合わせフォームからメッセージを送信して、ChatWorkで表示されたら完了です。

まとめ:問い合わせフォームはこの形が最適です
無事、Googleフォームから送信されたお問い合わせメッセージを簡単に確認する方法の紹介でした。
気軽にチェックできるので、普段からChatWorkをビジネスで使っている人には最適です。ぜひ使ってみてください。
この方法にたどり着くまでに、JIROさん(@JIRO_biz)とノビタさん(@nobita0926)の使い方を参考にさせていただいてます。
これを使う人は、二人に向かって感謝の正拳突きを忘れないでね。

Googleフォームからメールアドレスに直接メッセージを送るアドオン「Email Notifications for Google Forms」もとても使いやすくておすすめです。現在は、二重チェック体制にしています。
私は Email Notifications for Google Forms というアドオンを使って 内容をGmailに送っています
— ZIMA (@tabikumo) 2020年7月8日
1日20通の制限があるみたいですが、送信者に確認メール出せたりと割といい感じです。
でも Chatworkとかの SNS 連携のほうが使いやすそうですね☺️ https://t.co/haQ6DxuRWZ