Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでHubSpotフォームを作成する方法(2つの簡単な方法)

HubSpotは、ビジネスの成長を支援するために設計された、オールインワンのマーケティングおよびCRMプラットフォームです。HubSpotのフォームビルダーを使えば、サイト訪問者を適格なリードに変換し、顧客情報を収集し、エンゲージメントを促進することができます。

テストサイトでHubSpotを使って様々なフォームを作成することで、その有効性、ユーザーフレンドリーなインターフェース、パワフルな機能を肌で感じることができました。

この投稿では、WordPressでHubSpotフォームを作成する方法をご紹介します。ステップバイステップの説明は初心者に優しく、コーディングの知識は必須ではありません。

How to Create a HubSpot Form in WordPress

なぜHubSpotでフォームを作成するのですか?

HubSpotは、企業の成長を支援するマーケティング&セールスプラットフォームです。カスタマリレーションシップマネージャー(CRM)、コンテンツ管理システム(CMS)、ビルトインメールマーケティング、リードジェネレーションなど数多くのツールが搭載されています。

また、強力なWordPress フォームビルダーを備えており、WordPress とシームレスに統合して、手間のかからないフォームを作成できます。他のフォームビルダーと同様、専門知識がなくても簡単にサイト用のカスタムフォームを作成することができます。

すでにHubSpotのCRMアプリをお使いなら、フォームに入力した訪問者は自動的にデータベースに追加されます。これにより、メールキャンペーンやパーソナライズされたメッセージで訪問者を育成することができます。

このフォームビルダーはドラッグアンドドロップの簡単なビルダーで、コードを一行も書くことなくインタラクティブなフォームを作成することが有効化され、最高のお問い合わせフォームプラグインの一つとなっています。

また、HubSpotはWPFormsや Formidable Formsなど他のフォームツールとも簡単に統合できることを覚えておいてください。HubSpotはとても人気のあるソフトウェアです。メールマーケティングサービス、マーケティングオートメーションソフトウェア、その他のシステムなど、あらゆる中小企業向けツールと接続できる可能性があります。

それでは、WordPressでHubSpotフォームを作成する方法を見てみましょう:

方法1:HubSpotプラグインを使ってHubSpotフォームを作成する

HubSpotプラグインを使えば、WordPressサイトにHubSpotフォームを簡単に作成できます。

まず、HubSpotプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。

プラグインを有効化すると、WordPress管理画面のサイドバーに新しいメニュー項目が追加されます。HubSpotをクリックすると、セットアップウィザードが表示され、HubSpotアカウントをまだお持ちでない場合は作成することができます。

アカウントをお持ちの方は、上部にある「サインインはこちら」のリンクをクリックしてください。

hubspot dashboard

HubSpotログイン」ポップアップが表示されます。

ユーザー名とパスワードを入力し、「ログイン」ボタンをクリックしてください。

hubspot login

ログイン後、HubSpotは今ログインしたアカウントで継続するかどうかを尋ねます。

このアカウントで続ける」ボタンをクリックしてください。

continue with this account hubspot

次に、HubSpotアカウントとWordPressサイトを接続するよう求められます。

サイト接続」ボタンをクリックしてください。

connect website to hubspot

WordPressサイトとHubSpotアカウントを接続したら、WordPressの管理ダッシュボードから HubSpot ” Formsにアクセスします。

フォーム」ページに移動します。右上の「フリーフォームを作成」ボタンをクリックしてください。

create a free form hubspot

次に、フォームの種類を選択し、上部にある「次へ」ボタンをクリックします。

このチュートリアルでは、「埋め込みフォーム」を作成します。

Choose a form type

その後、HubSpotテンプレートライブラリに移動します。

登録」や「お問い合わせ」など、お好きなテンプレートをお選びください。そして、上部にある「開始」ボタンをクリックするだけです。

Choose a form template

フォームエディターに入ったら、左側のフィールドを右側のプレビューにドラッグ&ドロップすることで、あらかじめ用意されているフォームテンプレートを編集することができます。

カスタマイザーが完了したら、上部にある「送信」ボタンをクリックしてください。

Create a form and click Submit button

これで「レビューして公開する」ポップアップが開きます。

下にスクロールして「公開する」ボタンをクリックするだけです。

Click Submit button

その後、画面にポップアップが表示されます。これは埋め込みフォームなので、ショートコードがプロバイダーとして提供されます。

ショートコードの横にある「コピー」ボタンをクリックする。

Copy the shortcode

このコードをHubSpotフォームを追加したいページに埋め込むことができます。詳しくは、WordPressでショートコードを追加する方法をご覧ください。

方法2: WPFormsを使ってHubSpotフォームを作成する

