HubSpotの非 HubSpot フォーム機能を使用してコンタクトを登録する

こんにちは。香田です。

HubSpotの非 HubSpot フォーム機能を使用して、WordPressで問い合わせフォームを用意し、フォーム登録情報をHubSpotのコンタクトに登録する方法を紹介していきます。

非 HubSpot フォームとは

非 HubSpotフォームはHubSpot以外で作成した外部サイト上のHTMLフォームになります。

詳細は下記を参照してみてください。

非 HubSpot フォームを使用する

非 HubSpotフォームを利用する場合、事前にHubSpotのトラッキングコードをサイトにインストールする必要があります。

下記を参考にインストールしてください。

HubSpot トラッキングコードをインストールする

HubSpot コンタクトのプロパティ情報

今回、問い合わせフォームから登録されるコンタクトのプロパティは下記を選んでいます。

名前内部名
lastname
firstname
Eメールemail
会社名company

プロパティの名前や内部名はHubSpotの[設定]、[プロパティ]より確認できます。

h1

お問い合わせフォームを用意する

今回お問い合わせフォームはWordPressのContact Form 7を利用して作成しています。

HubSpotのコンタクトとフォームをマッピングさせるには、HTML inputタグのname属性にプロパティ内部名を設定する必要があります。

利用するContact Form 7では下記のように設定しています。

<label> 姓 (必須)
    [text* lastname] </label>

<label> 名 (必須)
    [text* firstname] </label>

<label> メールアドレス (必須)
    [email* email] </label>

<label> 会社名
    [text* company] </label>

<label> お問い合わせ内容
    [textarea message] </label>

[submit "送信"]

HubSpot側で管理されるフォームIDは、HTML form要素のidやclass属性を元に生成されます。

フォームIDを管理できるようform要素のidやclassは任意の値を設定したほうがよいでしょう。

Contact Form 7では下記のような内容で固定ページに設定します。

エラー: コンタクトフォームが見つかりません。

お問い合わせフォームへ登録

お問合せフォームが用意できたので下記の内容を入力し登録します。

w1

非 HubSpotフォームとコンタクト登録の確認

フォームより登録後、下記のようにHubSpot フォーム一覧にHubSpot以外のフォームとして登録されているはずです。

h2

下記のようにコンタクトにお問合せフォームで入力した内容が登録されていれば成功です。

h3

さいごに

HubSpotの非 HubSpot フォーム機能を使用してコンタクトを登録する方法いかがでしたでしょうか。

今回の操作範囲であればHubSpotの機能は無料で利用できる為、顧客管理に活用できるのではないでしょうか。

最後までご覧頂きありがとうございます。

SNSでもご購読できます。