【Salesforce】WordpressのContactForm7とSalesforceのWeb-to-リードでレコードを作成してみた

# はじめに
「**SalesforceとWebサイトの連携方法も学んでおこう**:chipmunk:」

ということで、今回はWordPressで作成したフォームから、Salesforceのレコードを作成する処理を実装しました。
実装したい内容を網羅することはできませんでしたが、学習記録として投稿します。

今回はWordPressを**Local**というツールで立ち上げ、プラグインの**ContactForm7**でフォームの作成、Salesforce(DeveloperEdition)と接続して、リードレコードの作成を試みました。

:::note info
記事を読んでアドバイス等ありましたら、ぜひお願いします！
:::


# 実装したいこと
- Webページの既存フォームから送信された情報をメール送信
- Salesforceのリードに新規レコードとして登録する
- リードから取引開始をした時に、取引先責任者ではなく、取引先に値を入れる

# できなかったこと
- リードレコードの新規作成時にレコードタイプを指定する

# 実装した機能の完成形
フォーム送信
![リード登録_–_Salesforce-Integration.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/3b36d5b3-a094-4bc3-8f67-1876526a83b4.png)

リードにレコードが作成される
![スクリーンショット_2025_02_23_16_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/6a9fd522-c0af-421a-8a67-1294b0286cc8.png)

リードから取引先にコピー
![太郎_テスト___リード___Salesforce.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/4073c1a2-a707-46f0-954a-8d742082f91a.png)

取引先レコードが作成される
![スクリーンショット_2025_02_23_16_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/97136600-0340-46d7-ad9a-527b5534217b.png)





