WordPressサイトでの問い合わせをSlackで通知する方法

2019.08.08 WordPress・PHP
WordPressサイトでの問い合わせをSlackで通知する方法

困っている受講生
サイトで入った問い合わせをわざわざメールで確認するの面倒だな…Slackで見れたらいいのに…

と思っていませんか?

実は、WordPressサイトのお問い合わせフォームで入力された内容をslackで受けとるようにする設定は、かなり簡単です。

  • メールでの確認が手間。Slackのほうが手軽にチェックできる
  • チームで問い合わせを確認したいので、Slackだと全員が見られるから楽

などの状況であれば、なおさら早めにslackでの通知を導入しましょう!

通知もリアルタイムなので、問い合わせへの対応が遅れることもありません

藤ミヤチ藤ミヤチ
無料プラグインを入れることで手軽に設定できるよ

WordPressサイトでの問い合わせをslackで受けるためには無料プラグインを使う

WordPressサイトに設置されたフォームからの問い合わせがあることをslackで通知するには、前提条件として「Contact Form 7」でフォームが作成されている必要があります。

contact form 7
藤ミヤチ藤ミヤチ
Contact Form 7は他のプラグイン・webサービスとの連携が得意なプラグインだよ

実際に連携で必要になる追加のプラグインは、下記の2つです。

  • Slack
  • Slack Contact Form 7

Slack

Slack

WordPressで発生した記事公開などのイベントをSlackで通知できるようにするためのプラグインです。

Slack Contact Form 7

Slack Contact Form 7

さきほどのプラグイン「Slack」が、Contact Form 7でのフォーム入力(送信)に対応できるようにするための追加プラグインです。

まとめると、

  • Contact Form 7
  • Slack
  • Slack Contact Form 7

の3つのプラグインがあって、Slackへの自動通知が可能になります。

藤ミヤチ藤ミヤチ
それぞれプラグインをいれたら有効化しよう

WordPressサイトでの問い合わせをslackで受けるための設定

プラグイン3つを入れたら、実際にSlackで通知が送られるように設定をしていきます。

[1] Contact Form 7でフォームを作成する

contact form 7

簡単にメールフォームが作成できるプラグイン「Contact Form 7」でメールフォームを作成します。

Slackで通知するにあたって、フォームの内容に制限はありませんので自由に作成してOKです。

[2] Slackで通知を受け取るチャンネルを決める

slackロゴ

実際にフォームで入力された内容を受け取るためのチャンネルを決めてください。

既存のチャンネルでも、新規に作成したチャンネルでも構いません。

チャンネルをプライベートに設定しても問題なく通知されます。

藤ミヤチ藤ミヤチ
導入後に管理がしやすいチャンネルにしよう

[3] Slack側で、外部サービスと連携するためのSlack Incoming Webhookを設定する

次に、Slack側で外部サービス(=Contact Form 7)と連携するためのSlack Incoming Webhookを設定します。

Slack Incoming Webhookというのは、ざっくり言うと「外部サービスからSlackのチャンネルに投稿できるようにするもの」です。

小難しそうに聞こえるかもしれませんが、設定はすごく簡単です。

以下のページにアクセスします。

Incoming WebHookでの設定
  1. 画面右上に出ているワークスペースが正しいことを確認
  2. 通知を投稿したいチャンネルを設定
  3. 「Incoming Webhook インテグレーションの追加」をクリック

ボタンをクリックすると、Webhook URLが表示されます。

Incoming Webhook URL

表示されたURLをコピーしてください。

指 ここがポイント
ここで表示されたURLがわかると、第三者でもチャンネルに投稿できてしまう。取り扱いは注意

[4] WordPressのプラグイン「Slack」側で設定する

管理画面のメニューに追加されている「Slack」の項目で、「Add New」をクリックします。

プラグインslackの設定

管理画面上の設定名

WordPressで設定を保存しているときの、管理名になります。
Slackなどで表示されるものではないので、いつか設定を変えることになったときに分かりやすい名前であれば何でもOK。

Service URL

Slack Incoming Webhookで入手したURLを貼り付けます。

Username

Slackで投稿されるときの、ユーザー名です。
分かりやすいものを設定しておけばOK。

Icon

Slackで投稿されるときのアイコンを変更したいときに設定します(オプション)。
絵文字カタログにあるアイコンであれば設定が可能です。

アイコンの横にある「:icon-name:」という形式で表示されているテキストを貼り付けます。

Events to Notify

通知する設定を決めます。
「When a post is published」のチェックを外し、「When someone sent message through Contact Form 7」はチェックをつけてください。

Active

Slackに投稿されたときに通知するかどうかの設定です。
通知が必要な場合は「Activate Notifications.」にチェックを入れます。

藤ミヤチ藤ミヤチ
すべて設定したら、右上の青い「Save」をクリック!

