この記事でわかること
HubSpot のフォームと Jicoo を連携するための準備
HubSpot 側と Jicoo 側それぞれの設定手順
連携できる埋め込み方法と、できない埋め込み方法
外部フォームのインポート全般については外部フォームのインポートとはをご覧ください。
連携できる条件
新しい形式の埋め込みコードが必要です
Jicoo は、HubSpot が送信完了時に発行する通知を受け取ってルーティングを実行します。この通知は新しい形式の埋め込みコードでのみ発行されます。
埋め込みコードに v2.js や hbspt.forms.create が含まれている場合は従来の形式です。この場合は送信を検知できないため、HubSpot のフォーム編集画面で新しい形式の埋め込みコードを取得し直してください。
フォームを表示するページに、Jicoo のコードを設置できる必要があります
Jicoo は、フォームが表示されているページ上で動作するコードを通じて送信を検知します。そのため、そのページにコードを追加できることが前提になります。
自社サイトのページに埋め込む … ご利用いただけます
HubSpot のランディングページ / ウェブサイトページに埋め込む … ページ設定でコードを追加できる場合にご利用いただけます
共有リンク（フォーム単体のページ） … ご利用いただけません。コードを追加する手段がないためです
※ HubSpot のページにコードを追加できるかどうかは、ご契約中の HubSpot のプランによって異なります。設定できない場合は、自社サイトのページに埋め込む方法をご検討ください。
Jicoo 側の条件
Business プラン以上のご契約が必要です
外部フォームの作成は、チーム内の権限が「オーナー」「管理者」「メンバー」の方が行えます
ご利用開始にあたっては、事前にご相談ください
HubSpot 側の設定
1. フォームを作成する
マーケティングのフォーム作成から、埋め込みフォームを作成します。デモや検証であれば、次のような項目構成が分かりやすいです。
メールアドレス
氏名
会社名
お問い合わせ内容（ラジオボタンなどの選択式）
「お問い合わせ内容」のような選択式の項目を 1 つ入れておくと、回答に応じた振り分けを設定できます。
2. プロパティーの内部名は半角英数字で設定する
選択式の項目を作成するときは、CRM のプロパティーに接続する必要があります。フィールドの編集パネルに「接続されていません」と表示されている場合は、「新規プロパティーを作成」から作成してください。
このとき、プロパティーラベルが日本語のみだと内部名が自動生成されず、作成ボタンを押せません。「内部名を編集」から、inquiry_type のように半角英数字で入力してください。
3. 選択肢の内部値を分かりやすい値に変更する
選択肢の内部値も、日本語ラベルからは自動生成できないため、2yWP_B7CqLOsyIjVcTjz のようなランダムな文字列が入ります。
このままでも動作しますが、Jicoo のルーティング設定画面にこの文字列がそのまま表示されるため、設定しづらくなります。選択肢の右側の欄を、ラベルと同じ日本語（または意味の分かる半角英数字）に書き換えておくことをおすすめします。
4. 氏名を 1 つの項目にまとめる（任意）
HubSpot の「名」「姓」を分けたままにすると、日程調整の入力欄には「名」だけが引き継がれます。姓名をまとめて引き継ぎたい場合は、HubSpot 側で氏名を 1 つの項目にまとめてください。詳しくは記事末尾の「制限事項」をご覧ください。
5. フォームを公開し、埋め込みコードを取得する
フォームを公開し、「共有」から埋め込みコードを取得します。
6. フォームを設置したページを公開する
取得した埋め込みコードを、フォームを表示したいページに設置して公開します。HubSpot のランディングページを使う場合も、この時点で公開まで進めてください。
公開したページの URL を控えてください。次の手順で Jicoo に登録します。
Jicoo 側の設定
1. HubSpot 用の作成画面を開く
管理画面の「ルーティング」から「フォームを追加」→「他サービスからインポート」→「作成する」と進み、「HubSpot」の「作成する」を選びます。
※ ご案内のダイアログが表示されて先に進めない場合は、画面右下のチャットからご相談ください。
2. フォーム項目を設定する
「フォームURL」に、フォームを設置したページの URL を入力して「読み込む」を押します。この操作を行わないと、項目を追加できません。
HubSpot のフォームは自動で読み取れないことがあります。「項目を検知できませんでした」と表示されても問題ありません。「項目を追加する」から手動で追加してください。
各項目には、次を設定します。
表示ラベル … Jicoo 上で識別するための名前です。任意の文字列で構いません
項目タイプ … 元のフォームに合わせて選びます。メールアドレスは「メールアドレス」、氏名は「名前」、選択式は「単一選択」を選んでください
データの取り込み条件 … 「HTML属性のキー」は
nameを選び、「値」に HubSpot の内部名を入力します
選択式の項目には、「選択肢」に HubSpot で設定した内部値を 1 行に 1 つずつ入力します。
HubSpot の内部名を確認する方法
内部名は、HubSpot のフォーム編集画面で対象のフィールドを選び、右側のパネルから確認できます。
実際に送信される値をそのまま確認したい場合は、フォームを設置したページをブラウザで開き、開発者ツールのコンソールで次の 1 行を実行してからフォームを送信してください。送信された項目名と値が一覧で表示されます。
window.addEventListener('hs-form-event:on-submission:success', async (e) => console.log(await window.HubSpotFormsV4.getFormFromEvent(e).getFormFieldValues()));
※ 項目名が 0-1/email のような形式で表示されることがあります。Jicoo にはこの形式のまま入力しても、email のように短縮した形で入力しても、どちらでも動作します。
3. ルーティングを設定する
回答内容に応じたアクションを設定します。
条件指定ルート … 「お問い合わせ内容」が特定の選択肢と等しいときの遷移先を設定します
遷移先 … 「予約ページ」を選び、表示方法で「ポップアップ」または「リダイレクト」を指定します
上記に当てはまらない場合 … 予約に進めたくない回答は「ルーティングしない」のままにします
ルートを追加した直後の遷移先は「ルーティングしない」が選ばれています。変更しないと送信後に何も起こりませんので、必ず遷移先をお選びください。
※ HubSpot 連携では「実行タイミング」の設定は使用されません。HubSpot の送信完了通知を受け取った時点でルーティングが実行されます。どちらを選んでも動作は変わりません。
4. 埋め込み用コードを取得する
発行されたコードをコピーします。表示されているものを書き換えずに、そのままコピーしてください。アドレスの一部を手で入力し直すと動作しません。
※ HubSpot 連携では、サンクスページへのコード設置は不要です。フォームを表示しているページのみで完結します。
コードを設置して公開する
コピーしたコードを、フォームを設置したページに追加します。
HubSpot のページに設置する場合
ページ編集画面の「設定」から「詳細」を開き、「追加のコードスニペット」の「HeadのHTML」に貼り付けます。
保存したあと、必ずページを再公開してください。編集画面右上の「更新」を押すまで、公開中のページには反映されません。設定を保存しただけでは動作しないため、うまく動かないときはまずここをご確認ください。
自社サイトのページに設置する場合
HubSpot の埋め込みコードと同じページに追加します。<head> 内でも、フォームより後ろでも動作します。
動作を確認する
公開したページを開き、予約ページへ進む条件に合う選択肢を選んで、実際にフォームを送信してください。
条件に一致する回答 … 送信後に日程調整の画面が表示されます
条件に一致しない回答 … HubSpot の完了画面がそのまま表示されます
日程調整の画面で、メールアドレスと氏名があらかじめ入力されていることもあわせてご確認ください。
設定が正しくない場合でも、フォームの送信自体は成功し、画面にエラーは表示されません。本番でご利用になる前に、必ずテスト送信での確認をお願いします。
うまく動かないときは
ページを再公開したか確認する
HubSpot のページに設置した場合、設定を保存しただけでは反映されません。「更新」を押して再公開してくださいURL が一致しているか確認する
Jicoo に登録したフォーム URL と、実際にコードを設置したページの URL を、https/httpの別とwwwの有無まで含めて見比べてください埋め込みコードの形式を確認する
HubSpot の埋め込みコードにv2.jsやhbspt.forms.createが含まれていないか確認してください取り込み条件を確認する
「値」に入力した内容が、HubSpot の内部名と一致しているか確認してください選択肢を確認する
ルーティングの条件に使っている選択肢が、HubSpot 側の内部値と一致しているか確認してくださいフォームが有効になっているか確認する
Jicoo 側でフォームを無効にしていると、送信を受け付けません
それでも解決しない場合は、次の情報を添えて Jicoo サポート までお問い合わせください。
フォームを設置したページの URL
設定している遷移先と条件
テスト送信を行った日時
ブラウザの開発者ツールのコンソールに表示されている
[Jicoo]で始まるメッセージ
制限事項
姓と名を分けたまま引き継ぐことはできません
HubSpot の「名」「姓」を別々の項目のままにした場合、日程調整の入力欄に引き継がれるのは「名」だけです。予約ページ側の氏名欄を姓・名に分けている場合でも、この動作は変わりません。
姓名をまとめて引き継ぎたい場合は、HubSpot 側のフォームで氏名を 1 つの項目にまとめ、Jicoo 側でも項目タイプ「名前」の 1 項目として設定してください。
自動で引き継がれる項目は決まっています
日程調整の入力欄へ自動で引き継がれるのは、項目タイプが「名前」「メールアドレス」「電話番号」の項目です。
会社名やお問い合わせ内容、予約ページ独自の質問へ値を引き継ぎたい場合は、外部フォームの編集画面にある「フォーム項目の紐づけ」で対応づけてください。紐づけは予約ページごとに設定します。
※ 1 つの入力欄に複数の項目を割り当てることはできません。
登録できるフォーム URL は 1 つです
検証用と本番用でページを分ける場合は、それぞれ別の外部フォームを作成してください。同じ埋め込みコードを複数のドメインで使い回すことはできません。