# WordPressをLocalで立ち上げる
今回は学習用なので、[Local](https://localwp.com/)というツールを使いました。
Localの導入の仕方については、省略します。

WordPressを立ち上げたら、プラグインをインストールします。
今回は**ContactForm7**と**WP ContactFormSalesforce**を使用します。
![プラグイン_‹_Salesforce-Integration_—_WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/14388216-a810-4b07-8291-b2b8f5da1b8f.png)

# WordPressでフォームを作成する
お問い合わせから新規フォームを作成します。
![Cursor_と_Gather_Mini_Mode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/2f4e50d7-a4ad-4e69-8394-ef40c9cf7a16.png)

フォームの編集画面で項目を作成します。
inputhidenフィールドでリードのレコードタイプのIDを渡しています。
![コンタクトフォームの編集_‹_Salesforce-Integration_—_WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/d629502e-1419-4d5a-8e42-22d9de7d98cf.png)

フォームが作成されます。
![企業登録フォーム_–_Salesforce-Integration.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/f9299161-ccc5-4b85-a4d8-4ef28c8ad57d.png)

# WordPressとSalesforceのアカウントを連携する
:::note warn
WP ContactFormSalesforceの無料版では、標準項目のみ対応しています。
:::

WP ContactFormSalesforceを有効化していると、WordPressの管理画面のサイドバーに[Salesforce]という項目があるので、選択します。
![Salesforce_for_Contact_Form_‹_Salesforce-Integration_—_WordPress_と_times_all（チャンネル）_-_HAB_Co__-_Slack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/c49a2919-f6d9-42db-a95e-250e36d08505.png)

[Salesforce Accounts]タブから[Add New Account]を選択します。
![Salesforce_for_Contact_Form_‹_Salesforce-Integration_—_WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/4fc8be7b-6c15-4900-af64-df9c2c7df7c0.png)

下記の情報を入力します。
- Account Name：任意
- Environment：Production
- Integration Method：Web-to-Lead or Web-to-Case
- Salesforce Org.ID：接続する組織のID
![Salesforce_for_Contact_Form_‹_Salesforce-Integration_—_WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/a6a1d2d1-76a9-4925-be48-79de3f5f3595.png)

Salesforce Org.IDは、Salesforceの[設定]から[組織情報]を選択すると確認できます。
![組織情報___Salesforce.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/41991a96-b27d-424d-a217-5cf1ef7d79a8.png)

[Salesforce Feeds]の[Add New]を選択します。
![Salesforce_for_Contact_Form_‹_Salesforce-Integration_—_WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/cd9be3e6-0ec8-45bd-bcfc-fb5b0105300e.png)

下記の情報を入力します。
- Feed Name：任意
- Salesforce Account：接続したアカウントを選択
- Contact Form Form：作成したフォームを選択
- Saleforce Object：レコードを登録したいオブジェクトを選択
- Field Mapping：フォームの値をどの項目にマッピングしたいかを選択
![Salesforce_for_Contact_Form_‹_Salesforce-Integration_—_WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/3d4f139f-5e6c-4cb8-972f-8d0fcb50f051.png)

フォームから情報を送信してみます。
![スクリーンショット_2025_02_22_13_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/2a45adae-e182-406b-835c-63cc178a0100.png)

Salesforceのリードにレコードが作成されました。
![Gather_Mini_Mode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/822664fb-7d8b-4900-acab-a42db0efd527.png)

今回は既存のフォームとSalesforceを連携するために、この方法を試みました。
しかし、WP ContactFormSalesforceの無料版では、標準項目にしか値を送信できません。
（有料版を使うとカスタム項目にも値を送信することができます）
また、レコードタイプの指定もうまくできませんでした。
（リードのレコードタイプがA,Bの二種類あるとき、BのレコードタイプIDを送信しても、Aで作成される）





# WP ContactFormSalesforceを使わずに再チャレンジ
次は、WP ContactFormSalesforceを使わずに、カスタム項目への値の送信とレコードタイプの指定ができるか試してみます。

Salesforceの[設定]で[Web-to-リード]を選択します。
![ホーム___Salesforce.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/46d57dab-7ff1-4fd3-b58a-1cc8d5d71912.png)

[Web-to-リードフォームの作成]を選択します。
![Web-to-リード___Salesforce.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/1b85c985-09f5-47b0-930b-c4a91384a39c.png)

連携する項目を選択済みの項目に追加します。
![Web-to-リード___Salesforce.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/c89637dd-e1fc-473a-a19f-dcdcaff7e9aa.png)

reCAPTCHAを設定することもできますが、今回はチェックを外します。
![スクリーンショット_2025_02_22_14_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/8119ee05-11d2-40fe-a39f-38e49353d00e.png)

作成を選択すると、HTMLが生成されます。
![Web-to-リード___Salesforce.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/0e00c9b6-7e60-4385-82e4-1b172e810c54.png)

サンプルコードを元にWordPressでフォームを作成します。
![Cursor_と_コンタクトフォームの編集_‹_Salesforce-Integration_—_WordPress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/334bb4ce-b9c2-4fd1-83e7-5b469e819eef.png)

function.phpにコードを追加します。（下記の記事を参考にさせていただきました）

https://qiita.com/emegane/items/957c5db4e41d11454430

```functions.php
function sf_web_to_lead($cf7)
{
  // 送信されるデータを取得します。
  $submission = WPCF7_Submission::get_instance();
  $posted_data = $submission->get_posted_data();

  // POSTするクエリを用意します。
  $query_data = array();

  foreach ($posted_data as $name => $value) {
      // Contact form 7用のパラメータはスキップします。
      if (0 === strpos($name, '_wpcf7')) {
          continue;
      }

      // 複数選択可能なフィールド（select[multiple]やcheckboxなど）の場合は、
      // hoge=value1&hoge=value2のように送信します。（Salesforceの仕様）
      if (is_array($value)) {
          foreach ($value as $option_value) {
              $query_data[] = sprintf('%s=%s', $name, $option_value);
          }

      } else {
          $query_data[] = sprintf('%s=%s', $name, $value);
      }
  }

  $query = implode('&', $query_data);

  // Init cURL session
  $ch = curl_init();
  $sf_url = 'https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8';
  curl_setopt($ch, CURLOPT_URL, $sf_url);
  curl_setopt($ch, CURLOPT_POST, 1);
  curl_setopt($ch, CURLOPT_POSTFIELDS, $query);
  $response = curl_exec($ch);

  if (curl_errno($ch)) {
    error_log('cURL error: ' . curl_error($ch));
  }
  
  curl_close($ch);
  return $cf7;
}
add_action('wpcf7_before_send_mail', 'sf_web_to_lead');

```

[Web-to-リードからレコードタイプを渡す](https://help.salesforce.com/s/articleView?id=000385236&type=1)には、フォームに下記のコードを追加します。

```
<input type=hidden name="recordType" id="recordType" value="XXXXXXXXXXXXXXX">
```
しかし、 ContactForm7を介してフォームを作成するとうまくいきませんでした。

# リードのデータをコピーするフローの作成
Salesforceのフローで、以下の機能を実装します。
- リードが取引開始になった時、取引先責任者の情報を取引先にコピーする
- 取引先責任者を削除する

取引先オブジェクトには[氏名]という項目のみなので、
取引先責任者オブジェクトに[姓]と[名]を結合させた形で表示する新規項目を作成します。
（元々あるName項目は、取引先のName項目と紐付けができませんでした。敬称が含まれているからかもしれません）
![スクリーンショット_2025_02_23_13_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/64ed8965-fad6-4a7f-8ade-7a49bec01ba6.png)

[設定]から[フロー]、[新規フロー]を選択します。

[最初から作成]で[自動起動フロー]を選択します。

オブジェクトは[取引先責任者]、トリガーを[レコードが作成された]に設定します。
![取引先責任者作成時に取引先の項目更新_-_V10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/6bcc7047-b157-4059-90e8-34e248aa0eec.png)

[要素を追加]で、[関連レコードを更新]を選択します。
関連するレコードに[取引先ID]を設定します。
取引先の項目値に、取引先責任者の値を設定します。
Nameには、上記で作成した新規項目の値を紐づけます。
![取引先責任者作成時に取引先の項目更新_-_V10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/08720b49-2b84-4125-ac5e-8002fdf74218.png)

[要素を追加]で、[レコードを削除]を選択します。
![取引先責任者作成時に取引先の項目更新_-_V10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/5cff71d8-5e6e-4d8f-bdf8-b69357c9a49c.png)

取引先責任者の作成時に、取引先にデータをコピーして、取引先責任者レコードを削除するフローが完成しました。
![スクリーンショット_2025_02_23_14_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/9435a051-04ee-4733-9ce5-afd5485b4ce2.png)





# フォームからカスタム項目に値を送信する
リードオブジェクトに新規カスタム項目を作成します。
（API参照名：Web_to_lead_test__c）
フォームに下記コードを追加して、カスタム項目にも値が送信されるか試します。
```
<label for="Web_to_lead_test__c">カスタム項目テスト</label>
<input id="Web_to_lead_test__c" maxlength="40" name="Web_to_lead_test__c" size="20" type="text" /></br>
```

フォームに値を入力します。
![スクリーンショット_2025_02_23_16_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/c977e1d7-bd1e-40f9-b1b6-242974159729.png)


無事、カスタム項目にも値が送信されました。
![スクリーンショット_2025_02_23_16_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577266/177b9b03-5096-4260-a2c4-c75a4c507e19.png)






# まとめ
今回は、WordPressのContactForm7とSalesforceのWeb-to-リードでレコードを作成する機能を実装しました。
[WordPressのプラグイン]や[Salesforceのカスタム項目]など、様々な要素が関わると、想定通りの挙動を実装することが難しいですね。
Salesforceにおいて、できるだけ**標準機能での実装を意識する**ことが、保守性を高める上で大切だと感じました。