問い合わせフォームを作ろう
さあ、いよいよ実践です。HubSpotで問い合わせフォームを作って、あなたのサイトに設置してみましょう。
「難しそう…」と思うかもしれませんが、大丈夫。画面の指示に従って進めていけば、初心者の方でも10分程度で完成します。一つひとつ、丁寧に説明していきますね。
ステップ1：HubSpotダッシュボードにログイン
まず、HubSpotにログインします。
HubSpotの公式サイト（https://www.hubspot.jp/）にアクセスします。
右上の「ログイン」ボタンをクリックします。
登録したメールアドレスとパスワードを入力します。
ダッシュボード（管理画面）が表示されます。
ダッシュボードには、たくさんのメニューが並んでいます。最初は「どこから始めればいいの？」と迷うかもしれませんが、今回使うのは「マーケティング」のセクションです。
ステップ2：フォーム作成画面を開く
画面左側のメニューから「マーケティング」をクリックします。メニューが展開されます。
「リードの獲得」にカーソルを合わせます。さらにサブメニューが表示されます。
「フォーム」をクリックします。フォーム一覧画面が開きます。
初めての場合は、まだフォームが何もない状態です。
右上の「フォームを作成」ボタンをクリックします。
すると、フォームのタイプを選ぶ画面が表示されます。
ステップ3：フォームのタイプを選択
HubSpotでは、主に3種類のフォームタイプから選べます。
埋め込みフォーム（Embedded form）
サイトのページ内に、フォームを埋め込むタイプ。最も一般的で、おすすめです。
メリット：
ページと一体化していて自然
訪問者が使いやすい
デザインをサイトに合わせられる
用途：
「お問い合わせページ」に設置
「お申し込みページ」に設置
ブログ記事の最後に設置
ポップアップフォーム（Pop-up form）
訪問者がサイトを閲覧している時に、画面上に小窓（ポップアップ）で表示されるタイプ。
メリット：
目立つので、見逃されにくい
特定の条件で表示できる（例：5秒経過後、スクロールしたら、など）
デメリット：
うざがられることもある
スマホでは邪魔になりやすい
用途：
メルマガ登録を促したい時
限定キャンペーンの告知
離脱しようとする人に最後のアプローチ
スタンドアロンページ（Standalone page）
HubSpotのサーバー上に、フォーム専用のページを作成するタイプ。
メリット：
自分のサイトがなくても使える
広告のランディングページとして使える
デメリット：
URLがHubSpotのドメインになる（例：yourname.hubspotpagebuilder.com）
デザインの自由度が限られる
用途：
広告専用のランディングページ
イベント申し込み専用ページ
初めての方は「埋め込みフォーム」がおすすめです。
今回は、最も一般的な「埋め込みフォーム」で問い合わせフォームを作る手順を説明しますね。
「埋め込みフォーム」を選んで、「次へ」ボタンをクリック。
ステップ4：フォームに名前をつける
フォーム作成画面が開きます。まず、フォームに名前をつけましょう。
例：
「お問い合わせフォーム」
「無料相談申し込みフォーム」
「見積もり依頼フォーム」
この名前は管理用です。訪問者には見えないので、自分がわかりやすい名前をつければOKです。
名前を入力したら、「次へ」をクリック。
ステップ5：フォーム項目（質問項目）を設定する
ここが一番重要なステップです。訪問者に何を入力してもらうか、項目を設定します。
デフォルトで用意されている項目
HubSpotは、最初から「メールアドレス」「名」「姓」の3つの項目を用意してくれています。これだけでも最低限の問い合わせフォームとして機能します。
でも、もう少し情報が欲しいですよね。項目を追加していきましょう。
項目を追加する方法
右側のパネルから「項目を追加」をクリックします。たくさんの項目が表示されます。
よく使う項目：
電話番号：
「電話番号」を探してクリックします。
フォームに追加されます。
会社名：
「会社名」を探してクリックします。
お問い合わせ内容（複数行テキスト）：
「複数行テキスト」を探してクリックします。
項目名を「お問い合わせ内容」に変更できます。
各項目の設定
項目を追加したら、それぞれの項目をクリックすると、詳細設定ができます。
重要な設定項目：
必須フィールド：
チェックを入れると、入力必須になります。
「メールアドレス」「名前」は必須にすることが多い
「電話番号」「会社名」は任意にすることが多い
プレースホルダーテキスト：
入力欄に薄く表示される案内文
例：「例：田中太郎」「例：03-1234-5678」
ヘルプテキスト：
項目の下に表示される補足説明
例：「返信可能な電話番号をご入力ください」
おすすめの項目構成（問い合わせフォーム）
必須項目：
- 姓
- 名
- メールアドレス
- お問い合わせ内容（複数行テキスト）
任意項目：
- 電話番号
- 会社名
このぐらいがちょうど良いバランスです。項目が多すぎると、送信率が下がります。
項目の並び替え
項目の順番を変えたい時は、各項目をドラッグ&ドロップで移動できます。
一般的な順番：
- 姓
- 名
- メールアドレス
- 電話番号
- 会社名
- お問い合わせ内容
ステップ6：送信ボタンの設定
フォームの最後には、送信ボタンが表示されます。このボタンのテキストも変更できます。
デフォルト：「送信」
変更例：
「お問い合わせを送信する」
「無料相談を申し込む」
「見積もりを依頼する」
「送信する」
訪問者が「何が起こるのか」をイメージしやすい言葉を選ぶといいですね。
ステップ7：送信後の設定（とても重要！）
フォームが送信された後、訪問者に何を表示するか。これはとても重要な設定です。
画面上部の「オプション」タブをクリックすると、送信後の設定ができます。
選択肢は2つ：
インラインメッセージを表示（おすすめ）
フォーム送信後、同じページ上に「ありがとうございました」というメッセージを表示する方法。
メリット：
ページ移動がないので、訪問者が混乱しない
シンプルで使いやすい
設定方法：
「インラインサンキューメッセージ」を選択します。
メッセージ欄に感謝のメッセージを入力します。
メッセージの例：
お問い合わせいただき、ありがとうございます。 内容を確認次第、担当者より2営業日以内にご連絡いたします。 しばらくお待ちください。
別のページにリダイレクト
送信後、専用の「ありがとうページ」に移動させる方法。
メリット：
より詳細な情報を伝えられる
「次のステップ」を案内できる
コンバージョン計測がしやすい（Google広告などを使っている場合）
設定方法：
「別のページにリダイレクト」を選択します。
リダイレクト先のURLを入力します（例：https://yoursite.com/thanks/）
ありがとうページに書くこと：
送信完了の感謝
今後の流れ（「2営業日以内にご連絡します」など）
よくある質問へのリンク
他のサービス紹介
初心者の方は、まず「インラインメッセージ」から始めるのがおすすめです。
ステップ8：自動返信メールの設定
フォームを送信してくれた人に、自動で「受付完了メール」を送ることができます。これは設定しておくことを強くおすすめします。
なぜ自動返信が大切か？
訪問者は「ちゃんと送信できたかな？」と不安になります。すぐに受付確認のメールが届けば、安心できますよね。また、「ちゃんと対応してくれる会社だな」という好印象にもつながります。
設定方法：
「オプション」タブ内の「フォロー通知Eメールを送信」をオンにします。
自動返信メールの内容を編集します。
「送信者名」：あなたの名前または会社名
「送信者メールアドレス」：あなたのメールアドレス
「件名」：わかりやすい件名をつける
「本文」：感謝と今後の流れを伝える
件名の例：
【受付完了】お問い合わせありがとうございます – 株式会社○○
本文の例：
{名} 様
この度は、お問い合わせいただきありがとうございます。
以下の内容で、お問い合わせを承りました。 内容を確認の上、担当者より2営業日以内にご連絡いたします。
お問い合わせ内容 {お問い合わせ内容}
しばらくお待ちください。
万が一、3営業日以内に返信がない場合は、 メールが届いていない可能性がございます。 お手数ですが、再度ご連絡いただけますと幸いです。
株式会社○○ 担当：田中
メール：tanaka@example.com
電話：03-1234-5678
ポイント：
波括弧で項目名を書くと、自動で入力内容が挿入されます（例：{名}、{お問い合わせ内容}）
丁寧で温かみのある文章を心がける
返信までの目安期間を明記する
担当者の連絡先を書いておくと安心感が増す
ステップ9：デザインのカスタマイズ
次は、フォームの見た目を整えます。
画面上部の「スタイルとプレビュー」タブをクリック。
カスタマイズできる項目：
フォームのスタイル：
テーマ：HubSpotが用意しているデザインテンプレート
シンプル、モダン、カラフルなど、いくつかから選べます
サイトの雰囲気に合うものを選びましょう
色の設定：
送信ボタンの色：目立つ色がおすすめ（青、緑、オレンジなど）
フォントの色：読みやすい色（通常は黒やグレー）
背景色：通常は白か薄いグレー
フォントの設定：
フォントの種類
文字サイズ
レイアウト：
項目を横並びにするか、縦並びにするか
各項目の間隔
初心者の方へのアドバイス：
デザインにこだわりすぎなくて大丈夫です。最初はデフォルトのスタイルで十分。慣れてきたら、少しずつカスタマイズしていきましょう。
重要なのは、見た目より「使いやすさ」です。
ステップ10：プレビューで確認
デザインが決まったら、実際にどう表示されるか確認しましょう。
画面右側に、プレビュー画面が表示されています。
確認ポイント：
項目が多すぎて、入力が面倒に見えないか？
送信ボタンは目立っているか？
スマホで見た時も使いやすいか？（画面上部で「モバイル」表示に切り替えられます）
必須項目がわかりやすいか？
問題なければ、次に進みます。
ステップ11：フォームを保存して公開
すべての設定が完了したら、フォームを保存します。
右上の「公開」ボタンをクリック。
これで、フォームの作成は完了です！
でも、まだサイトには表示されていません。次のステップで、実際にサイトに設置します。
ステップ12：埋め込みコードを取得
フォームを公開すると、自動的に「埋め込みコード」が表示されます。
表示されない場合は：
フォーム一覧画面に戻ります。
作成したフォームをクリックします。
「共有」タブを選択します。
「埋め込みコード」をクリックします。
すると、HTMLコードが表示されます。
このコード全体を、コピーしてください。
「コピー」ボタンを押すだけで、クリップボードにコピーされます。
ステップ13：サイトへの設置方法
いよいよ、あなたのサイトにフォームを設置します。
サイトの種類によって方法が少し違うので、それぞれ説明しますね。
WordPressの場合
WordPressを使っている方は、とても簡単です。
方法1：HubSpotプラグインを使う（最も簡単・おすすめ）
WordPress管理画面にログインします。
フォームを設置したいページまたは投稿記事を開きます（固定ページ（例：「お問い合わせ」ページ）または投稿記事）。
編集画面で、フォームを表示したい場所にカーソルを合わせます。
ブロックの追加ボタン（＋マーク）をクリックします。
「HubSpot」で検索します。「HubSpot Form」というブロックが表示されます。
「HubSpot Form」ブロックを選択します。
プルダウンメニューから、先ほど作成したフォームを選択します。
プレビューで確認します。
問題なければ「公開」または「更新」ボタンをクリックします。
これだけです！コードを貼り付ける必要もありません。
方法2：カスタムHTMLブロックを使う
HubSpotプラグインを使っていない場合は、この方法でも設置できます。
WordPress管理画面にログインします。
フォームを設置したいページを開きます。
編集画面で、フォームを表示したい場所にカーソルを合わせます。
ブロックの追加ボタン（＋マーク）をクリックします。
「カスタムHTML」で検索します。
「カスタムHTML」ブロックを選択します。
先ほどコピーしたHubSpotの埋め込みコードを貼り付けます。
プレビューで確認します。ブロックの上部に「プレビュー」ボタンがあります。クリックすると、実際のフォームが表示されます。
問題なければ「公開」または「更新」をクリックします。
Wix、Jimdo、STUDIOなどの場合
これらのサイトビルダーでも、基本的な流れは同じです。
Wixの場合：
Wixエディタを開きます。
フォームを設置したいページを選択します。
左側メニューから「追加」→「埋め込み」→「カスタムコード」を選びます。
HubSpotの埋め込みコードを貼り付けます。
サイズを調整します。
保存して公開します。
Jimdoの場合：
Jimdoの編集画面を開きます。
フォームを設置したい場所で「コンテンツを追加」をクリックします。
「その他のコンテンツ＆アドオン」→「ウィジェット / HTML」を選択します。
HubSpotの埋め込みコードを貼り付けます。
保存します。
STUDIOの場合：
STUDIOエディタを開きます。
フォームを設置したいページを選択します。
「埋め込み」要素を追加します。
HubSpotの埋め込みコードを貼り付けます。
公開します。
HTMLサイトの場合
自分でHTMLを書いてサイトを作っている方は：
設置したいページのHTMLファイルを開きます。
フォームを表示したい位置を見つけます（例：<div class="contact-form">の中など）。
HubSpotの埋め込みコードを貼り付けます。
ファイルを保存します。
サーバーにアップロードします。
ステップ14：動作確認（超重要！）
フォームを設置したら、必ず動作確認をしてください。これを怠ると、「お客様が問い合わせしようとしたのに、エラーで送信できなかった」なんて悲劇が起こります。
確認手順：
実際のサイトを開きます（編集画面ではなく、訪問者が見る本番の画面）。
フォームが正しく表示されているか確認します。デザインは崩れていないか。スマホでも見やすいか（スマホで開いて確認）。
実際にテスト送信してみます。自分のメールアドレスで送信します。ダミーの内容でOK（例：「テスト送信です」）。
送信後の表示を確認します。「ありがとうございます」のメッセージが表示されるか。リダイレクト設定した場合、正しいページに移動するか。
自動返信メールが届くか確認します。迷惑メールフォルダもチェックします。メールの内容が正しいか確認します。
HubSpotの管理画面で確認します。HubSpotにログインします。「コンタクト」→「コンタクト」を開きます。送信した情報が登録されているか確認します。
すべて問題なければ、完成です！おめでとうございます！
次は「資料ダウンロードで見込み客情報を集める」
