wordpressからの問い合わせをメール、担当者へ自動転送

#やりたかった事
・お問い合わせ内容によって自動で業者へメール送れない？
⇒業者へ発注の自動化

・お問い合わせがあった事を担当へ転送
⇒クラウドソーシングサイトなどの運営に応用

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/e85aba82-2f16-1d21-4838-79828b913853.png)

①サービス利用者は運営サイトより出品者を探す
②気に入った出品者のサービスを購入・申し込み
③運営者側のお問合せ窓口へメールが届く
④条件分岐をして、サービス提供者へ購入・申し込みのメールを自動転送

みたいな流れが自動で出来ないの？と聞かれ考察してみました。

#完成品
お問い合わせメールはwordpressのcontact form7を利用しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/a68b41ba-38db-98bf-8a63-b4a6d71032a1.png)

1.contact form7から送られた値をwebhookで受け取る
2.googleスプレッドシートに記録
3.チェックボックスの値によって、担当者のメールアドレスを代入
4.gmailを利用して、担当者へ自動転送メール


#環境
・wordpress
・contact form7
・WP Webhooks – Contact Form 7 Integration
・Integromat

#事前準備
##wordpressサイトにお問い合わせフォームプラグインの定番conatct form7と
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/e3e55c58-f16f-99eb-49fa-a94e42240a8e.png)

contact form7でwebhookが使えるようにする【WP Webhooks – Contact Form 7 Integration】をインストールします。
[WP Webhooks – Contact Form 7 Integration](https://wordpress.org/plugins/wpwh-contact-form-7/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/1871884b-2bc7-2185-ba30-40d0b1bad620.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/ea2b4c4a-02d8-7f38-7ddc-5e3124c545f1.png)

通常のお問い合わせフォーム設定にwebhookタブが追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/36794281-a8ac-ff2b-bb8e-673f55f78151.png)


##Integromat設定
1.ユーザー登録
googleのアカウントなどでログインしておくと楽です。

2.【create a new sepnario】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/e9724808-c152-15d5-a800-652d5558d566.png)

3.【webhook】
webhookと検索をして、webhookを選択し【continue】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/e7417172-f63c-fad1-65a3-197ba2bc528b.png)

4.【wehbook】⇒【Custom webhoook】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/e94a8169-20da-f0a3-4f73-1aee3297726c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/52bfa52a-510b-9f7b-85ec-6ff4829bf071.png)

5.【Webhook name】入力
任意の名前を付けます。今回はcontact7-hookにしてみます。入力したらsaveを忘れずに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/8a11f607-3717-a405-2db0-1a87b6b4e9e8.png)

6.【URL発行】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/d1a94170-634b-c82c-a246-d7cab444fa4a.png)

以上でcontact form7とIntegrematの下準備は終了です。

#Integrematとcontact form7を接続
1.wordpressのcontact form7の設定へ行き
Integrematで発行されたURLを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/f2cefaaa-7aa6-394d-4454-e5808a23270b.png)

2.出力されたお問い合わせフォームから問合せ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/a34e60e1-8bd5-081c-a07a-72175dd3b959.png)

3.Integrematへ戻ると
設定したwebhookを利用して、２の手順でお問い合わせを行ったデータの受信が成功した事がわかります。okボタンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/80b92af7-70a1-eedb-962f-94d4c4e402ed.png)

4.【Add another module】でスプレッドシートと接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/302833cc-40f7-912d-d6e4-a8e6840ed11d.png)

もう一度【Add another module】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/244ed702-a2b3-8111-7ab6-dd2f65ad714d.png)

【google sheet】を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/53617fcf-2b15-8f19-b609-772df8a03919.png)

今回は行を追加しようと思うので【Add a row】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/1d7c658b-4e74-0d31-a9b7-f5e6e4c83ecb.png)

5.接続するシートを選択
事前にgoogle driveにスプレッドシートを作成しておくと良いと思います。
・Connection ー 作成したシートのgoogleアカウント
・Mode ー Select Spreadsheet and sheet
・Spreadsheet ー 作成したスプレッドシートを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/687b9ed2-84e4-68a8-8c97-0d9afb1c811c.png)

スプレッドシートの中のシートを選択してheadersで1行目を読み込みます。
まだ何も設定をしていないので、A列～からの情報を受け取っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/cafd8999-8b42-b4bb-72ec-89c45b32e3c7.png)

6.Run once
Run onceを押した後、実際にお問い合わせをしてみてデータを送信する事を忘れないでください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/d1e0460a-1faa-510e-4fe4-4926bf2d5040.png)

7.Integrematでcontact form7の情報を受け取った情報を元に
お問い合わせフォームには、メールを振り分けるフックとなるチェックボックスを追加しています。
また、[contact form7で使える特殊タグ](https://contactform7.com/special-mail-tags/)から送信日時も取得してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/b42e09c6-9fef-2c2a-f3b4-4eb49fa8e206.png)

8.スプレッドシートへ見出しを代入
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/6c7be984-f8b5-6d44-5ddb-02d6983395cb.png)

9.もう一度スプレッドシートアイコンをダブルクリックします。
シートの見出しと受け取ったデータをドラッグで紐づけます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/f3131f29-23be-c49b-a00f-0f5e03c9105d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/850ec3a5-047e-f518-e232-166174aa9a85.png)

10.もう一度【Run once】
Run onceを押した後、実際にお問い合わせをしてみてデータを送信する事を忘れないでください。
成功！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/96d3da2d-99b4-674c-c634-92359667c77a.png)


contact form7　⇒　スプレッドシート
への自動化は成功しました。

この後は、受け取る値(今回はチェックボックスの値)を工夫して、値によって特定のメールアドレスへ自動転送する仕組みを構築していきます。

#スプレッドシートを確認
チェックボックスの値がきちんとセルに入っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/019139e0-117a-eb33-dd80-9afd3f15bf5d.png)

#せっかくなのでGASではなくIntegromatでメールの転送まで実装
##spred sheet右側の+ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/29001092-9b04-2b01-6d07-a6cbd8b22b63.png)

##switchで条件分岐
Toolの中に入っているswitchを利用して、担当者のメールアドレスを自動で割り振りします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/f99ceadb-5da5-7e07-b52a-1c94a6d3e91b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/f4333475-2916-e0eb-0f30-2c5fd7687a08.png)

###この使い方ですこし躓きました。。。
実は簡単で
・input ー 条件分岐したい項目を設定
・pattern ー inputの値が何だったらという条件を入力
・output ー 返す値を設定

patternの部分に、check[]==test1 と入力してしまっていて、outputが空の状態が長く続きました。
単純に、右側の値だけを入力すれば良かったと自己解決出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/ed085e00-6d39-3304-3fb2-41ad42d3a69b.png)

##Gmailを選択
続けて、gmailも設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/c0115d64-98ce-8b37-f5ae-bba540ae8f87.png)

##Send an email
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/545a23e4-1f4d-f3c8-3fcb-4df80ff5163b.png)

##toにoutputの値を代入
このような形で無事、自動転送メールの設定が実装出来ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/f8c65c06-a836-9aac-2607-2d0c90d24757.png)

#まとめ
一連の動作を終え、とても凄いことに気づきました。

スプレッドシートいらない！！

直接webhookで受け取った値を条件分岐してgmailへ流す。
たったこれだけの作業で良かったみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/d4227042-0343-b8b1-5ade-5762cff8be58.png)

最後にスケジュールを設定して完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/713b70d5-e081-279e-7074-549662a27b3b.png)