WordPressサイトにフォームを埋め込もうとしたことがあるなら、見た目ほど簡単ではないことに気づいたかもしれません。Microsoft Forms、Google Forms、その他のサービスからコードを貼り付けても、レイアウトが崩れたり、フォームがまったく機能しなかったりするだけです。
だからこそ、多くのサイト所有者が同じ質問をします。「WordPressにフォームを追加する正しい方法は？」
良いニュースは、適切なツールを使えば、あなたが思うよりもずっと簡単になるということです。
基本的なお問い合わせフォーム、ニュースレター登録、またはより高度なものが必要な場合でも、すぐに機能する初心者向けのソリューションがあります。
このガイドでは、テスト済みの最良の方法をステップバイステップでご紹介します。試行錯誤をスキップして、数分でWordPressフォームを稼働させることができます。✅
WordPressフォームとは何か、そしてなぜ重要なのか？
WordPressフォームは、ウェブサイトで貴重な情報や洞察を収集するためのツールです。訪問者が名前、メールアドレス、フィードバックなどの詳細を入力できます。
フォームには多くのユースケースがあります。
例えば、ユーザーがあなたに連絡できるようにするための問い合わせフォームを作成したり、メールリストを構築したり、意見を収集するためのアンケートを作成したり、イベント登録フォームを作成したりできます。
フォームを予約に使用したり、寄付を収集したりするためにも使用できます。一部の企業では、フォームを使用してカスタマーサポートのリクエストを処理しています。
フォームがないと、訪問者とエンゲージする機会を逃してしまう可能性があります。したがって、WordPress ウェブサイトにフォームを追加することは、あらゆるウェブサイトオーナーにとって賢明な選択です。
WordPress にフォームを埋め込む方法
次のセクションでは、WordPressサイトにフォームを追加するための各ステップを説明します。
特定のフォームタイプに興味がある場合は、リンクをクリックして記事の該当箇所にスキップできます。
- How to Embed WPForms Into Your WordPress Site
- WordPressに寄付フォームを埋め込む方法
- How to Embed HubSpot Forms in WordPress
- WordPressにGoogleフォームを埋め込む方法
- ZohoフォームをWordPressに埋め込む方法
- WordPressにメールサインアップフォームを埋め込む方法
- WordPress に支払いフォームを埋め込む方法
- Formidable FormsをWordPressに埋め込む方法
- WordPress に Gravity Forms を埋め込む方法
- WordPressにMicrosoft Formsを埋め込む方法
- WordPressにHTMLフォームを埋め込む方法
- WordPressフォームの埋め込みに関するよくある質問
- WordPressでのフォーム使用に関する追加リソース
準備はいいですか？始めましょう。
1. WPFormsをWordPressサイトに埋め込む方法
WPForms は、市場で最高の多目的フォームビルダーです。最も人気のあるものの一つでもあり、私たちを含め、600万以上のアクティブユーザーがいます！
WPBeginner では、お問い合わせフォームの作成、年次読者アンケートの実施、サイト移行リクエストの管理にこのプラグインを使用しています。長年信頼できるツールとして利用しており、その機能についてはWPForms の詳細レビューで詳しく説明しています。
このツールを使用すると、2000以上の既製のカスタマイズ可能なテンプレートのいずれかを使用して、必要なフォームを作成できます。
AI を使用してフォームを作成することもできます。WPForms AI にどのようなフォームが必要かを伝えるだけで、ツールが生成してくれます。
お問い合わせフォームに加えて、WPFormsを使用すると、シンプルからより高度なフォームまで簡単に作成できます。たとえば、次のようになります。
WPForms を埋め込む際には、WPForms ブロックまたはショートコードのいずれかを使用できます。
それでは、WPFormsをインストールして有効化し、一緒に試してみましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
次に、WordPressで問い合わせフォームを作成する方法に関するステップバイステップガイドに従うことができます。
WPFormsブロックを使用したWPFormsフォームの埋め込み
フォームの公開準備ができたら、フォームビルダー内の「埋め込み」ボタンをクリックするだけで、WPFormsブロックを使用してフォームをウェブページに追加できます。
これによりポップアップウィンドウが開き、既存のページを選択するか、フォーム用の新しいページを作成できます。
「既存のページを選択」ボタンをクリックすると、WordPress ウェブサイトの利用可能なすべてのページが表示されたドロップダウンメニューが表示されます。「新しいページを作成」をクリックすると、「ページに名前を付ける」フィールドが表示され、入力できます。
ページを選択するか、新しいページに名前を付けたら、「開始！」ボタンをクリックできます。
次に、ページのブロックエディターにリダイレクトされます。
ここから、「+」ボタンをクリックして WPForms ブロックを検索できます。
次に、WPFormsブロックのドロップダウンを開き、埋め込みたいフォームを選択します。
フォームを選択すると、WPForms はそれをコンテンツエディターに読み込みます。
その後、右側のパネルにある「フォーム設定」を調整したくなるかもしれません。
デフォルトでは、WPForms はフォームのタイトルを読み込みません。「フォームタイトル」オプションを有効にしてフォームタイトルを追加し、訪問者に詳細なコンテキストを提供することをお勧めします。フォームの説明を記述した場合も、このオプションをオンにできます。
さらに良いことに、サイト全体のルック＆フィールに合わせて、テーマでフォームをスタイル設定できます。
フォームの外観に満足したら、「保存」をクリックしてください。
これで、WPFormsブロックを使用してWPFormsを埋め込むことができます。
ショートコードを使用したWPFormsフォームの埋め込み
WPForms を埋め込むもう 1 つの方法は、ショートコードを使用することです。
これを行うには、WPForms » All Forms に移動して、各フォームの「ショートコード」列を見つけます。
ここから、埋め込みたいフォームのショートコードをコピーするだけです。たとえば、「顧客レビュー」フォームのショートコードをコピーします。
次のステップは、フォームを埋め込みたい投稿またはページを開くことです。これを行うには、「ページ」または「投稿」に移動します。次に、いずれかにカーソルを合わせ、「編集」が表示されたらクリックします。
これにより、ページまたは投稿のエディターに移動します。
フォームを埋め込むには、「+」ボタンをクリックして「ショートコード」ブロックを検索します。
ブロックを追加したら、WPFormsフォームのショートコードをテキストフィールドに貼り付けることができます。
このようになります：
ブロックエディターでは、ライブ編集エリアにフォームは読み込まれません。
それでは、まず変更を保存してから、左下隅に表示される「ページを表示」ボタンをクリックしてください。
💡 数分で完璧なフォームを作成する準備はできましたか？ 600万人以上のウェブサイトオーナーがWPFormsを使用して、よりスマートなフォームとアンケートを作成しています。
今すぐWPFormsを使い始めましょう – コーディング不要！
2. WordPressに寄付フォームを埋め込む方法
ウェブサイトに寄付フォームを追加すると、人々があなたの目的を支援しやすくなります。明確で簡単な方法があれば、訪問者は寄付する可能性が高くなります。
WordPressに寄付フォームを埋め込む最も簡単な方法は、Charitableプラグインを使用することです。これはWordPress向けの最高の寄付プラグインであり、100以上の既製テンプレートを使用して複数の募金キャンペーンを作成・カスタマイズできます。
Balkhi Foundationでは、すべてのオンライン募金キャンペーンの管理にCharitableを利用しています。非常に信頼性が高く、支援者にとって寄付プロセスをシンプルにしてくれます。
詳細については、Charitableのレビューをご覧ください。
まず、寄付フォームを作成するために Charitable をインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法 のガイドを参照してください。
アクティベートしたら、Charitable » Settingsに移動してProライセンスをアクティベートしましょう。ライセンスキーを貼り付けて「キーの検証」をクリックするだけで、プロセスを開始できます。
これで、寄付フォームを作成する準備が整いました。詳細な手順については、WordPress で定期的な寄付フォームを作成する方法に関するガイドをお読みください。
フォームの外観に満足したら、WordPressの投稿またはページに埋め込むことができます。
次に、「公開」をクリックします。Charitableは自動的に専用のキャンペーンページを作成します。このページは募金活動のメインハブとして機能します（ただし、後述の手順でホームページなどの他のページにフォームを埋め込むこともできます）。
これで完了です。最初のCharitableキャンペーンを作成し、公開しました。
さて、あなたのウェブサイトにアクセスすると、募金フォームが実際に動作しているのを確認できます。
とはいえ、「埋め込みウィザード」リンクがポップアップウィンドウに表示されたり、「埋め込み」ボタンがCharitableエディタに表示されたりすることに気づくかもしれません。
これらのいずれかの機能を使用して、寄付フォームを他の投稿やページに追加することもできます。
これを行うには、単に「埋め込みウィザード」リンクまたは「埋め込み」ボタンをクリックするだけで、埋め込みプロンプトがトリガーされます。
表示されるポップアップで、既存のページを選択するか新しいページを作成するかを選択する必要があります。
既存の寄付フォームページがあるので、「既存のページを選択」を選ぶのが良いでしょう。そのままボタンをクリックしてください。
次に、WordPress サイト内のすべてのページの一覧が表示されたドロップダウンが表示されます。
ドロップダウンメニューを展開し、ページを選択して、「開始」ボタンをクリックします。
これにより、ページのブロックエディターにリダイレクトされます。
ここから、「+」ボタンをクリックして「Charitable Campaign」ブロックを検索します。次に、検索結果をクリックしてコンテンツエディターに追加するだけです。
その後、「チャリタブルキャンペーン」ブロックのドロップダウンから、埋め込みたい寄付フォームを選択できるようになります。
ドロップダウンメニューを展開し、追加したいキャンペーンをクリックするだけです。
コンテンツエディターでプレビューが表示されない場合でも心配しないでください。ブロックは正常に機能します。
それでは、「保存」、「更新」、または「公開」ボタンをクリックして、ライブにします。
これで完了です。ページにアクセスして、寄付フォームが機能していることを確認できます。
3. WordPressにHubSpotフォームを埋め込む方法
HubSpotは、顧客関係管理（CRM）プラットフォーム、ウェブサイトビルダーなどのツールを提供し、ビジネスを成長させるための優れたプラットフォームです。
HubSpotの完全レビューを読んで、その機能についてさらに詳しく学びましょう。
良いニュースは、WordPressと連携する優れたフォームビルダーがあることです。誰かがフォームに記入すると、その情報は直接HubSpot CRMに送信されるため、メールやメッセージを使用して簡単にフォローアップできます。
HubSpotは、WPFormsを含む他のフォームツールと接続することもできます。これにより、すでに使用している他の多くのツールと連携するため、プラットフォームは非常に便利になります。
このチュートリアルでは、HubSpot Form BuilderプラグインとWPFormsのHubSpotアドオンを使用してHubSpotフォームを埋め込む方法を説明します。
HubSpot プラグインを使用した HubSpot フォームの埋め込み
プラグインを使用してHubSpotフォームを埋め込むには、まずHubSpotプラグインをインストールする必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをお読みください。
有効化したら、WordPressダッシュボードから「HubSpot」メニューをクリックします。このパネルには、ウェブサイトとHubSpotを接続するいくつかの方法が表示されます。
- HubSpotアカウントをお持ちの場合は、「サインイン」をクリックするだけです。
- そうしない場合は、Google、Microsoft、または Apple アカウントで続行します。
- 必要であれば、ウェブサイトの登録に使用しているのと同じメールを使用できます。
HubSpotアカウントにサインインまたは作成すると、WordPressウェブサイトに接続するように求められます。
「ウェブサイトを接続」ボタンをクリックするだけで、HubSpot がプロセスを開始します。
接続したら、HubSpotプラグインを使用してHubSpotフォームを作成する準備が整いました。
HubSpot » Forms に移動してください。次に、「フォームを作成」ボタンをクリックできます。
ここから、フォームの種類とテンプレートを選択できます。その後、新しいタブにリダイレクトされ、そこでフォームビルダーを使用してHubSpotフォームをカスタマイズできます。
詳細な手順については、WordPress で HubSpot フォームを作成する方法に関するガイドの最初の方法を参照してください。
フォームの外観に満足したら、次のステップはそれをサイトに埋め込むことです。当然、フォームビルダー内の「埋め込み」ボタンを使用したいと思うでしょう。
ただし、この方法は少し紛らわしいです。
フォームリンクを共有したり、WordPress の投稿やページで HTML スニペットを使用したりすることしかできません。
代わりに、「WordPressに戻る」ボタンをクリックして、HubSpotダッシュボードからフォームを管理画面に埋め込むことができます。
左上のボタンをクリックしてください。
ここから、埋め込みたいフォームにカーソルを合わせるだけです。
その後、表示されたら「埋め込み」ボタンをクリックするだけです。
その後、HubSpotがフォームの埋め込み方法をいくつか共有するポップアップウィンドウが表示されます。
ここで、HubSpotブロックを使用して、投稿またはページにHubSpotフォームを埋め込むことを選択できます。別のタブに切り替えると、フォームのショートコードが見つかります。
このチュートリアルでは、「WordPress投稿」ボタンをクリックします。
これは「投稿」ページを新しいタブで開きます。フォームを埋め込みたい投稿にマウスカーソルを合わせ、「編集」が表示されたらクリックして投稿を開いてください。
その後、コンテンツエディターを通じてHubSpotフォームブロックをページに追加できるようになります。
ここから、「+」ボタンをクリックし、検索バーを使用してHubSpotフォームブロックを探すことができます。見つけたらクリックしてください。
これにより、HubSpotフォームブロックがコンテンツエリアに追加されます。
次に、ドロップダウンメニューをクリックして利用可能なオプションを開きます。次に、埋め込みたい HubSpot フォームを選択できます。
これで完了です！「保存」ボタンをクリックして変更を保存できます。
デモサイトではこのようになります：
WPForms HubSpotアドオンを使用したHubSpotフォームの埋め込み
WPFormsを使用してHubSpotフォームを作成することは、複数のプラグインを使い分ける手間なく、フォームや連絡先を管理するための、より簡単で効率的な方法です。
WPFormsは、フォーム作成とHubSpot連携の両方を1か所で行います。これにより、WPFormsのドラッグ＆ドロップビルダーとテンプレートにアクセスでき、フォームデータをHubSpotと自動的に同期できるため、プロセスが簡素化されます。
✏️ 注: WPFormsでHubSpotアドオンを使用するには、Eliteプランが必要です。
HubSpot アドオンと Pro プランのすべての機能に加えて、プラグインを無制限の WordPress サイトで使用でき、プレミアムサポートも利用できます。マーケティングエージェンシーを運営している場合に最適です。
まず、WPFormsプラグインをインストールして有効化する必要があります。詳細なガイドについては、WordPressプラグインのインストール方法をご覧ください。
有効化後、WPForms » 設定でライセンスキーを確認する必要があります。
ライセンスキーはWPFormsアカウントで見つけることができます。クリップボードアイコンをクリックするだけでコピーできます。その後、WordPressタブに戻り、「ライセンスキー」フィールドに入力してください。
「キーの確認」ボタンをクリックして、プランを有効化してください。
さて、HubSpotアドオンをインストールするために、管理画面から WPForms » アドオン に移動しましょう。
ここから下にスクロールしてHubSpotアドオンを見つけます。次に、「アドオンのインストール」ボタンをクリックしてください。
アドオンを有効にした後、WordPressダッシュボードからWPFormsの「設定」パネルに移動し、「統合」タブに切り替えてください。
ここで、HubSpot CRMアカウントをWPFormsに接続できます。「+ 新しいアカウントを追加」をクリックして、アカウントの詳細を入力するだけです。
完了したら、WPFormsからHubSpotフォームを作成して埋め込む時間です。
まず、WPForms » 新規追加 に移動してフォームを作成する必要があります。次の画面で、フォームに名前を付け、フォームテンプレートを選択します。
その後、フォームビルダーを使用してテンプレートをカスタマイズできます。
すべてが順調に進んでいるようであれば、「マーケティング」パネルに切り替えてください。次に、「HubSpot」オプションを開いてフォームをプラットフォームに接続します。
HubSpot アカウントの詳細を入力し、セットアップの指示に従ってください。
完了したら、WPFormsブロックまたはフォームのショートコードを使用してフォームを公開できます。詳細については、WordPressでHubSpotフォームを作成する方法に関するガイドをご覧ください。
4. GoogleフォームをWordPressに埋め込む方法
WPForms やその他の WordPress フォームビルダーは非常に使いやすいです。WordPress サイト上で直接動作し、支払いを受け付けるフォームの作成、ログインフォームの作成、カスタムユーザー登録フォームの作成など、さまざまなことができます。
しかし、フォームを別のウェブサイトやプラットフォームで共有する必要がある場合もあります。
そのような場合、Googleフォームは非常に便利です。共有が簡単で、携帯電話でもうまく機能し、すべての回答を1か所にまとめてくれます。さらに、回答を手伝ってくれる共同編集者を追加することもでき、すべてGoogleドライブに保存されます。
WordPressにGoogleフォームを埋め込むには、まずGoogle Formsのウェブサイトでフォームを作成することから始めます。「Googleフォームに移動」ボタンをクリックするだけです。
次の画面で、さまざまなフォームテンプレートが表示されます。いずれかをクリックして構築を開始してください。
「空白フォーム」をクリックして最初から始めることもできます。
テンプレートを選択したら、フォームのカスタマイズを開始できます。以下は、行う必要がある可能性のあるいくつかのことです。
- フォームのタイトルを作成します。
- フォームの説明を入力してください。
- 目標に合わせてフィールドをカスタマイズしてください。
AIツールを使用して、質問に最も適したフィールドを選択することもできます。
フォームの外観に満足したら、「送信」ボタンをクリックしてください。これによりポップアップウィンドウが開き、フォームの埋め込みコードを取得できます。
このコードをコピーしたら、フォームを表示したい WordPress のページまたは投稿を開くことができます。
ページまたは投稿のコンテンツエディターで、「+」ボタンをクリックし、「カスタムHTML」ブロックを検索します。
クリックしてページに追加してください。
次に、Google Formsの埋め込みコードをカスタムHTMLブロックに貼り付けるだけです。
完了したら、「更新」または「公開」ボタンをクリックすることを忘れないでください。
さて、ウェブサイトにアクセスすると、Google フォームが機能しているのが見えるはずです。
より詳細なステップバイステップの手順については、WordPressにGoogleフォームを埋め込む方法に関するガイドを参照してください。
5. Zoho FormsをWordPressに埋め込む方法
Zoho Forms は、あらゆる種類のフォームを簡単に作成できる優れたツールです。お問い合わせフォーム、アンケート、登録フォーム、注文フォームなど、Zoho Forms が対応します。
さらに、Zoho FormをWordPressサイトに埋め込むのは簡単です。しかし、この部分に進む前に、まずフォームを作成しましょう。
開始するには、Zoho Formsウェブサイトでアカウントを作成する必要があります。「無料でサインアップ」をクリックするだけです。
アカウントを作成したら、フォームの作成を開始できます。
まず、フォームビルダーで「新規フォーム」ボタンをクリックする必要があります。
Zoho Forms にはフォームを作成する 3 つの方法があることがわかります。
- 標準またはカード形式で、ゼロからフォームを作成します。
- 事前に作成されたフォームテンプレートを使用します。
- CRMフォームを作成します。この機能はProプランのアップグレードでのみ利用可能です。
このガイドでは、「ウェブサイトフィードバック」テンプレートを選択します。
では、「このテンプレートを使用する」ボタンをクリックしましょう。
それが完了すると、Zoho Formsのフォームビルダーにアクセスします。
左側のパネルにはすべてのカスタマイズオプションがあり、フォームのプレビューは右側にあります。フォームに要素を追加するには、ドラッグアンドドロップするだけです。
Zoho Formsを使用すると、フォームのテーマをウェブサイトのテーマに合わせるように変更することもできます。
これを行うには、「テーマ」タブに移動します。次に、使用したいテーマにカーソルを合わせ、「適用」をクリックするだけです。
すべてがすでに良好に見える場合は、「共有」タブに切り替えることができます。
このタブでは、Zoho Formsにフォームを埋め込むための多くのオプションがあることがわかります。
WordPressサイトに埋め込むので、埋め込み » ウェブサイトビルダー に移動しましょう。次に、「WordPressに移動」ボタンをクリックしてください。
次に、WordPressプラグインディレクトリのZoho Formsページにリダイレクトされます。
プラグインをインストールするだけで済みます。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
有効化したら、Zohoフォームを埋め込みたい投稿またはページを開くことができます。ここから、「+」ボタンをクリックし、Zohoフォームブロックを選択します。
ブロックが追加されたら、「Zoho Formsにアクセス」ボタンをクリックできます。
「パーマリンクで埋め込む」リンクもありますが、これは初心者向けではないため、この方法は推奨しません。
次に、Zohoアカウントを登録したドメインを選択するように求められます。
この場合、ドロップダウンメニューから「zoho.com」を選択し、「接続」をクリックします。
その後、埋め込みたいフォームを選択できます。
ドロップダウンをクリックして、利用可能なオプションから 1 つを選択するだけです。次に、下にスクロールして「埋め込み」ボタンをクリックします。
Zohoフォームがコンテンツエディターに読み込まれます。
気に入ったら、「保存」ボタンをクリックしてください。
さて、ページにアクセスすると、Zohoフォームが実際に動作しているのが確認できます。
このようになります：
上の画像から、Zoho Forms のテーマは、フォームをウェブサイトのデザインに合わせやすくすることもわかります。
6. WordPressにメールサインアップフォームを埋め込む方法
OptinMonster は、典型的なフォームビルダーではありませんが、ユーザーサインアップフォームの作成や メールリストの構築 に最適なツールです。
実際、OptinMonster は WordPress における 最高のリードジェネレーションソリューション です。
WPBeginnerでは、このリードジェネレーションツールを使用して優れた結果を得ています。たとえば、OptinMonsterを使用すると、メール購読者を600%増やしました。
ソフトウェアの詳細な内訳が必要ですか？ 当社の完全な OptinMonster レビュー をご覧ください。
メールサインアップフォームを設定する際、スライドインやライトボックスポップアップなどのさまざまなキャンペーンタイプを使用できます。そのため、OptinMonster のメールサインアップフォームを埋め込む前に、フォームの準備ができていることを確認しましょう。
まず、'Get OptinMonster Now' ボタンをクリックして、OptinMonster のウェブサイトでアカウントを作成する必要があります。
これで料金ページが表示されます。
Proプランは人気があり、「Exit Intent」機能が含まれているため、Proプランをお勧めします。また、WPBeginner限定のOptinMonsterクーポンコードを利用すると、さらに10%オフになります。
購入を完了するには、支払い情報を入力して支払いを続行してください。
これで完了したら、OptinMonster WordPress プラグインをインストールして有効化しましょう。ヘルプが必要な場合は、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
このプラグインは、WordPressサイトをOptinMonsterに接続します。WordPress管理パネルから OptinMonster » Settings に移動するだけです。次に、「既存のアカウントを接続」をクリックします。
接続したら、OptinMonsterのサインアップフォームを作成する準備が整います。詳細な手順については、OptinMonsterを使用してWordPressでメールリストを構築する方法に関するガイドをお読みください。
OptinMonster の詳細な表示ルールにより、適切な人に適切なタイミングで適切なキャンペーンを表示できるため、コンバージョン率の向上に役立ちます。
これらの設定は、キャンペーンビルダーの「表示ルール」で確認できます。
ここでは、顧客の行動に基づいてキャンペーンを表示するタイミングと場所を制御できます。
また、さまざまなオーディエンスに合わせてキャンペーンをカスタマイズすることもできます。たとえば、モバイルユーザーとデスクトップユーザーで異なるレイアウトを表示するなどです。
OptinMonsterでは、特定の曜日や場所に基づいてルールを設定できるため、ブラックフライデーセールや、国別のホリデーテーマのポップアップなどのターゲットキャンペーンを実行できます。
さらに、OptinMonster の離脱インテントテクノロジーは、サイトを離れようとしている 訪問者 を回復させるのに役立ちます。この機能はユーザー行動を追跡し、離脱直前にターゲットメッセージをトリガーすることで、より多くのメール購読者を獲得し、コンバージョンを増やすことができます。
すべてに満足したら、リード獲得フォームをウェブサイトに埋め込む時期です。
ビルダーの「保存」ボタンをクリックするだけで、プロセスを開始できます。
変更を保存したことを確認したら、「公開」タブに切り替えることができます。
ここから、ステータスを「下書き」から「公開」に変更してください。
次に、「公開」タブが「公開済み」に変わり、一時停止アイコンがチェックマークに変わったことがわかります。
これでキャンペーンエディタを閉じ、OptinMonster » Campaigns に移動できます。
次のステップは、サインアップポップアップのステータスを「保留中」から「公開」に変更することです。
「保留中」リンクをクリックするだけでドロップダウンメニューが開き、「公開」オプションを選択できます。
これで完了です！
これで、ウェブサイトにアクセスすると、サインアップポップアップが表示されます。
💡 離脱する訪問者を購読者に変えましょう！ OptinMonster の特徴である Exit-Intent® テクノロジーを使用すると、ユーザーがウェブサイトを離れようとするまさにその瞬間に、ターゲットを絞ったポップアップやスライドインを表示できます。
今すぐ OptinMonster を開始 して、そうでなければ失われていたであろうリードを獲得しましょう。
7. WordPressに支払いフォームを埋め込む方法
単一の商品を販売したいだけで、完全なショッピングカートをセットアップしたくない場合は、Easy Digital DownloadsやWooCommerceのような包括的なeコマースプラグインを使用するのはやりすぎかもしれません。
カスタム金額の受け入れや少数の商品の販売には、シンプルな支払いフォームの作成が適していることがよくあります。ここで WP Simple Pay が役立ちます。
完全なeコマースプラグインを必要とせずにStripe支払いを受け付けるのに最適な選択肢です。
WP Simple Pay は、クレジットカード決済、Apple Pay、Google Pay など、他の支払い方法も受け付けることができます。これは、決済を収集するためのシンプルなソリューションを必要とする非営利団体、中小企業、ボランティアに最適です。
プラットフォームに関する詳細情報は、当社の完全な WP Simple Pay レビュー でご確認ください。
支払いフォームを埋め込むには、まずWP Simple Payプラグインをインストールする必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、セットアップウィザードに従ってStripeに接続してください。
接続が完了したら、WP Simple Payを使用して支払いフォームを作成する準備が整いました。
詳細な手順については、支払いオプション付きのWordPressフォームの作成方法に関するガイドの最初の方法に従ってください。
支払いフォームに満足したら、「公開」ボタンをクリックしてください。その後、フォームのショートコードをコピーして、投稿やページに埋め込むことができます。
WordPressコンテンツエディターでは、「+」ボタンをクリックして「ショートコード」ブロックを選択するだけです。
次に、フォームのショートコードをテキストエリアに貼り付けます。
WP Simple Payはデフォルトで支払いフォームをテストモードで作成することに注意してください。これは、訪問者からの支払いを受け付けられないことを意味します。
これを修正するには、WordPressダッシュボードの WP Simple Pay » Payment Forms に移動しましょう。次に、作成したばかりのフォームにカーソルを合わせ、「編集」が表示されたらクリックします。
このパネルで、「支払い」セクションに移動します。
最後に、「ライブモード」ラジオボタンをクリックしてから「更新」をクリックできます。
これで、WP Simple Payフォームを埋め込み、オーディエンスから支払いを受け付け始めることができます。
デモサイトではこのようになります：
💡 数分で支払いの受け付けを開始！ サイト上で直接、単発または継続的な支払いを受け付けます。単一の商品販売、寄付の受け取り、サービス料金の請求に最適です。
WP Simple Payで支払いフォームをライブにしましょう – 複雑なショッピングカートは不要です。
8. WordPressにFormidable Formsを埋め込む方法
Formidable Formsは、住宅ローン、自動車ローン、生命保険の計算機などの高度なフォームを作成するための優れたツールです。WordPressウェブサイトで使用できる300以上のフォームテンプレートを提供しています。
Formidable Formsでフォームを作成する方法の詳細については、当社の完全なFormidable Formsレビューをご覧ください。
Formidable Formsを使用すると、フォームを任意の投稿やページに非常に簡単に配置できます。
フォームの作成が完了したら、フォームビルダーの「埋め込み」ボタンをクリックできます。
ここで、フォームを追加する場所を選択できるポップアップウィンドウが開きます。オプションは、「既存のページを選択」、「新しいページを作成」、「手動で挿入」の 3 つです。
「手動で挿入」オプションを選択した場合、コードを少し扱う必要があります。これは初心者には少し intimidating な場合があるため、お勧めしません。
このチュートリアルでは、「既存のページを選択」を選びます。
次に、別のプロンプトポップアップが表示されます。
ここで、ドロップダウンメニューを開き、ページを選択します。たとえば、デモサイトの「ホーム」ページにフォームを埋め込むことにしました。
ページを選択したら、「フォームを挿入」ボタンをクリックしてください。
これで、ページのブロックエディターが開かれ、フォームが既にページに埋め込まれているのが表示されるはずです。
これでページを更新する準備ができました。「保存」ボタンをクリックしてください。
デモサイトではこのようになります：
9. WordPressにGravity Formsを埋め込む方法
Gravity FormsはWordPress用の強力なフォームビルダープラグインですが、ただし、プレミアムのみです。
このフォームビルダーは、幅広い機能とカスタマイズオプションを備えています。アンケート、クイズ、登録、注文フォームなど、さまざまな種類のフォームを作成できます。
すべての機能をテストするために試してみました。詳細は包括的なGravity Formsレビューで確認できます。
Gravity Formsを使用してフォームを作成するには、Gravity Formsのウェブサイトからプラグインを購入する必要があります。
次に、サイトにインストールして有効化できます。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
有効化後、WordPressダッシュボードの Gravity Forms » New Form に移動し、「新規追加」をクリックします。
次の画面で、フォームテンプレートを選択します。
ここで急ぐ必要はありません。このポップアップウィンドウを探索して、使用したいテンプレートを見つけることができます。見つけたら、テンプレートにカーソルを合わせ、「テンプレートを使用」ボタンをクリックするだけです。
次に、フォームの名前と簡単なフォームの説明を入力するように求められます。
次の画像を参照として使用できます。
フォームの作成を開始するために、「テンプレートを使用」をもう一度クリックしてください。
これにより、Gravity Formsのドラッグアンドドロップビルダーが開きます。右側のフィールドを使用してフォームをカスタマイズできます。
フォームの準備ができたら、「フォームを保存」ボタンをクリックして、変更が保存されていることを確認してください。
次に、「埋め込み」をクリックしてください。
これにより、Gravity Formsフォームを既存のページ、新規ページ、またはクラシックエディターを使用するユーザー向けのショートコードメソッドに埋め込むための3つのオプションが開きます。
このチュートリアルでは、既存のウェブページにGravity Formsを埋め込む方法を説明します。
ここから、「投稿」ラジオボタンを選択します。次に、ドロップダウンメニューを開いて、WordPressウェブサイトで公開済みの投稿を選択できます。
「フォームを挿入」ボタンをクリックしてください。
次に、ページのコンテンツエディターにリダイレクトされ、「フォーム」ブロックを追加するように求められます。そのままクリックしてください。
Gravity Forms は、作成したフォームを投稿に追加します。
デフォルトで「フォームタイトル」と「フォームの説明」が含まれていることにも気づくかもしれません。
すべての設定が完了したと思ったら、「保存」ボタンをクリックする時です。
これで、Gravity Formsフォームを作成し、WordPressサイトに埋め込むことができました。
10. Microsoft FormsをWordPressに埋め込む方法
一部のユーザーは、Office 365アカウントで使い慣れているツールであるため、Microsoft Formsを使用してフォームを作成したい場合があります。また、Excelなどの他のMicrosoft製品とも自動的に統合されるため、データ収集と管理が容易になります。
Microsoft Formsは、アンケート、クイズ、投票を作成するための組み込みオプションを提供します。フォームの埋め込みコードをコピーしてWordPressサイトに追加することで、Microsoft 365フォームをWordPressに簡単に埋め込むことができます。
まず、Office 365 アカウントで Microsoft Forms を使用してフォームを作成します。
Office 365 のホームページから、「サインイン」をクリックして開始しましょう。
ログインしたら、ページ左上のメニューアイコンをクリックできます。
次に、「フォーム」を見つけてクリックします。
これにより、テンプレートギャラリーが新しいタブで開きます。その後、作成したいフォームを選択できます。
Microsoft Formsには、アンケート、クイズ、招待状、登録の4つのフォームがあります。このチュートリアルでは、「招待状」オプションを選択します。それをクリックしましょう。
Microsoft Formsエディターが新しいタブで開きます。ここから、まずテンプレートを選択します。
左側のパネルでテンプレートオプションを探索できます。招待状フォームを作成しているので、さまざまな目的に合わせた7つの既製のテンプレートがあります。
このチュートリアルでは、結婚式の招待状テンプレートを使用します。エディターでのデフォルトのテンプレートは次のようになります。
右側のパネルを下にスクロールすると、このテンプレートが提供するデフォルトのフィールドが見つかります。
このテンプレートには、ユーザー名、参加ゲスト数、食物アレルギー、メールアドレスの 4 つの事前設定フィールドがあります。
もっと質問を追加したいとしましょう。その場合は、「+ 新しい質問を挿入」ボタンをクリックして、「日付」、「評価」、「テキスト」などの質問タイプを選択できます。
既存のものを編集したい場合は、いずれかをクリックするだけで、カスタマイズオプションが表示されます。
見た目や雰囲気を変更するには、パレットアイコンをクリックします。
ここから、フォームのレイアウトと背景画像を変更できます。
次に、歯車アイコンをクリックして設定タブに切り替えることができます。
Microsoft Formsでは、いくつかの基本的な設定が既に構成されています。ただし、有効にしたい設定があるかもしれません。
- 回答に基づいて結婚式の日程を戦略的に計画するための「終了日」
- 回答が失われるのを防ぐためのバックアップデータとして「各回答のメール通知を受け取る」
必要であれば、事前に設定された確認メッセージを編集することもできます。
フォームの準備ができたら、公開する時期です。
フォームビルダーで、「回答を収集」ボタンをクリックしましょう。
表示されるポップアップで、「</>」または埋め込みアイコンをクリックできます。
これで、サイト用のHTML埋め込みコードが表示されるはずです。「コピー」をクリックしてください。
このコードを「カスタムHTML」ブロックを使用して投稿またはページに貼り付けることができます。
WordPressのコンテンツエディターで、「+」ボタンをクリックしてブロックを追加します。次に、検索バーを使用して「カスタムHTML」ブロックを探します。
クリックして、ブロックをコンテンツエディターに追加してください。
ここから、Microsoft Formsの埋め込みコードをテキストエリアに貼り付けてください。
エディターにプレビューが表示されなくても心配しないでください。ショートコードは正常に機能します。
これで、「公開」または「更新」ボタンをクリックして公開できます。
デモサイトではこのようになります：
11. WordPressにHTMLフォームを埋め込む方法
HTMLフォームは通常手作業でコーディングされるため、フォームを編集するためのドラッグアンドドロップエディターはありません。
幸いなことに、HTMLフォームの設定をより確実にできるフォームプラグインがあります。
最良の選択肢の1つは、無料のHTML Formsプラグインです。このプラグインは、訪問者から情報を収集するのに役立つシンプルな連絡フォームの設定に最適です。
最も良い点は、HTMLフォームを使用するためにコーディング方法を知る必要がないことです。
新しいフィールドの追加は簡単です。利用可能なオプションから1つを選択するだけで、HTMLフォームがフィールドのデータを調整するように求めます。
「フォームにフィールドを追加」ボタンをクリックすると、HTML FormsはデータをHTMLスニペットに変換し、「フォームコード」領域に配置します。
これで完了です。「変更を保存」ボタンをクリックして、進捗状況を保存することを忘れないでください。
さて、フォームを公開する時間です。
HTMLフォームを使用すると、フォームを任意の投稿、ページ、またはウィジェット領域に簡単に埋め込むことができます。これを行うには、フォームのショートコードが必要です。フォームのショートコードは、「フォームの編集」パネルの上部にあります。
このショートコードをクリップボードにコピーしましょう。
次に、HTMLフォームを表示したいページまたは投稿を開くことができます。このチュートリアルでは、フォームを「お問い合わせ」ページに追加します。
ブロックエディターに入ったら、「+」ボタンをクリックし、「ショートコード」ブロックを検索します。それをクリックしてページに追加してください。
次に、ショートコードを「ショートコード」ブロックに貼り付けることができます。
ブロックエディターにはフォームのライブプレビューは表示されません。しかし、心配しないでください。保存または公開すると、ライブページで正しく表示されます。
それでは、「保存」ボタンを押して、それがどのように機能するか見てみましょう。
ウェブサイトではこのようになります：
詳細な手順については、WordPressにHTMLフォームを追加する方法に関するガイドをご覧ください。
WordPressフォームの埋め込みに関するよくある質問
WordPressにフォームを埋め込むことについて質問がありますか？始めるのに役立つ簡単な回答をいくつかご紹介します。
WordPressにフォームを埋め込むことはできますか？
はい。さまざまなプラグインを使用して、WordPress にフォームを簡単に埋め込むことができます。その中には、最高の多目的フォームビルダーである WPForms も含まれます。
WordPressにフォームをインストールするにはどうすればよいですか？
まず、WordPress 管理画面から プラグイン » 新規追加 に移動します。次に、お好みの フォームプラグインを見つけて、インストールして有効化します。完了したら、プラグインを使用してフォームを作成し、ショートコードまたはブロックを使用してサイトに埋め込みます。
WordPressでWPFormsを設定する方法は？
WPFormsを設定するには、まずWPFormsプラグインをインストールして有効化する必要があります。次に、ドラッグアンドドロップビルダーを使用して新しいフォームを作成し、ショートコードまたはプラグインのブロックを使用してウェブサイトにフォームを埋め込むことができます。
プラグインなしでWordPressでフォームを作成する方法は？
プラグインなしでWordPressでフォームを作成するには、カスタムHTMLとPHPが必要です。フォームHTMLをページに手動で追加し、テーマのfunctions.phpファイルでカスタムPHPを使用して送信を処理できます。
初心者にはあまり向いていないため、代わりにフォームビルダーの使用をお勧めします。
WordPressでのフォーム使用に関する追加リソース
この記事が、WordPressにフォームを埋め込む方法を学ぶのに役立ったことを願っています。
次に、以下の他の役立つガイドを確認することをお勧めします。
- WordPressで多言語フォームを作成する方法
- WordPressフォームで条件付きロジックを使用する方法
- WordPressでメールリストを増やすためにお問い合わせフォームを使用する方法
- Google AnalyticsでWordPressフォームのトラッキングを設定する方法
- フォーム離脱の追跡と削減方法
- WordPressフォームへの18,000件のスパムリード攻撃をブロックした方法
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス・ムトミ
ウェブデザインの経験から役立つヒントを一つご紹介します。埋め込みフォームは常にモバイルでテストしてください！クライアントのGoogleフォームで苦労して学びました。デスクトップでは完璧に見えましたが、モバイル画面ではひどい状態でした。
私に効いた簡単な修正方法：フォームコンテナにこのCSSを追加するだけです：
– max-width: 100%
– height: auto