SANGOの公認 子テーマができました!

ブログの問い合わせ(Googleフォーム)に届いたメッセージをChatWorkに連携する方法

マサオカ(@iMassa07)です。

本日は「WordPressブログのお問い合わせをChatWorkで通知する方法」を紹介します。

GoogleフォームChatWork
https://blog.oldno07.com/wp-content/uploads/2020/07/masaoka_e.jpgマサオカ

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

GoogleフォームChatWork

この方法はいいことがたくさん。

メールが届かないエラーから解放されて②サイトが少し速くなりスマホアプリから気軽に問い合わせチェックできるようになります。

問い合わせ内容はデータベースに保管されるので、④バックアップも万全です。

それでは紹介します。

メリット
  1. メールが届かないエラーがなくなる
  2. サイト速度が低下しない
  3. DM感覚で問い合わせチェックできる
  4. 一覧バックアップが取れる

問い合わせフォームのダメなところ

ヨメ
ヨメ

あなたは「お問い合わせフォーム」何を使っていますか?

WordPressは「フォームを送る機能」がないので、フォーム用のプラグインを使う人が多いですね。

Contact Form 7」とか「Jetpack Contact Form」「MW WP Form」が有名です。

https://blog.oldno07.com/wp-content/uploads/2020/07/masaoka_e.jpgマサオカ

私はプラグインを使わずに「Googleフォーム」でお問い合わせを収集しています。

フォームプラグインの特徴

プラグインのメリット

  • 導入事例がたくさん
  • インストールするだけで使える

プラグインのデメリット

  • たまにメールが届かないエラー
  • プラグインが増える

問い合わせフォームプラグインを使うメリットは2つ、「導入事例がたくさんある」「インストールするだけでかんたんに設置できる」です。

「プラグイン名 使い方」でググれば使い方がすぐ出るし、トラブルシュート事例もたくさん出てきます。

https://blog.oldno07.com/wp-content/uploads/2019/07/masaoka_a.jpgマサオカ

私も最近まで使ってました。紹介した三つのプラグインも経験済みです。

ただ、どのプラグインも長く使うと「メールが届かなくなるエラー」が起こりました。

JetPackは一番キツくて、有効化できなくなり問い合わせが閉じていたサイトもあります。

大量のサイトを管理していると、こんな細かなエラーチェックをする時間がもったいない。そこで使ったのがGoogleが提供するアンケート収集サービス「Googleフォーム」でした。

Googleフォームの特徴

Googleフォームのメリット

  • どんなWordPressでもデータ収集できる
  • プラグインを使わなくていい

Googleフォームのデメリット

  • お問い合わせの確認が面倒

Googleフォームを使う理由は2つ。「アプデやテーマ相性に関わらずフォーム収集できる」「プラグインを減らすことが、サイトの速度に影響を与える」からです。

GoogleフォームはGoogleスプレッドシートに直接問い合わせデータを収集するので、WordPressの状態は関係ありません。

https://blog.oldno07.com/wp-content/uploads/2020/07/masaoka_e.jpgマサオカ

WPアップデートのたびにプラグイン動作をチェックしなくて大丈夫!

ただ、Googleフォームで問い合わせ内容を確認するのがめんどくさいんです。

問い合わせチェックのフロー

Gmailに「フォーム「〇〇」に新しい回答があります」とメッセージが届く

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

スプレッドシートのリンクをクリック

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

個別タブをクリック

最終ページまで移動する
https://blog.oldno07.com/wp-content/uploads/2020/07/masaoka_f.jpgマサオカ

めんどくさい。毎回やるのが本当にめんどくさい。

プラグインとGoogleフォームのいいとこを取り入れる

  • プラグインを使うとエラーで問い合わせ収集できないことがある
  • Googleフォームを使うとメールチェックがめんどくさい

この2つのめんどくさい問題を解消するのが今回の方法です。ChatWorkのタスク管理機能が使えるので、返信管理にも便利。

メリット
  • サイト側のエラーチェックしなくてOK
  • プラグインが一つ減る
  • ChatWorkで内容を通知
  • データはGoogleスプレッドシートに保管

お問い合わせをChatWorkで通知する方法

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

パソコンでやってね!

ChatWorkの通知用アカウントを準備

通知用ChatWorkサブアカウントを作成

通知用のChatWorkアカウントを作成してください。

ChatWork API トークンを取得

通知用アカウントでログインしたまま、ChatWork API トークンを取得します。

ChatWork API トークンhttps://www.chatwork.com/service/packages/chatwork/subpackages/api/token.php

グループチャットを作成

ChatWorkにログインして、メインアカウントと通知用アカウントを含めたグループチャットを作成します。

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

グループチャットIDを確認

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

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

あとで使います。

サブ垢を使う理由

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

Googleフォームを作成する

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

Googleフォームを新規作成

フォームの項目を入力

お問い合わせに設定したのは、この5つの項目です。

  • お名前(必須)
  • メールアドレス(必須)
  • ウェブサイト
  • お問い合わせ内容(必須)
  • ロボット検証(必須)

フォームは、メールアドレスやURLなど入力ルールも設定できます。

参考フォームのルールを設定する|Googleドキュメントヘルプ

回答からスプレッドシートを作成

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

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

このスプレッドシートにお問い合わせ内容が保存されます。

GoogleフォームとChatWorkを連携する

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});
}

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

A〜Fの列を指定しています

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

通知のタイミングを設定

メッセージを送るトリガーを設定します。

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

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

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

完成

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

まとめ:問い合わせフォームはこの形が最適です

無事、Googleフォームから送信されたお問い合わせメッセージを簡単に確認する方法の紹介でした。

気軽にチェックできるので、普段からChatWorkをビジネスで使っている人には最適です。ぜひ使ってみてください。

最後に・・・

この方法にたどり着くまでに、JIROさん(@JIRO_biz)とノビタさん(@nobita0926)の使い方を参考にさせていただいてます。

‪これを使う人は、二人に向かって感謝の正拳突きを忘れないでね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です