WordPress 「Contact Form 7」と Hubspot Forms を連携する方法

Posted at 2024-01-30

はじめに

前回、Hubspotフォーム機能に対してAPIを利用した問い合わせ情報の連携を紹介しました。
今回は、前回のAPIを利用して、WordPressのコンタクトフォームプラグインである「Contact Form 7」で作成されたお問い合わせフォームから、Hubspotフォーム機能への情報連携を紹介します。

Hubspotフォーム機能の利用を検討しているが、すでにWordPressで問い合わせフォームが運用されているため、WordPress側の問い合わせフォームをそのまま継続して利用したい場合などに、有効な方法となります。

「Contact Form 7」のフォーム作成

WordPressに「Contact Form 7」をインストールし、問い合わせフォームを作成します。
今回の検討では、下記の問い合わせ項目にて、フォームとメールの設定を行っています。

項目名称	項目名
姓	your-lastname
名	your-firstname
会社名	your-company
メールアドレス	your-email
お問い合わせ内容	your-message

フォームの設定内容
管理者向けメール設定内容
お問い合わせ者向けメール設定内容

WordPressにフィルターフックを追加

「Contact Form 7」が提供しているフィルターフック「wpcf7_feedback_response」を利用して、「Contact Form 7」の問い合わせフォームから送信された問い合わせ情報を取得し、Hubspotフォーム機能へ連携させるAPIを呼び出すよびだすような処理をWordPress上に実装します。

ここでは、Hubspotフォームに下記のプロパティが設定されていることを前提に実装方法を紹介します。Hubspotフォームの設定については、こちらを参照してください。

Hubspotフォームプロパティ名（name）	Hubspotフォームオブジェクト名（objectTypeId）
姓（lastname）	コンタクトプロパティ（0-1）
名（firstname）	コンタクトプロパティ（0-1）
会社名（company）	コンタクトプロパティ（0-1）
メールアドレス（email）	コンタクトプロパティ（0-1）
お問い合わせ内容（message）	コンタクトプロパティ（0-1）

認証無しAPIを利用して連携する場合（※非推奨）

API仕様

実装する処理

hubspot_form_submit.php

function hubspot_form_submit($response, $result) {

    // Contact Form 7 状態の確認
    if (($response['status'] ?? '') == 'mail_sent') {
        // 送信成功した場合

        // 送信情報を取得
        $submission = WPCF7_Submission::get_instance();

        // 送信情報の判定
        if($submission) {
            // 送信情報有りの場合

            // POSTされた送信情報取得
            $submission_data = $submission->get_posted_data();

            // 「Submit data to a form (Supporting Authentication)」APIへのリクエストボディ設定
            //   リクエストボディに'context'情報を設定
            //     'context'情報を省略する場合：$request_data = array('fields' =>[]);
            $request_data = array('fields' => [], 
                                  'context' => array('hutk' => $_COOKIE["hubspotutk"], 
                                                     'pageUri' => $_SERVER["HTTP_REFERER"], 
                                                     'pageName' => get_the_title($result['contact_form_id']), 
                                                     'ipAddress' => $_SERVER["REMOTE_ADDR"]));

            //   submission_dataからContact Form 7で送信された各情報を取得し、
            //   リクエストボディの'fields'情報を設定
            //     姓
            $param_value = is_array($submission_data['your-lastname']) ? $submission_data['your-lastname'][0] : $submission_data['your-lastname'];
            array_push($request_data['fields'], array('objectTypeId' => '0-1', 'name' => 'lastname', 'value' => $param_value ?? ''));

            //     名
            $param_value = is_array($submission_data['your-firstname']) ? $submission_data['your-firstname'][0] : $submission_data['your-firstname'];
            array_push($request_data['fields'], array('objectTypeId' => '0-1', 'name' => 'firstname', 'value' => $param_value ?? ''));

            //     会社名
            $param_value = is_array($submission_data['your-company']) ? $submission_data['your-company'][0] : $submission_data['your-company'];
            array_push($request_data['fields'], array('objectTypeId' => '0-1', 'name' => 'company', 'value' => $param_value ?? ''));

            //     メールアドレス
            $param_value = is_array($submission_data['your-email']) ? $submission_data['your-email'][0] : $submission_data['your-email'];
            array_push($request_data['fields'], array('objectTypeId' => '0-1', 'name' => 'email', 'value' => $param_value ?? ''));

            //     問い合わせ内容
            $param_value = is_array($submission_data['your-message']) ? $submission_data['your-message'][0] : $submission_data['your-message'];
            array_push($request_data['fields'], array('objectTypeId' => '0-1', 'name' => 'message', 'value' => $param_value ?? ''));

            // リクエストボディをJSON形式に変換
            $request_json = json_encode($request_data);

            // リクエストヘッダーに「HubSpotアクセス用トークン」を設定
            $header = [
                            'Content-Type: application/json'
                      ];

            // リクエスト先URLに「Submit data to a form 」のベースURLと「HubSpotポータルID」、「HubSpotフォームID」を設定
            $url = 'https://api.hsforms.com/submissions/v3/integration/submit/' . '「HubSpotポータルID」/「HubSpotフォームID」';

            // リクエスト送信初期処理
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST,  'POST');
            curl_setopt($ch, CURLOPT_HTTPHEADER,     $header);
            curl_setopt($ch, CURLOPT_POSTFIELDS,     $request_json);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_URL,            $url);
            curl_setopt($ch, CURLOPT_POST,           true);

            // リクエスト送信処理
            $api_response = curl_exec($ch);

            // リクエスト送信終了処理
            curl_close($ch);

        }
    }

    // 正常終了
    return $response;
}

