STUDIOにHubspotのフォームを設置して、リダイレクトでお問い合わせ完了ページに誘導する際の設定方法と注意点

弊社のWebサイトはノーコードWeb制作ツールの「STUDIO」で構築しており、お問い合わせフォームはCRMプラットフォームを提供する「Hubspot」のフォームを利用しています。

本記事では同様のツールを利用し、一連のお問い合わせフォームを構築したいと考えている方に向けて、弊社の例をもとに解説します。

はじめに

まずはじめに、STUDIOにはすでにフォーム機能があります。フォームの設置は非常に簡単ですし、送信された顧客情報をスプレッドシートで管理する連携機能、Webサイトを不正や悪用から守るためのreCAPTCHAとの連携が可能など、基本的なフォームとしてはすでに十分な機能を備えています。

ただし弊社のように、顧客情報をCRMツール（今回の場合はHubspot）で管理したい場合は、STUDIO内にHubspotのフォーム設置が必要です。

最終的に完成するもの

1. STUDIOで構築したページ上で、お問い合わせ内容を入力できるHubspotのフォーム
2. 送信後お問い合わせ完了ページにリダイレクトされる仕組み

必要なものは2つ

必要なものとしては以下の2点です。いずれも無料プラン内で利用を開始できますし、有料プランにアップグレードしたとしても継続して利用ができます。

• STUDIOのいずれかのプラン（本記事執筆時点ではすべてのプランで利用可能）
• Hubspotのいずれかのプラン（本記事執筆時点では無料の基礎ツールとして全ユーザーが利用可能）

構築の手順

最初にSTUDIO上でお問い合わせページを構築します。弊社の場合は、以下のようなページになっており、画像右側（グレー背景箇所）にフォームが設置されます。

この時は一旦、STUDIO上でボックスを作っておく程度で構いません。後からフォームのサイズに合わせてボックスの大きさを調整すればいいので、まずはフォームが入るボックスのみ用意しましょう。

次にHubspotを開き、マーケティングツールから「フォーム（下画像赤枠）」を選択します。

下画像右上（赤枠）の「無料フォームを作成」より、フォームを作成します。次ページでフォームのタイプを選択することができますが、お問い合わせページ内に埋め込む予定のため「埋め込みフォーム」を選択しましょう。

フォームを構築する際に、下画像のような画面が表示されます。お問い合わせ項目の入力などをひと通り済ませたら、下画像右上（赤枠）の「埋め込み」をクリックしましょう。

次に下画像のようなポップアップが表示されるため、「埋め込みコード」を選択し、「コピー」をクリックしてコードをコピーしましょう。このコードは後ほど使用するため、コードをどこかにコピーしておくか、このタブを開いたまま次のステップに進んでください。

次にSTUDIOのエディタに戻ります。対象のボックスを選択し（赤点線枠）、下画像右側のボタン（赤枠）をクリックします。

画面右側にタブが表示されるので、項目「タイプ」より「Hubspot」を選択しましょう。

同じタブ内の「埋め込みコード（下画像赤枠）」に先程Hubspot上でコピーしたコードを貼り付けます。

埋め込みコードを貼り付けると、フォームを設置予定だったボックスに、Hubspotのフォームが表示されます。（下画像参照）

以上でひと通りのフォーム設置は完了です。

弊社の場合はこの後、Hubspot上のリダイレクト設定をおこなっております。お問い合わせ完了ページに遷移するようになっているため、以降ではその設定方法を解説します。

Hubspotのフォーム編集画面に「オプション（下画像赤枠）」というボタンがあります。そちらをクリックするとサンキューメッセージまたはページリダイレクトのオプションを設定できます。

上画像で設定したようにサンキューメッセージを表示させる場合、お問い合わせ完了後は下画像（赤枠）のようにメッセージが表示されます。

弊社の場合は、お問い合わせ完了ページにリダイレクトさせたいため、Hubspotのフォーム編集ページより「オプション」→「別のページにリダイレクト」を選択し、対象となるページURL（お問い合わせ完了ページのURL）を入力しています。

以上でリダイレクトの設定は完了です。あとはWebサイト上から改めてフォームの動作確認テストを行なっていただき、正しくリダイレクトされていれば終了です。

注意点

この作業をするにあたって、最後に確認しておきたい注意点があります。

• Hubspotのフォームは項目やフォームの内容が変わったら更新が必要です。公開時のフォームが最も新しい内容になっているか確認しましょう。
• 作業はPCで行うと思われますが、お客さまによってはスマートフォンでフォームを利用される方もいらっしゃるはずです。必ずスマートフォン（また別端末や別ブラウザでも）上でも見え方や入力のしやすさを確認するようにしましょう。
• お問い合わせが完了した方に向けて自動でフォローアップメールが送信されるようにしましょう。Hubspotのフォーム編集画面から設定が可能です。

さいごに

顧客情報を個別で管理する必要がない場合は、原則STUDIOのフォームを使うのが最も楽で便利なはずです。ですがあえてCRMツールに顧客情報を取り込みたい場合、Hubspotを使うと上述のような設定が必要になります。

また同様の仕組みで、メルマガ登録フォームから登録完了後にサンクスページを表示させる、といったことも可能です。是非一度試してみてください。

関連記事：メルマガの開封率を高める10のポイント！開封率を高める件名作成のアイデアもご紹介