目次
目次
HubSpotとは何ですか？
HubSpotはマーケティング、営業、サービスツールを統合したCRMデータベースに接続するプラットフォームです。このプラットフォームが提供するリードフォームをFramerサイトに直接埋め込めば、ユーザーの入力がHubSpotアカウントに直接送信され、便利にリードを管理することができます。
HubSpotフォームIDを見つける
まず、HubSpotフォームをFramerと接続するにはportal Idとform Idという2つの固有の識別子が必要です。
HubSpotで既存のフォームを開くか新しいフォームを作成してください。
フォームエディタの右上で
Embedボタンをクリックしてください。表示されるモーダルにEmbedコードが表示され、その中から
portal Idとform Idの値をコピーできます。
FramerでHubSpotコンポーネントを追加する
フォームIDが準備できたら、Framerプロジェクトに切り替えてHubSpotコンポーネントを追加してください。FramerではHubSpotフォーム専用のコンポーネントを提供しているので、視覚的に調和するように配置し、その後管理することができます。
Framerプロジェクトを開いてください。
左のInsertパネルで下にスクロールしてFormsセクションを探してください。
HubSpotコンポーネントを選択し、キャンバスにドラッグ＆ドロップしてください。
HubSpotフォームを接続する
キャンバスに移したコンポーネントを選択し、先ほどコピーしたIDをHubSpotフォームと接続する必要があります。
ページでHubSpotコンポーネントを選択してください。
右のパネルで
portal Idおよびform Idフィールドを探してください。そのフィールドに値を貼り付けてフォームを接続すれば完了です。
HubSpotでフォームデザインを管理する
Framerにフォームを配置することはできますが、フォームのデザインや機能設定はHubSpotで修正する必要があります。HubSpotのフォームエディタを使って、フィールド、スタイル、動作を調整できます。これらを適切に調整して、フォームのデザインと感触をブランドのムードに一致させると良いでしょう。
公開前の確認
フォームを追加しIDを接続したら、実際に正しく動作しているかテストしてください。これを公開する前に、以下の項目が正しく表示されているか確認することをお勧めします。すべての事項を確認した後、準備ができたらPublishを押してサイトを公開してください。すると、訪問者から送信された情報がすぐにHubSpotに伝達され、収集されます。
Previewモードで開いて、レイアウトと機能動作を確認する
入力後に正常に処理されるか確認する
Framerより提供されるネイティブフォーム
HubSpotの代わりにFramerに組み込まれているフォームシステムを利用することもできます。Framerフォームは以下のような機能を基本的に提供します。
様々な使用例に合わせて10種類以上の多様な入力タイプ
UX改善のためのインタラクティブフォーム（例：成功、エラー、ロード中など）のUI設定が可能
メール、Google Sheets、Webhookなど様々な送信方法を選択可能
セキュリティ強化のためのスパム防止およびRate Limiting機能が標準装備
Note: Framerで提供されるネイティブフォームを設定する方法についてのステップは該当ガイドをご確認ください。
HubSpotフォームが役立つ状況
HubSpotフォームをFramerサイトに統合すると、コミュニケーションを簡素化し、インサイトを収集し、データをより効果的に整理するのに役立ちます。最もよく活用されるいくつかのケースは次の通りです。
お問い合わせフォーム: 「お問い合わせ」フォームを挿入して、ユーザーがチームに連絡できるようにしてください。Placeholderテキストを利用すると、訪問者が関連情報を入力する際に役立ちます。
サポートリクエストフォーム: 構造化されたHubSpotフォームを通じてサポートの課題をルーティングし、集中管理します。
フィードバック収集フォーム: 製品についての意見やアイデアを集め、ユーザーをよりよく理解した後、これらのデータを用いて新機能や変更の優先順位を決定するのに役立てます。
問題が発生した場合や接続ができない場合は、FramerContactページでサポートチームにお問い合わせください。
よくある質問(FAQ)
Q. FramerでHubSpotフォームのすべてのデザインを直接変更できますか？
いいえ。HubSpotフォームのデザインはHubSpot内部でしか変更できず、Framerでは位置/サイズ/レイアウトだけを調整できます。
Q. 1つのFramerページに複数のHubSpotフォームを入れることはできますか？
はい。
portal Id/form Idがそれぞれ異なるフォームであれば、複数追加しても問題ありません。
Q. HubSpotでフォームの内容を変更した場合、Framerで再接続する必要がありますか？
いいえ。HubSpotでフィールドやテキストを変更しても、同じ
portal Id/form Idを持っていればFramerで自動的に最新の構造を読み込みます。
本記事はFramer公式ブログの‘Adding HubSpot forms to your site’を翻訳・アレンジしたコンテンツです。