// Contact Form 7のレスポンス返却用フィルター設定
add_filter('wpcf7_feedback_response', 'hubspot_form_submit', 10, 2);

認証有りAPIを利用して連携する場合

API仕様

実装する処理

hubspot_form_submit.php

function hubspot_form_submit($response, $result) {

    // Contact Form 7 状態の確認
    if (($response['status'] ?? '') == 'mail_sent') {
        // 送信成功した場合

        // 送信情報を取得
        $submission = WPCF7_Submission::get_instance();

        // 送信情報の判定
        if($submission) {
            // 送信情報有りの場合

            // POSTされた送信情報取得
            $submission_data = $submission->get_posted_data();

            // 「Submit data to a form (Supporting Authentication)」APIへのリクエストボディ設定
            //   リクエストボディに'context'情報を設定
            //     'context'情報を省略する場合：$request_data = array('fields' =>[]);
            $request_data = array('fields' => [], 
                                  'context' => array('hutk' => $_COOKIE["hubspotutk"], 
                                                     'pageUri' => $_SERVER["HTTP_REFERER"], 
                                                     'pageName' => get_the_title($result['contact_form_id']), 
                                                     'ipAddress' => $_SERVER["REMOTE_ADDR"]));

            //   submission_dataからContact Form 7で送信された各情報を取得し、
            //   リクエストボディの'fields'情報を設定
            //     姓
            $param_value = is_array($submission_data['your-lastname']) ? $submission_data['your-lastname'][0] : $submission_data['your-lastname'];
            array_push($request_data['fields'], array('objectTypeId' => '0-1', 'name' => 'lastname', 'value' => $param_value ?? ''));

            //     名
            $param_value = is_array($submission_data['your-firstname']) ? $submission_data['your-firstname'][0] : $submission_data['your-firstname'];
            array_push($request_data['fields'], array('objectTypeId' => '0-1', 'name' => 'firstname', 'value' => $param_value ?? ''));

            //     会社名
            $param_value = is_array($submission_data['your-company']) ? $submission_data['your-company'][0] : $submission_data['your-company'];
            array_push($request_data['fields'], array('objectTypeId' => '0-1', 'name' => 'company', 'value' => $param_value ?? ''));

            //     メールアドレス
            $param_value = is_array($submission_data['your-email']) ? $submission_data['your-email'][0] : $submission_data['your-email'];
            array_push($request_data['fields'], array('objectTypeId' => '0-1', 'name' => 'email', 'value' => $param_value ?? ''));

            //     問い合わせ内容
            $param_value = is_array($submission_data['your-message']) ? $submission_data['your-message'][0] : $submission_data['your-message'];
            array_push($request_data['fields'], array('objectTypeId' => '0-1', 'name' => 'message', 'value' => $param_value ?? ''));

            // リクエストボディをJSON形式に変換
            $request_json = json_encode($request_data);

            // リクエストヘッダーに「HubSpotアクセス用トークン」を設定
            $header = [
                            'Content-Type: application/json',
                            'Authorization: Bearer ' . '「HubSpotアクセス用トークン」'
                      ];

            // リクエスト先URLに「Submit data to a form (Supporting Authentication)」のベースURLと「HubSpotポータルID」、「HubSpotフォームID」を設定
            $url = 'https://api.hsforms.com/submissions/v3/integration/secure/submit/' . '「HubSpotポータルID」/「HubSpotフォームID」';

            // リクエスト送信初期処理
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST,  'POST');
            curl_setopt($ch, CURLOPT_HTTPHEADER,     $header);
            curl_setopt($ch, CURLOPT_POSTFIELDS,     $request_json);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_URL,            $url);
            curl_setopt($ch, CURLOPT_POST,           true);

            // リクエスト送信処理
            $api_response = curl_exec($ch);

            // リクエスト送信終了処理
            curl_close($ch);

        }
    }

    // 正常終了
    return $response;
}

// Contact Form 7のレスポンス返却用フィルター設定
add_filter('wpcf7_feedback_response', 'hubspot_form_submit', 10, 2);

おわりに

以上が、WordPressで問い合わせフォームの情報をHubSpotフォームに連携する方法となりま。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

WordPress 「Contact Form 7」 と Hubspot Forms を連携する方法