やりたいこと

WordPressからお問い合わせが届いた時に、Baseファイルにお問い合わせの内容を転記し、それをチャット内に通知することがゴールです。

使用するツール

下記のツールを使用します。

• お問い合わせフォーム用のWordPressのプラグイン
  • Contact Form 7
  • CF7 to Webhook
• AnyCross
• Baseファイル
• 通知するチャット

WordPress側でお問い合わせフォームを設置する

まずはWordPress側でお問い合わせフォームを設置します。

必要なプラグインは、お問い合わせフォームを作成するContact Form 7と、Contact Form7でwebhookが使えるようにするCF7 to Webhookの2つです。

今回は下記のようなフォームを作成しました。かなり有名なプラグインですので、作成方法については割愛します。

CF7 to Webhookもプラグインを追加し、有効化しておきましょう。
有効化すると、コンタクトフォームに次のようなタブが追加されます。

Webhook URLには、後ほどanycrossで取得するコールバックURLを追記します。

AnyCross側の設定

Any Crossとは？

AnyCrossは、Larkを提供しているLark社が開発した、ローコード、もしくはノーコードで複数のアプリケーションを統合できるサービスです。

今回はそんなAnyCrossを活用して、WordPress→Base(Lark)→チャット(Lark)といった、異なるアプリケーションをリンクさせてみます。

プロジェクトを作成する

AnyCrossにログイン後、左のツールバーから「Integration」を選択し、「Create project」から新規のプロジェクトを作成します。
全体像としては、プロジェクトという大きな箱を作成し、その中でいくつかのワークフローを作成するイメージです。

Nameにはプロジェクト名、Descriptionにはプロジェクトの説明を記載します。今回は「業務効率化」としましたが、管理しやすければなんでもいいと思います。

ワークフローを作成する

続いて、プロジェクト内にある「Create Workflow」をクリックし、ワークフローを作成します。

AnyCross側で既にワークフローのテンプレートが用意されていますが、今回はいずれにも当てはまらないため、新規で作成します。

プロジェクトと同じく、Nameにはワークフロー名、Descriptionにはワークフローの説明を記載します。
Select a trigerからワークフローが動作するトリガーを設定できますが、今回は「Webhook Trigger」を選択しましょう。

ワークフローを作成すると上記のような画面になり、この画面から細かい設定を進めていきます。

Webhook Triggerの「Setiings」からコールバックURLを取得できるので、こちらをコピーして、先ほどのお問合せフォームの設定内にあったWebhook URLの箇所にペーストします。

これでフォームが投稿された時にAnyCross側でデータを受け取る準備が整いました。

複数のアプリケーションを結合させる

ワークフローにある＋アイコンをクリックすると、別のアプリケーションを結合させることができます。

今回は、まずLarkのBaseにお問い合わせの内容を転記したいので、2つ目のフローに「Lark Base」を、次にお問い合わせが届いたことをチャットに通知したいので、3つ目のフローに「Lark Messenger」を設定します。

Baseにお問い合わせの内容を転記する

まずは、お問い合わせが届いたらBaseに転記するように設定します。

転記先のBaseファイルを用意しておく必要があるので、先に作成しておきましょう。
下記のように、フィールドはお問い合わせフォームの項目と合わせると分かりやすいと思います。

ここでWebhook Trigger側の設定に戻りますが、コールバックURLをCF7 to Webhookに設定した状態で、実際にお問い合わせフォームからお問い合わせを送信してみます。

すると送信した情報がOutput data内に表示されるので、下のApply as Outputをクリックしましょう。
これで、受け取ったデータをBaseに連携することができる状態になります。 （bodyにはContact From7で設定したラベルが、そのまま項目として入ります。）

続いてBaseの設定に移ります。「Action」で「Add record」を選択すると、「Input」は次のような設定画面になります。

転記先のBaseのファイル名・テーブル名を入力すると、該当のテーブルにあるフィールドが自動で入力されるので、それぞれのフィールドに対応するデータを出力します。

_(“$.webhook-trigger-1.body.⚫︎”) の⚫︎の部分を先ほどのラベル名に変更し、Ex（expression）形式で入力すると、それぞれ任意のフィールドに任意のデータを出力させることが可能です。

例えば、「電話番号」のフィールドにはお問合せフォームの「電話番号」の項目を出力したいので、_(“$.webhook-trigger-1.body.tel”)と入力します。

上記を必要なフィールド分対応すれば、Baseにお問い合わせの内容を転記する設定は完了です。

チャットにお問い合わせが届いたことを通知する

続いて、チャットにお問い合わせが届いたことを通知するよう設定します。

Lark messengerの「Action」で「Send common messege」を選択すると、「Input」は次のような設定画面になります。

「Messege type」では送信形式を、「Messege text」では送信されるテキストを自由に設定できます。
今回はシンプルに「お問い合わせが届いたよ！」というメッセージと、Baseのテーブルのリンクを送信してみます。

また、どこに通知するかを「Receiver ID」と「Receiver ID type」で指定することが可能です。
今回は特定のグループチャット内に送信したかったので「chat_id」を指定しましたが、個人に送信したり、メール宛に送信することも可能です。

右上のボタンからpublishすれば、上記でワークフローの設定は完了となります。

chat_idの取得方法については、下記の記事をご参照ください。

実際にお問い合わせフォームを送信してみる

ワークフローの設定が完了したので、実際にお問い合わせフォームを送信して正しく動作するかを確認してみます。

Baseにレコードが追加され、チャットに通知が届きました。