WPFormsにはHubSpot統合アドオンが付属しています。WPFormsは600万以上の有効化したインストールを持つ、最も人気のあるドラッグアンドドロップWordPressフォームビルダーです。

注:HubSpotアドオンにアクセスするには、少なくともエリートプランが必要です。

最初に行う必要があるのは、WPFormsプラグインをインストールして有効化することです。WordPressプラグインのインストール方法の詳細ガイドをご覧ください。

有効化したら、管理ダッシュボードからWPForms ” Addonsに移動します。これで’WPForms Addons’ページに移動します。

HubSpotアドオンを探し、「今すぐアップグレード」ボタンをクリックするだけです。

Click Upgrade Now button below HubSpot addon

WPFormsアカウント」ページに移動します。ここで「HubSpot Addon」までスクロールし、ダウンロードボタンをクリックします。

その後、プラグインをインストールして有効化したのと同じ方法で、HubSpotアドオンをインストールして有効化できます。

Click Download HubSpot button

次に、WordPressダッシュボードからWPForms ” Settingsに 移動します。次に、’Integrations’タブに向かいます。

統合のリストにHubSpotがあります。矢印アイコンをクリックしてセクションを展開し、「新規アカウントを追加」ボタンをクリックします。

Choose HubSpot for integration

HubSpotアカウントとの接続を求めるプロンプトが表示されます。HubSpotアカウントのログイン情報を入力します。

アカウントをすでにお持ちでない場合は、こちらから作成できます。

log into your hubspot account

次に、このアカウントを継続するかどうか尋ねられます。

このアカウントで続ける」ボタンをクリックしてください。

Click Continue With This Account

その後、WPFormsとHubSpotを接続するためのポップアップが表示されます。

ページ下部の「Connect App」ボタンをクリックします。

connect wpforms and hubspot

WordPressダッシュボードで、「Integrations」画面に戻ります。

HubSpotセクションの横に「Connected」と表示されているはずです。

HubSpot marked Connected

ダッシュボードからWPForms ” 新規追加に進み、HubSpotフォームを作成します。

まず、WPFormsテンプレートライブラリからフォームテンプレートを選択します。

Select a template for yourself from the WPForms template library

その後、WPFormsインターフェースに移動し、そこでフォームテンプレートを編集することができます。

左側のメニューバーにある「Marketing」オプションをクリックします。統合のリストから「HubSpot」を選択します。

画面にHubSpotのポップアップが表示されます。上部にある「新規接続を追加」ボタンをクリックします。

Click Add New Connection button

WPFormsは接続用のニックネームの入力を求めるプロンプトを表示するようになりました。

この名前は、あなた以外の誰にも見られませんので、自由に選んでください。終わったら「OK」ボタンをクリックしてください。

Choose a nickname of your liking

WPFormsはHubSpotアカウントを選択し、実行するアクションを選択するよう求めます。アカウントを選択」フィールドからアカウントを選択するだけです。

次に、「Action to Perform(実行するアクション)」フィールドから「Create/Update Contact(連絡先の作成/更新)」オプションを選択します。

add action to perform in hubspot

このオプションを選択すると、フォーム内に様々な新しい設定が表示されます。

これらのフィールドを適宜入力します。リードジェネレータフォームからHubSpotにお問い合わせフォームを送信したいので、「Create/Update Contact」オプションを選択します。

見込み客の名前、メール、リードの状態など、これらのフィールドはすべてHubSpotデータベースで更新されます。

fill in form fields

次に、フォームビルダーでフォームをカスタマイズします。

左側のフィールドを右側のライブプレビューにドラッグ&ドロップするだけです。

Form in form builder

HubSpotアカウントに収集・整理したい情報を追加できます。

満足したら、フォームビルダーの上部にある「埋め込み」ボタンをクリックします。

embed hubspot form

ページに埋め込む]プロンプトが表示されます。

新規ページにHubSpotフォームを埋め込む場合は、「新規ページを作成」オプションをクリックします。

既存のページにフォームを埋め込むには、「既存のページを選択」オプションをクリックします。

Select existing page option

その後、表示されるドロップダウンから適切なページを選択するだけです。

さあ、”Let’s Go “ボタンをクリックしてください。

Click Let's Go button

ドロップダウンメニューから選択したページに自動的に移動します。そこにはすでにHubSpotフォームが埋め込まれています。

コンテンツエディターの上部にある’公開’ボタンをクリックするだけで、新しいフォームが公開されます。

Click Publish button after embedding the form

以上です!WordPress で HubSpot フォームを作成する方法をご理解いただけたでしょうか?WordPress フォームの究極ガイドContact Form 7 と WPForms の比較も参考にして、あなたのサイトに最適な設定を見つけてください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。