セミナーや資料請求、無料診断と、マーケティングの施策が増えるたびに、申込を受ける入口も増えていきます。入口ごとに見た目を変えたい、申込の後の変更やキャンセルまで受けたい。そうした要望が出てきたとき、フォームをHubSpotの中だけで完結させようとすると、どこかで開発者の手を借りる場面にぶつかります。

この記事では、申込フォームはLovableで作り、申込のデータはHubSpotに入れて追いかけるという分け方を取り上げます。受付の作り込みと、その後のフォローを切り分ける考え方です。あわせて、HubSpotの外でフォームを作ると何が記録に残らなくなるのか、本番の申込を受ける前に決めておくべき点も整理します。

なぜ申込フォームをHubSpotの外に出すのか？

HubSpotのフォームなら、記録は自動で残る

HubSpotのフォームは、項目を並べて公開すれば、送信された内容がそのままコンタクトレコード（HubSpotで1人ずつ管理する連絡先の記録）に記録されます。送信はフォーム送信として記録され、トラッキングコード（閲覧したページを記録するためにサイトに入れるコード）を設置したページであれば、送信した人がそれまでに見ていたページの履歴もコンタクトに結び付きます。

氏名や会社名、メールアドレスを受け取り、確認メールを送って営業に引き継ぐ。入口の役割がここまでなら、HubSpotのフォームを使うのがいちばんの近道です。記録が自動で残る分、運用の手間も少なく済みます。

見た目についても、フォームの編集画面で色やボタンの形は整えられます。ただし、サイトのデザインにぴったり合わせたい、申込の後の手続きを足したい、となると、開発者の手を借りる場面が出てきます。

Lovableなら、日本語で頼んで申込フォームを作れる

Lovableは、日本語で「こういうものが欲しい」と伝えるだけで、画面から裏側のデータベースまで一括でWebアプリができるAIツールです。ここで取り上げるのは、そのうち社外の方が使う申込フォームを作り、入った申込をHubSpotのコンタクトプロパティーに書き込む使い方です。フォームはHubSpotの外に置き、申込のデータはHubSpotに入ります。

たとえば「セミナーの申込フォームを作って。氏名、メールアドレス、会社名が送信されたら、HubSpotにコンタクトを作成して」と伝えると、入力画面とHubSpotへ送る仕組みがまとめてできあがります。足したいことがあれば、動く画面を見ながら言葉で頼み直します。「ボタンの色と文字の大きさを、自社のサイトに合わせて」と頼めば、その場で画面が変わります。

接続の準備として、HubSpotで発行した鍵をLovableのワークスペースの管理者が登録しておきます。鍵を発行できるのは、HubSpotのスーパー管理者か開発者ツールの権限を持つ人です。

▲ 受付はLovable、フォローはHubSpot。申込フォームに入った申込はHubSpotのコンタクトに書き込まれ、確認メールや営業への引き継ぎはHubSpotの側で行います。

申込の後の手続きまで、1つの仕組みに入れられる

セッションが複数あるセミナーを例に、どこまで広げられるかを見てみます。

1つ目は見た目です。申込フォームを自社のサイトに埋め込み、文字の大きさまでサイトに合わせて、サイトの一部に見えるようにできます。

2つ目は、申込の後に起きる手続きです。次のようなことまで、1つの仕組みに入れられます。

• セッションの残席表示：申込のときに聞きたいセッションを選び、「残りわずか」「満席」をその場で確かめられる
• 変更・キャンセルの受付：申し込んだ後に、受付番号とメールアドレスで、セッションの変更やキャンセルができる
• 当日の受付：QRコードを読み取って出席を記録する。事前に申し込んでいない方も、名刺を撮影してその場で登録できる

最初から全部を作る必要はありません。申込フォームだけで始め、必要になった手続きを言葉で頼んで足していく、という広げ方ができます。

Lovableで受けた申込を、HubSpotでどう追いかけるか？

プロパティーを先に作り、ワークフローのきっかけを変える

HubSpotの側に、選んだセッション、受付番号、変更・キャンセル用のリンクを入れるプロパティー（自社で追加する項目）を先に作っておきます。申込フォームからは、氏名や会社名に加えて、これらをコンタクトにまとめて書き込めます。当日の受付時刻も、受付の後に書き込めます。

確認メール、変更受付のメール、キャンセル受付のメールは、この書き込みをきっかけに、HubSpotのワークフロー（条件に合ったときにメール送信などを自動で行う機能）から送る作りにできます。申込・出席・キャンセルの状況を、HubSpotのマーケティングイベント（セミナーなどの参加状況をまとめる機能）に記録することもできます。なお、ワークフローからのマーケティングメール送信は、Marketing HubのProfessional以上で使えます。

申込の受付は、Lovableの側で動きます。HubSpotの側で変わるのは、ワークフローのきっかけです。登録トリガー：フォームの送信から「受付番号に値がある」に変えます。同じ人が2回目に申し込んだときも動くように、再登録の設定もオンにしておきます。

▲ Lovableの申込フォームから送った申込が、HubSpotのコンタクトになった画面。レコードソースは「連携」になり、選んだセッションと受付番号が入っています。画面のデータは架空のものです。

フォローの仕組みは、施策ごとに作り直さない

メールの文面、リストの条件、営業への引き継ぎは、HubSpotで運用できます。どの施策でも使う項目とワークフローを先に決めておけば、申込フォームを施策ごとに作っても、フォローの仕組みを毎回作り直さずに済みます。