これでWordPressサイトのフォームから問い合わせが送信されれば、Slackで通知が送られるようになります。

Slackに通知される

slackでフォームで入力された内容まで見られるようにしたいときの設定

初期設定だと、通知内容は「問い合わせがあったこと」のみとなっています。

Slackに通知される
困っている受講生
問い合わせの内容までわかるようにしたい…!

Slackでフォームの内容までわかるようにしたい場合は、少しだけプラグインのカスタマイズが必要です。

プラグインエディター

WordPressの管理画面で「プラグイン」→「プラグインエディター」をクリックします。

プラグイン編集の警告

場合によっては、警告が表示される事があります。

  • プラグインの内容を下手に変更するとシステムが壊れる可能性がある
  • プラグインの更新をすると、変更箇所が上書きされてもとに戻る可能性がある

という内容です。

もちろん、適当にプラグインを変更してしまうと通知がうまく行かなくなってしまう可能性がありますので、以降の手順をひとつひとつ確認しながら行ってくださいね。

藤ミヤチ藤ミヤチ
手順をちゃんと守ればサイトを壊すことはないよ

警告を確認したら青いボタン「理解しました」をクリックしてください。

プラグインを選択

右上のプラグイン選択で「Slack Contact Form 7」を選んで「選択」ボタンをクリックしてください。

プラグインの編集

左側のエディターでコードを編集して「ファイルを更新」を押すことになります。

もともとの(編集する前の)コードは↓

function wp_slack_wpcf7_submit( $events ) {
  $events['wpcf7_submit'] = array(
    // Action in Gravity Forms to hook in to get the message.
    'action' => 'wpcf7_submit',

    // Description appears in integration setting.
    'description' => __( 'When someone sent message through Contact Form 7', 'slack' ),

    // Message to deliver to channel. Returns false will prevent
    // notification delivery.
    'message' => function( $form, $result ) {

      // @todo: Once attachment is supported in Slack
      // we can send payload with nicely formatted message
      // without relying on mail_sent result.
      $sent = (
        ! empty( $result['mail_sent'] )
        ||
        ( ! empty( $result['status'] ) && 'mail_sent' === $result['status'] )
      );

      if ( $sent ) {
        return apply_filters( 'slack_wpcf7_submit_message',
          sprintf(
            __( 'Someone just sent a message through *%s* _Contact Form 7_. Check your email!', 'slack' ),
            is_callable( array( $form, 'title' ) ) ? $form->title() : $form->title
          ),
          $form,
          $result
        );
      }

      return false;
    }
  );

  return $events;
}
add_filter( 'slack_get_events', 'wp_slack_wpcf7_submit' );

58行目〜67行目を消して、新しいコードに置き換えます。

【消すコード】

if ( $sent ) {
  return apply_filters( 'slack_wpcf7_submit_message',
    sprintf(
      __( 'Someone just sent a message through *%s* _Contact Form 7_. Check your email!', 'slack' ),
      is_callable( array( $form, 'title' ) ) ? $form->title() : $form->title
    ),
    $form,
    $result
  );
}

【差し替えで入れるコード】

if ( $sent ) {
  $submission = WPCF7_Submission::get_instance();
  $formdata = $submission->get_posted_data();
  $contents = '';
  foreach ($formdata as $key => $val) {
    if (substr($key, 0, 1) != '_') {
     $contents .= $key . ':' . $val . "\n";
    }
  }
  return apply_filters( 'slack_wpcf7_submit_message',
  $contents,
  $form,
  $result
  );
}

差し替えが終わると、以下のようにSlack内容が変更されます。

Slackで変更された通知内容

「your-name」「your-email」「your-message」は、Contact Form 7でフォームを設定するときに入力した値がそのまま反映されています。

contact form 7で設定した値
笑顏の藤ミヤチ藤ミヤチ
これで、WordPressサイトのフォームで入力した内容がSlackで通知されるようになったよ!

WordPressサイトでの問い合わせは、簡単にslackで通知するように出来る

WordPressサイトで問い合わせがあったものはメールで確認するのは、地味に手間なケースがあると思います。

企業などで、チームで内容を確認したいときなどは、Slackで確認したほうが都合がいいことも多いのではないでしょうか。

SlackやContact Form 7は外部サービスとの連携が得意なので、ぜひ設定してみてください。

笑顏の藤ミヤチ藤ミヤチ
Slackでの通知はほぼリアルタイムなので便利だよ!
スキルアップしたいサイト制作者
向けの情報をつぶやくよ 藤ミヤチのTwitter
(ここをクリック/タップ)
シェア


この記事も参考になるかも
【HBook】WordPressのホテル予約プラグイン 導入方法まとめ
独自テーマ作成の初心者が学ぶべきWordPressの基本は16の関数ほか
WordPressサイトでの問い合わせ内容をGoogleスプレッドシートに自動で記録する方法