みやちサイト制作所

未経験でもWEBサイト制作で稼ぐためのノウハウまとめ

閉じる

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

フォームの入力をslackで通知する方法
trouble
サイトで入った問い合わせをわざわざメールで確認するの面倒だな…Slackで見れたらいいのに…

と思っていませんか?

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

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

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

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

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

【この記事の目次】

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

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

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

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

  • Slack
  • Slack Contact Form 7

Slack

Slack
Slack

Slack

WordPress の特定のイベントが発生した時に、Slack のチャンネルへ通知を送ります。

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

Slack Contact Form 7

Slack Contact Form 7
Slack Contact Form 7

Slack Contact Form 7

Send notifications to Slack channels whenever someone sent message through Contact Form 7.

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

まとめると、

  • Contact Form 7
  • Slack
  • Slack Contact Form 7

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

miyachi
それぞれプラグインをいれたら有効化しよう

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

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

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

contact form 7

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

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

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

slackロゴ

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

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

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

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

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

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

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

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

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

Get Started

Get Started

Try Slack for free with your teammates. All it takes is an email address to get started.

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.」にチェックを入れます。

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

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

Slackに通知される

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

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

Slackに通知される
default
問い合わせの内容までわかるようにしたい…!

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

プラグインエディター

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

プラグイン編集の警告

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

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

という内容です。

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

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

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

プラグインを選択

右上のプラグイン選択で「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で設定した値
miyachi2
これで、WordPressサイトのフォームで入力した内容がSlackで通知されるようになったよ!

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

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

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

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

miyachi2
Slackでの通知はほぼリアルタイムなので便利だよ!

サイトを効率的に作るための
秘蔵ノウハウを発信中

note

開発の基本的な部分はもちろん、コードをより素早く理解して書くための「コツ」をまとめました。15年の開発経験に裏付けられたノウハウをどうぞ!

詳しくはこちら

記事をシェア