この「先に決めておく」工程は、見た目には地味ですが、入口が増える組織ほど効いてきます。従業員1,000名規模の製造業や情報通信業では、展示会、セミナー、製品別の資料請求と、部門ごとに別々の入口が立ち上がるのが通常です。入口を作るたびにプロパティーの名前と粒度がばらつくと、半年後には同じ意味の項目が複数並び、リストの条件を書くたびにどれが正なのかを確認する作業が発生します。申込フォームを外に出す判断は、見た目や開発速度の話に見えて、実際にはデータの持ち方を決める作業です。入口を増やす前に、全施策で共通して使う項目を決めておくことをおすすめします。

HubSpotの外でフォームを作るとき、何が残らないのか？

決めておく3つの記録

試すだけなら、この節は後回しで構いません。本番の申込を受ける前に、HubSpotのフォームなら自動で残る記録のうち、次の3つの残し方を決めておきます。

• どこから作られたか：HubSpotのフォームから作られたコンタクトには、レコードソース（そのコンタクトがどこから作られたかを示す項目）に「フォーム」とフォーム名が入ります。Lovableのフォームから作ったコンタクトは、レコードソースが「連携」になり、どのフォームから来たかは残りません。最初の流入元を示すオリジナルトラフィックソースも「オフラインソース」になります。施策名をプロパティーに書き込んでおくと、後で見分けられます。
• それまでに見ていたページ：Lovableのフォームから作ったコンタクトには、フォーム送信の記録も、それまでに見ていたページの履歴も残りません。Lovableのフォームから、HubSpotのフォームとして送信する方法もあり、開発者に相談するときの選択肢になります。
• メール配信の同意：受け取った同意を、HubSpotのどこに残すかを決めます。申込のときに受け取った同意を、HubSpotのメール配信の設定にも書き込む作りにできます。

公開前に確認すること

社外の方が個人情報を入力するページです。公開前に、接続に使う鍵がブラウザから見えないか、ほかの申込者のデータを取り出せないかを確認します。あわせて、申込がHubSpotに反映されなかったときに気づける仕組みも用意しておきます。この3つの記録とセットで情報システム部門に相談すると、決めることが絞られます。

HubSpot公式のLovableコネクターは、どう位置づけられるか

HubSpotは秋の新機能発表（Fall 2026 Spotlight）で、HubSpot connector for Lovableをパブリックベータとして紹介しています。公式の説明は「Build standalone apps with your HubSpot data in Lovable — no code, no backend, secure from day one. Now in public beta.」というもので、ナレッジベースの記載によれば、アプリが読み取れるのは利用者がHubSpot上ですでに閲覧を許可されているレコードに限られます。アプリを作っても、その人のアクセス権限が広がることはありません。有効化とオプション権限の管理はスーパー管理者が行います。

ここで注意したいのは、公式コネクターと、この記事で扱った使い方は、向いている用途が違うという点です。公式コネクターは、HubSpotにあるデータを社内の人が見る・操作するアプリを作る道具として設計されています。一方、この記事の申込フォームは、HubSpotのアカウントを持たない社外の方が使い、新しいコンタクトを作る入口です。ログインしない相手に使ってもらう画面をどう作るかは、引き続き鍵を発行して接続する形が基本になります。開発者向けの変更履歴を見るかぎり、HubSpotの外で作る画面とHubSpotをつなぐ道具はこれから増えていきそうです。どの道具でつなぐ場合も、先に挙げた3つの記録の残し方は、道具を選ぶ前に決めておけます。

よくある質問

HubSpotのフォームとLovableのフォーム、どちらを使うべきですか？

氏名・会社名・メールアドレスを受け取り、確認メールを送って営業に引き継ぐところまでであれば、HubSpotのフォームが近道です。フォーム送信と閲覧履歴が自動で記録に残り、運用の手間も少なくて済みます。サイトのデザインに完全に合わせたい、変更・キャンセルや当日受付まで1つの仕組みで受けたい、という要望が出てきた段階で、Lovableでの作成を検討する順序をおすすめします。

Lovableのフォームから作ったコンタクトは、流入元が分からなくなりますか？

そのままでは分からなくなります。レコードソースは「連携」、オリジナルトラフィックソースは「オフラインソース」になり、どのフォームから来たかは残りません。対策として、施策名を入れるプロパティーを用意し、申込時に書き込む作りにしておきます。閲覧履歴まで残したい場合は、LovableのフォームからHubSpotのフォームとして送信する方法が選択肢になります。

HubSpot公式のLovableコネクターを使えば、同じことができますか？

用途が異なります。公式コネクターはパブリックベータで提供されており、HubSpotのデータを使うアプリを作れますが、読み取れる範囲は利用者自身のHubSpot権限に準じます。社外の方がログインせずに使う申込フォームを作る用途とは前提が違うため、この記事で扱った鍵を発行して接続する形とは分けて考えてください。

まとめ：受付はLovable、フォローはHubSpot

HubSpotのフォームを作らなくても、申込はHubSpotに入れて追いかけられます。受付はLovableで施策ごとに作り、フォローはHubSpotで回す。申込フォームを施策ごとに専用で用意する、という選び方ができます。

次のセミナーの申込フォームを想定して、まず1つLovableで試してみてください。始めは、氏名とメールアドレスと会社名を受け取り、HubSpotにコンタクトを作るところまでで十分です。試すときは、本番のデータとは別の、テスト用のHubSpotアカウントにつなぐと安心です。

そのうえで、申込の後に起きること（確認メール、変更、当日の受付など）を書き出し、HubSpotで追いかけたいものに印を付けておきます。印を付けたものが、HubSpotに書き込む項目と、ワークフローのきっかけになります。