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 にフォームを埋め込む方法 (初心者のための究極のガイド)

WordPressのフォームは、訪問者とつながり、読者を増やすために不可欠です。お問い合わせフォーム、アンケート、フィードバックフォームなど、ウェブサイトに埋め込むことで、素早く簡単に訪問者から情報を集めることができます。

お問い合わせページからニュースレター購読、さらにはチェックアウトフォームまで、私たちはすべてのプロジェクトでフォームを使用しています。その過程で、私たちは WordPress フォームを埋め込むために必要なすべてのステップを学びました。

このガイドでは、最も人気のある WordPress フォームビルダーを使ってフォームを埋め込む方法を紹介します。

How to Embed Forms in WordPress

WordPressフォームとは何か、なぜ重要なのか?

WordPressのフォームは、ウェブサイト上の貴重な情報や洞察を収集するためのツールです。訪問者が名前、メールアドレス、フィードバックなどの詳細を入力することができます。

フォームには様々な用途があります。例えば、ユーザーがあなたに連絡を取ったり、Eメールリストを作成するためのお問い合わせフォームや、意見を集めるためのアンケートフォーム、イベント用の登録フォームなどを作成することができます。

また、予約や寄付金集めにフォームを使うこともできます。また、カスタマーサポートの依頼にフォームを使うビジネスもあります。

フォームがなければ、訪問者と関わるチャンスを逃してしまうかもしれません。ですから、WordPressのウェブサイトにフォームを追加することは、ウェブサイトオーナーにとって賢い選択なのです。

WordPressにフォームを埋め込む方法

以下のセクションでは、WordPress サイトにフォームを追加するための各ステップを説明します。特定のフォームタイプに興味がある場合は、リンクをクリックして記事を読み飛ばすことができます:

準備はいいかい?始めよう

1.WordPressサイトにWPFormsを埋め込む方法

WPFormsは市場で最高の多目的フォームビルダーです。600万人以上のアクティブユーザーを持つ、最も人気のあるフォームビルダーの一つでもあります。

このツールを使えば、2000以上ある既製のカスタマイズ可能なテンプレートを使って、好きなフォームを作成することができます。

WPForms' homepage

お問い合わせフォームだけでなく、WPFormsはシンプルなフォームから高度なフォームまで簡単に作成することができます:

WPFormsの埋め込みに関しては、WPFormsブロックかショートコードを使うことができます。

それでは、WPFormsをインストールして有効化し、一緒に試してみましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドを参照してください。

次に、WordPressでお問い合わせフォームを作成する方法をステップバイステップで説明します。

WPFormsブロックを使ったWPFormsフォームの埋め込み

フォームを公開する準備ができたら、フォームビルダー内の’埋め込み’ボタンをクリックするだけで、WPFormsブロックを使ってウェブページにフォームを追加することができます。

The Embed button in WPForms form builder

ポップアップウィンドウが開き、既存のページを選択するか、フォーム用の新規ページを作成することができます。

既存のページを選択」ボタンをクリックすると、ドロップダウンメニューが表示され、あなたのウェブサイトで利用可能なすべてのページが表示されます。新規ページを作成」をクリックすると、「ページ名」フィールドが表示されます。

ページを選んだり、新規ページの名前を決めたら、「Let’s Go!

Embed contact form WPForms

その後、ページのブロックエディターにリダイレクトされます。

ここから’+’ボタンをクリックし、WPFormsブロックを検索することができます。

Adding WPForms block

次のステップは、WPForms ブロックのドロップダウンを開き、埋め込みたいフォームを選択することです。

フォームを選択すると、WPFormsはそれをブロックエディタに読み込みます。

その後、右側のパネルにある「フォームの設定」をいじってみてください。

デフォルトでは WPForms はフォームタイトルを読み込みません。そこで、’フォームタイトル’ オプションをオンにしてフォームタイトルを追加し、訪問者にもっと文脈を与えるようにするとよいでしょう。フォームの説明を書く場合、このオプションをオンにすることもできます。

さらに良いことに、サイト全体のルック&フィールにマッチするテーマでフォームをスタイルすることができます。

WPForms form settings in block editor

フォームの見た目に満足したら、先に進んで「保存」をクリックします。

これがWPFormsブロックを使ってWPFormsを埋め込む方法です。

WPForms embedded on a live website

ショートコードを使ったWPFormsフォームの埋め込み

WPFormsを埋め込むもう一つの方法は、ショートコードを使うことです。

これを行うには、WPForms ” All Formsで各フォームの ‘Shortcode’ カラムを探します。

The shortcode column in WPForms page

ここから、埋め込みたいフォームのショートコードをコピーするだけです。例えば、’カスタマーレビュー’フォームのショートコードをコピーします。

次のステップは、フォームを埋め込むページまたは投稿を開くことです。そのためには、’Pages’ か ‘Posts’ に行く。そして、いずれかにマウスオーバーし、表示されたら’編集’をクリックする。

これにより、ページまたは投稿のエディターに移動します。

フォームを埋め込むには、「+」ボタンをクリックして「ショートコード」ブロックを探しましょう。

The shortcode block in block editor

ブロックが追加されたら、WPFormsフォームのショートコードをテキストフィールドに貼り付けます。

こんな感じだろう:

Adding WPForms shortcode

ブロックエディターがライブ編集エリアにフォームを読み込まない。

そこで、まず変更を保存し、左下に表示される「View Page」ボタンをクリックする。

WPForms embedded using shortcode on a live website

2.WordPressに寄付フォームを埋め込む方法

ウェブサイトに寄付フォームを追加することで、人々が簡単にあなたの活動を支援できるようになります。明確でシンプルな方法があれば、訪問者は寄付をしやすくなります。

WordPressに寄付フォームを埋め込む最も簡単な方法は、Charitableプラグインを使用することです。この人気のあるツールを使えば、100以上の既成テンプレートで複数の募金キャンペーンを作成し、カスタマイズすることができます。

Charitable's homepage

それでは、寄付フォームを作成するためにCharitable をインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法をご覧ください。

アクティベーションが完了したら、Charitable ” SettingsにアクセスしてProライセンスをアクティベートしましょう。ライセンスキーを貼り付け、’Verify Key’をクリックするだけです。

Adding the WP Charitable license key

これで寄付フォームを作成する準備ができました。詳しい手順については、WordPressで定期寄付フォームを作成する方法をご覧ください。

フォームの見た目に満足したら、WordPressの投稿やページに埋め込むことができます。

キャンペーンビルダーでは、まず「下書き」ドロップダウンをクリックしてオプションを開きます。Chitableが自動的にキャンペーン用の新しいページを作成します。

Publishing a campaign in WP Charitable

これで、初めてのチャリタブル・キャンペーンの作成と公開に成功したことになります!

今、あなたのウェブサイトを訪問すれば、寄付フォームが動いているのを見ることができます。

WP Charitable crowdfunding campaign on a live website

とはいえ、ポップアップウィンドウの「埋め込みウィザード」リンクや、Charitableエディタの「埋め込み」ボタンにお気づきかもしれません。

また、これらの機能のいずれかを使って、他の投稿やページに寄付フォームを追加することもできます。

これを行うには、’Embed Wizard’リンクまたは’Embed’ボタンをクリックするだけです。

Charitable's embed wizard

表示されるポップアップで、既存のページを選択するか、新規ページを作成するかを選択する必要があります。

すでに専用の寄付フォームページがあるので、「既存のページを選択」を選ぶのがよいでしょう。先に進んでボタンをクリックしてください。

Select existing page for embedding Charitable campaign

すると、WordPressサイト内の全ページのリストがドロップダウンで表示されます。

ドロップダウンメニューを展開してページを選び、「Let’s Go」ボタンをクリックします。

The Let's Go button

これでページのブロックエディターにリダイレクトされます。

ここから「+」ボタンをクリックし、「Charitable Campaign」ブロックを検索することができます。そして、検索結果をクリックするだけで、コンテンツエディターに追加されます。

Charitable Campaign block

その後、「慈善キャンペーン」ブロックのドロップダウンから埋め込む寄付フォームを選択できるようになります。

ドロップダウンメニューを展開してください。追加したいキャンペーンをクリックしてください。

Choosing a campaign

コンテンツエディターでプレビューが見えなくても心配しないでください。ブロックは問題なく動作します。

では、『保存』、『更新』、『公開』ボタンをクリックして、本番にしましょう。

これで終わりです!このページで、寄付フォームを実際に見ることができます:

Charitable donation form on a live website

3.WordPressにHubSpotフォームを埋め込む方法

HubSpotは、顧客情報を管理できるCRM(カスタマー・リレーションシップ・マネジメント・プラットフォーム)やウェブサイト・ビルダーなどのツールを備えた、ビジネスを成長させるための優れたプラットフォームです。

WordPressと相性の良いフォームビルダーも用意されています。誰かがフォームに入力すると、その情報はそのままHubSpot CRMに送られるので、メールやメッセージを使って簡単にフォローアップすることができます。

HubSpotはWPFormsを含む他のフォームツールとも連携できます。すでに使っている他のツールとも連携できるので、このプラットフォームは本当に便利です。

このチュートリアルでは、HubSpot Form Builderプラグインと WPForms’ HubSpot Addon を使って HubSpot フォームを埋め込む方法を紹介します。

HubSpotプラグインを使ってHubSpotフォームを埋め込む

プラグインを使ってHubSpot Formsを埋め込むには、まずHubSpotプラグインをインストールする必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法をご覧ください。

アクティベーションが完了したら、WordPressのダッシュボードから「HubSpot」メニューをクリックします。このパネルには、ウェブサイトとHubSpotを接続する方法がいくつか表示されます:

  • HubSpotアカウントをお持ちの場合は、「サインイン」をクリックするだけです。
  • そうでない場合は、Google、Microsoft、またはAppleのアカウントで続行する。
  • 必要であれば、ウェブサイトの登録に使用したのと同じEメールを使用することもできます。
Signing up for HubSpot in WordPress

HubSpotアカウントにサインインまたは作成すると、WordPressウェブサイトとの接続を求められます。

ウェブサイトを接続」ボタンをクリックするだけで、HubSpotがプロセスを開始します。

Connecting HubSpot with WordPress website

接続が完了したら、HubSpotプラグインを使ってHubSpotフォームを作成する準備が整いました。

HubSpot ” Formsに移動します。次に、「フォームを作成」ボタンをクリックします。

Creating HubSpot forms

ここからフォームタイプとテンプレートを選択します。フォームビルダーでHubSpotフォームをカスタマイズできます。

詳しい手順は、WordPressでHubSpotフォームを作成する方法の最初の方法をご覧ください。

フォームの見た目に満足したら、次のステップはサイトに埋め込むことです。当然、フォームビルダー内の ‘埋め込み’ ボタンを使います。

Embed button in HubSpot's form builder

しかし、この方法は少しわかりにくい。

フォームのリンクを共有し、WordPressの投稿やページでHTMLスニペットを使用することができます。

Embed methods in HubSpot form builder

代わりに、「WordPressに戻る」ボタンをクリックし、管理エリアのHubSpotダッシュボードからフォームを埋め込むことができます。

左上のボタンをクリックしてください。

Back to WordPress button in HubSpot form builder

ここから、埋め込みたいフォームにマウスオーバーするだけです。

その後、『埋め込み』ボタンが表示されたらクリックするだけです。

HubSpot embed button in the WP admin area

ポップアップウィンドウが表示され、HubSpotがフォームを埋め込む方法をいくつか紹介します。

ここでは、HubSpotブロックを使ってHubSpotフォームを投稿やページに埋め込むかどうかを選択できます。他のタブに切り替えると、フォームのショートコードが表示されます。

このチュートリアルでは、「WordPress Post」ボタンをクリックします。

HubSpot's Your Form Is Ready popup window

投稿’ページが新しいタブで開きます。投稿にマウスオーバーして「編集」をクリックし、フォームを埋め込む投稿を開いてください。

コンテンツエディターでページにHubSpotフォームブロックを追加します。

ここから「+」ボタンをクリックし、検索バーを使ってHubSpot Formブロックを探します。見つけたらクリックしてください。

Adding a HubSpot form block to a post

これでコンテンツエリアにHubSpotフォームブロックが追加されます。

次にドロップダウンメニューをクリックして、利用可能なオプションを開きましょう。次に、埋め込みたいHubSpotフォームを選択します。

HubSpot form embedded

これで完了です!これで「保存」ボタンをクリックして変更を保存することができます。

デモサイトではこんな感じです:

HubSpot form on a live website

WPFormsのHubSpotアドオンを使ってHubSpotフォームを埋め込む

WPFormsを使ってHubSpotフォームを作成することで、複数のプラグインを使いこなす手間をかけずにフォームやお問い合わせフォームを管理することができます。

WPFormsはフォームの作成とHubSpotとの統合を一箇所で行います。これにより、WPFormsのドラッグ&ドロップビルダーやテンプレートを利用しながら、フォームデータをHubSpotと自動的に同期させることができるため、プロセスが簡素化されます。

注:WPFormsでHubSpotアドオンを使用するには、Eliteプランが必要です。HubSpotアドオンとProプランのすべての機能に加えて、無制限のWordPressサイトでプラグインを使用し、プレミアムサポートを解除することができます。マーケティングエージェンシーを運営されている方には最適です。

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

アクティベーションの際、WPForms ” Settingsでライセンスキーを確認する必要があります。

ライセンスキーはWPFormsアカウントにあります。クリップボードのアイコンをクリックしてコピーしてください。その後、WordPressタブに戻り、’ライセンスキー’フィールドに記入することができます。

Verify Key “ボタンをクリックして、プランを有効にしてください。

Activating license key to WPForms

では、管理画面のダッシュボードからWPForms ” AddonsにアクセスしてHubSpot Addonをインストールしてみましょう。

ここから下にスクロールして、HubSpotアドオンを見つけます。次に、「アドオンのインストール」ボタンをクリックします。

Installing the HubSpot Addon in WPForms

アドオンを有効化した後、WordPressダッシュボードからWPFormsの’設定’パネルに移動し、’統合’タブに切り替える必要があります。

ここでHubSpot CRMアカウントをWPFormsに接続することができます。新規アカウントを追加」をクリックし、アカウントの詳細を入力してください。

Adding HubSpott account to WPForms

WPFormsからHubSpotフォームを作成し、埋め込みます。

まず、WPForms ” 新規追加 でフォームを作成します。次の画面で、フォームに名前を付け、フォームテンプレートを選択します。

その後、フォームビルダーを使ってテンプレートをカスタマイズできます。

すでにすべてがうまくいっているようであれば、遠慮なく「Marketing」パネルに切り替えてください。ここから’HubSpot’オプションを開き、フォームをプラットフォームに接続しましょう。

Adding new HubSpot connection in WPForms

HubSpotのアカウント情報を入力し、設定画面の指示に従います。

完了したら、WPFormsブロックまたはフォームのショートコードを使用してフォームを公開できます。詳しくは、WordpressでHubSpotフォームを作成する方法をご覧ください。

4.WordPress に Google フォームを埋め込む方法

WPFormsをはじめとするWordPressフォーム作成ツールはとても使いやすいです。WordPressサイト上で動作し、支払いを受け付けるフォームの作成、ログインフォームの作成、カスタムユーザー登録フォームの作成など、様々なことができます。

しかし、時には異なるウェブサイトやプラットフォームでフォームを共有する必要があるかもしれません。

そのような場合、Googleフォームはとても便利です。共有が簡単で、携帯電話でもうまく機能し、すべての回答を一か所にまとめておくことができます。さらに、Googleドライブに保存された回答は、共同作業者を追加することができます。

Google フォームを WordPress に埋め込むには、まずGoogle フォームのウェブサイトでフォームを作成します。フォームへ移動’ ボタンをクリックするだけです。

The Go to Forms button in Google Forms

次の画面では、様々なフォームテンプレートが表示されます。そのうちの一つをクリックして、ビルドを開始してください。

白紙のフォーム」をクリックしてゼロから始めることもできる。

Google Forms' templates

テンプレートを選んだら、フォームのカスタマイズを始めましょう。ここでは、あなたが行う必要があるかもしれないいくつかのことを示します:

  • フォームのタイトルを作成する。
  • フォームの説明を入力してください。
  • あなたの目標に合わせてフィールドをカスタマイズしてください。
Adding fields to Google Forms

また、AIツールを使用して、質問に最も適したフィールドを選択することもできます。

フォームの形に満足したら、「送信」ボタンをクリックします。ポップアップウィンドウが開き、フォームの埋め込みコードが表示されます。

Copying Google Forms' embed code

このコードをコピーしたら、WordPressでフォームを表示したいページや投稿を開きます。

ページまたは投稿のコンテンツエディターで「+」ボタンをクリックし、「カスタムHTML」ブロックを探しましょう。先に進み、それをクリックしてページに追加します。

Adding custom HTML block in WordPress

そして、Googleフォームの埋め込みコードをカスタムHTMLブロックに貼り付けるだけです。

完了したら、’更新’または’公開’ボタンを忘れずにクリックしてください。これで、あなたのウェブサイトにアクセスすると、Googleフォームが表示されているはずです。

Google Form preview on a live WordPress site

より詳細なステップバイステップの手順については、WordPressにGoogleフォームを埋め込む方法のガイドを参照してください。

5.Zoho Forms を WordPress に埋め込む方法

Zoho Formsはあらゆる種類のフォームを簡単に作成できる素晴らしいツールです。お問い合わせフォーム、アンケート、登録フォーム、注文フォームなど、Zoho Formsならどんなフォームも簡単に作成できます。

しかも、Zoho フォームを WordPress サイトに埋め込むのは簡単です。その前に、まずフォームを作りましょう。

まずはZoho Formsのウェブサイトでアカウントを作成してください。無料サインアップ」をクリックするだけです。

Zoho Forms' homepage

アカウントを作成したら、フォームの作成を開始できます。

まず、フォームビルダーの「新規フォーム」ボタンをクリックします。

The New Form button in Zoho Forms

Zoho Formsには3つのフォーム作成方法があることがわかります:

  • 標準またはカード・フォーム・タイプを使って、ゼロからフォームを作成します。
  • 既製のフォームテンプレートを使用する。
  • CRMフォームの作成は、Proプランにアップグレードした場合にのみ利用できる機能です。
Three ways to create Zoho Forms

このガイドでは、「ウェブサイトのフィードバック」テンプレートを選択します。

では、『このテンプレートを使う』ボタンをクリックしてみよう。

Zoho Forms' Use this template button

これで Zoho Forms フォームビルダーの画面になります。

左側のパネルにはすべてのカスタマイズオプションがあり、右側にはフォームプレビューがあります。ドラッグ&ドロップするだけでフォームに要素を追加できます。

Zoho Formsでは、ウェブサイトのテーマに合わせてフォームのテーマを変更することもできます。

これを行うには、「テーマ」タブに移動します。そして、使いたいテーマにマウスオーバーして「適用」をクリックするだけです。

Applying Zoho Forms theme

すでにすべてがうまくいっているようなら、「共有」タブに切り替えることができる。

このタブで、Zoho Forms にはフォームを埋め込むためのたくさんのオプションがあることがわかります。

WordPressサイトに埋め込むので、Embed ” Website Buildersに向かいましょう。そして、「Go to WordPress」ボタンをクリックします。

The Go to WordPress button in Zoho Forms

WordPress のプラグインディレクトリにあるZoho Forms のページにリダイレクトされます。

プラグインをインストールするだけです。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化すると、Zoho Forms を埋め込みたい投稿やページを開くことができます。ここで ‘+’ ボタンをクリックし、Zoho Forms ブロックを選択します。

Adding the Zoho Forms block to WP content editor

ブロックが追加されたら、「Zoho Formsにアクセス」ボタンをクリックします。

パーマリンクで埋め込む」リンクもありますが、この方法は初心者に優しくないのでお勧めしません。

The Access Zoho Forms button in Zoho Forms block

次に、Zohoアカウントを登録したドメインを選択するよう促されます。

この場合、ドロップダウンメニューから「zoho.com」を選び、「Connect」をクリックする。

Connecting Zoho account

その後、埋め込みたいフォームを選択できます。

ドロップダウンをクリックし、利用可能なオプションから1つを選択するだけです。次に、下にスクロールして「埋め込み」ボタンをクリックします。

Embedding the Website Feedback form

コンテンツエディターがZohoフォームを読み込みます。

気に入ったものがあれば、「保存」ボタンをクリックしてください。

Saving the post with Zoho Forms

このページにアクセスすると、Zohoフォームが表示されます。

こんな感じだろう:

Zoho Forms on a live website

上の画像から、Zoho Forms のテーマを使うとフォームをウェブサイトのデザインに合わせやすくなることもわかります。

6.WordPressにメール登録フォームを埋め込む方法

OptinMonsterは、典型的なフォームビルダーではありませんが、ユーザー登録フォームを作成し、Eメールリストを作成するのに最適なツールです。

WPBeginnerでは、このリードジェネレータツールを使用して素晴らしい結果を得ています。例えば、OptinMonsterを使用することで、メール購読者を600%増加させることができました。

メール登録フォームを設置する際、スライドインやライトボックスポップアップなど様々なキャンペーンタイプを使用することができます。OptinMonsterのメール登録フォームの埋め込みについて説明する前に、フォームの準備をしましょう。

まず、OptinMonsterのウェブサイトで「今すぐOptinMonsterを入手する」ボタンをクリックして、OptinMonsterのアカウントを作成する必要があります。

OptinMonster's homepage

これで価格設定ページが表示されます。

人気の高いProプランには「Exit Intent」機能が含まれていますので、Proプランをお勧めします。WPBeginner限定のOptinMonsterクーポンコードで10%OFFにすることもできます。

ご購入を完了するには、お支払い情報を入力し、お支払いを進めてください。

それでは、OptinMonster WordPressプラグインをインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

このプラグインはあなたのWordPressサイトをOptinMonsterに接続します。WordPressの管理画面からOptinMonster ” 設定に移動します。そして、先に進み、「既存のアカウントを接続する」をクリックします。

Connect your existing account

接続が完了したら、OptinMonsterのメール登録フォームを作成する準備ができました。詳しい手順は、OptinMonsterを使ってWordPressでEメールリストを作成する方法をご覧ください。

OptinMonsterの詳細な表示ルールにより、適切なキャンペーンを適切な人に適切なタイミングで表示することができ、コンバージョン率を高めることができます。これらの設定は、キャンペーンビルダーの表示ルールに 向かうことで見つけることができます。

The Display Rules tab in OptinMonster

ここでは、顧客の行動に基づいて、キャンペーンをいつ、どこに表示するかをコントロールできます。

また、モバイルユーザーとデスクトップユーザーで異なるレイアウトを表示するなど、オーディエンスごとにキャンペーンをカスタマイズすることもできます。

Adding display rules to a marketing or advertising campaign

OptinMonsterは、特定の日や場所に基づいてルールを設定することができますので、ブラックフライデーのオファーや国別のホリデーをテーマにしたポップアップのようなターゲットを絞ったキャンペーンを実施することができます。

さらに、OptinMonsterのエグジットインテントテクノロジーは、あなたのサイトを去ろうとしている訪問者を回復するのに役立ちます。この機能により、ユーザーの行動をトラッキングし、サイトからの退出直前にターゲットメッセージをトリガーすることで、より多くのメール購読者を獲得し、コンバージョンを増加させることができます。

Exit intent display rules

すべて満足したら、いよいよリードジェネレータフォームをウェブサイトに埋め込みます。

ビルダーから「保存」ボタンをクリックするだけで、処理が開始されます。

OptinMonster's Save button

変更が保存されたことを確認したら、’Publish’タブに切り替えることができます。

ここから、ステータスを「下書き」から「公開」に変更します。すると、’Publish’タブが’Published’に変わり、一時停止のアイコンがチェックマークに変わっているのがわかります。

Publishing OptinMonster popup

キャンペーンエディターを閉じて、OptinMonster ” キャンペーンに移動することができます。

次のステップは、メールサインアップポップのステータスを「保留」から「公開」に変更することです。保留中」リンクをクリックしてドロップダウンメニューを開き、「公開」オプションを選択します。

Changing OptinMonster campaign's status

そうだ!

これで、あなたのウェブサイトにアクセスすると、Eメール登録ポップアップが表示されます。

OptinMonsters' email sign up on a live website

7.WordPressに決済フォームを埋め込む方法

単一の製品を販売したいだけだったり、完全なショッピングカートを設置したくない場合は、Easy Digital DownloadsやWooCommerceのような包括的なeコマースプラグインを使用するのはやりすぎかもしれません。シンプルな支払いフォームをカスタマイズすることで、カスタムの金額を受け取ったり、いくつかの商品を販売したりすることができます。

そこでWP Simple Payが役立ちます。

WP Simple Pay

WP Simple Payは、完全なeコマースプラグインを必要とせずにStripeの支払いを受け入れるための最良の選択です。

また、クレジットカード決済、Apple Pay、Google Payなど、他の支払い方法にも対応しています。非営利団体、中小企業、ボランティアなど、支払いを集めるためのシンプルなソリューションを必要としている方に最適です。

支払いフォームを埋め込むには、まずWP Simple Payプラグインをインストールする必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。

有効化後、セットアップウィザードに従ってStripeに接続するだけです。

Connecting your WordPress website to Stripe

接続が完了したら、WP Simple Payを使って支払いフォームを作成する準備ができました。

詳細な手順については、WordPress で支払いオプションを持つフォームを作成する方法の最初の方法をご覧ください。

支払いフォームが完成したら、「公開」ボタンをクリックしてください。その後、フォームのショートコードをコピーして投稿やページに埋め込むことができます。

WP Simple Pay's shortcode

WordPressのコンテンツエディターで「+」ボタンをクリックし、「ショートコード」ブロックを選択します。

次に、フォームのショートコードをテキストエリアに貼り付けます。

Adding a shortcode block in Gutenberg

WP Simple Payはデフォルトで支払いフォームをテストモードで作成します。これは訪問者からの支払いをまだ受け付けられないことを意味します。

これを修正するには、WordPressダッシュボードのWP Simple Pay ” Payment Formsに移動しましょう。そして、作成したばかりのフォームにマウスオーバーし、表示されたら「編集」をクリックします。

Editing WP Simple Pay form

このパネルでは、「支払い」セクションに移動します。

最後に「ライブモード」のラジオボタンをクリックし、「アップデート」をクリックします。

Setting WP Simple Pay form to live mode

こうしてWP Simple Payフォームを埋め込み、利用者からの支払いを受け付けるようになります。

デモサイトではこんな感じです:

Buy Me a Coffee WP Simple Pay button on a live website

8.Formidable フォームを WordPress に埋め込む方法

Formidable Formsは、住宅ローンや車の支払い、生命保険などの高度なフォームを作成するのに最適なツールです。あなたのWordPressウェブサイトで使える225以上のフォームテンプレートを提供しています。

Formidable Formsでフォームを作る方法の詳細については、Formidable Formsのレビューをご覧ください。

Formidable Forms を使えば、どんな投稿やページにも簡単にフォームを設置することができます。フォームの作成が終わったら、フォームビルダーの「埋め込み」ボタンをクリックしてください。

Formidable Forms' Embed button

ポップアップウィンドウが開き、フォームを追加する場所を選択できます。3つのオプションがあります:既存のページを選択」、「新規ページを作成」、「手動で挿入」の3つです。

手動で挿入する」オプションを選択すると、ちょっとしたコードを扱う必要があります。初心者の方にとっては少々気が引けるかもしれませんので、お勧めしません。

このチュートリアルでは、「既存のページを選択」を選びます。

Formidable Forms' Embed form options

次に、別のプロンプトのポップアップが表示される。

ここでドロップダウンメニューを開き、ページを選択します。例えば、デモサイトの’Home’ページにフォームを埋め込むことにしました。

Choosing a page to embed Formidable Forms

ページを選択したら、「フォームの挿入」ボタンをクリックします。

これでページのブロックエディターが開き、フォームがすでにページに埋め込まれていることがわかるはずです。

Formidable Forms embedded in the block editor

これでページを更新する準備ができた。

保存』ボタンを押してください。

デモサイトではこんな感じです:

Formidable Forms on a live website

9.WordPress に Gravity Forms を埋め込む方法

Gravity Formsは WordPress の強力なフォーム作成プラグインですが、プレミアム版のみです。

このフォームビルダーには幅広い機能とカスタマイズオプションがあります。アンケート、クイズ、登録、注文フォームなど多くの種類のフォームを作成することができます。

Gravity Formsを使ってフォームを作成するには、Gravity Formsのウェブサイトからプラグインを購入する必要があります。

Gravity Forms homepage

その後、あなたのサイトにインストールして有効化することができます。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化したら、WordPress ダッシュボードのGravity Forms ” 新規フォームに移動して ‘新規追加’ をクリックします。

Creating a new form with Gravity Forms

次の画面で、フォームテンプレートを選択します。

このポップアップ・ウィンドウで、使いたいテンプレートを探すことができます。テンプレートが見つかったら、マウスオーバーして「Use Template」ボタンをクリックしてください。

The Use Template button in Gravity Forms

次に、フォームの名前と簡単な説明を入力するプロンプトが表示されます。

例として以下の画像を使うことができる:

Form name and description examples

もう一度「テンプレートを使用」をクリックして、フォームの作成を開始します。

Gravity Forms のドラッグアンドドロップビルダーが開きますので、右側のフィールドを使ってフォームをカスタマイズしてください。

Gravity Forms' form builder

フォームの準備ができたら、’フォームを保存’ボタンをクリックして、変更が保存されていることを確認してください。

そして、『埋め込み』をクリックする。

Gravity Forms のフォームを埋め込むには、既存のページに埋め込むか、新規ページに埋め込むか、クラシックエディタを使っている人のためにショートコードで埋め込むかの3つのオプションがあります。

Embedding Gravity Forms

このチュートリアルでは Gravity Forms を既存の Web ページに埋め込む方法を紹介します。

ここから「投稿」ラジオボタンを選択します。すると、ドロップダウンメニューが表示され、WordPressウェブサイト上で公開されている投稿を選択することができます。

Embedding Gravity Forms into an existing post

フォームの挿入」ボタンをクリックする。

するとページのコンテンツエディターにリダイレクトされ、「フォーム」ブロックを追加するよう促されます。それをクリックしてください。

The Gravity Forms block to add to content editor

Gravity Forms は作成したフォームを投稿に追加します。

また、デフォルトで「フォームのタイトル」と「フォームの説明」が含まれていることにもお気づきでしょう。

Gravity Forms includes title and descriptions by default

すべての設定が完了したら、「保存」ボタンをクリックします。

これであなたのウェブサイトに Gravity Forms フォームを作成し、埋め込むことができました。

Gravity Forms on a live website

10.ワードプレスにマイクロソフトフォームを埋め込む方法

Microsoft FormsはOffice 365のアカウントを持っているため、すでに使い慣れたツールであるため、フォームの作成にMicrosoft Formsを使いたいと思う人もいるだろう。また、Excelなど他のMicrosoft製品と自動的に統合されるため、データの収集や管理も簡単になる。

Microsoft Forms にはアンケート、クイズ、投票を作成するためのビルトインオプションがあります。フォームの埋め込みコードをコピーして WordPress サイトに追加すれば、Microsoft 365 フォームを WordPress に簡単に埋め込むことができます。

まず、Office 365アカウントのMicrosoft Formsを使ってフォームを作成します。

Office 365のホームページから「サインイン」をクリックして始めよう。

Signing in to Ms 365

ログイン後、ページ左上のメニューアイコンをクリックしてください。

次に、「フォーム」を探してクリックする。

Ms Forms

テンプレートギャラリーが新しいタブで開きます。そして、作りたいフォームを選択することができます。

Microsoft Forms にはアンケート、クイズ、招待、登録の 4 つのフォームがあります。このチュートリアルでは「招待」を選びます。クリックしてみましょう。

Choosing form type

Microsoft Forms エディターが新しいタブで開きます。ここからまずテンプレートを選びます。

テンプレートのオプションは左側のパネルで調べることができます。今回は招待フォームを作成するので、様々な目的に合わせた7つのテンプレートが用意されています。

このチュートリアルでは、結婚式の招待状テンプレートを使用します。デフォルトのテンプレートはエディターでこのように表示されます:

Wedding invitation form

右側のパネルを下にスクロールすると、このテンプレートが提供するデフォルトのフィールドがあります。

このテンプレートには、ユーザーの名前、参加人数、食物アレルギー、メールアドレスの4つのフィールドがあらかじめ設定されています。

さらに質問を追加したいとします。その場合、「+新しい質問を挿入」ボタンをクリックし、「日付」、「評価」、「テキスト」などの質問タイプを選択することができます。

既存のものを編集したい場合は、1つをクリックするだけで、カスタマイズオプションが表示されます。

Editing a field

ルック&フィールを変更するには、パレットアイコンをクリックします。

ここから、フォームのレイアウトや背景画像を変更することができます。

Styling wedding invitation form

歯車のアイコンをクリックして、設定タブに切り替えることができます。

Microsoft Formsはすでにいくつかの基本的な設定を行っています。

しかし、「終了日」を有効にして、回答に基づいて戦略的に結婚式を計画するのに役立てたり、「各回答のメール通知を受け取る」を有効にして、回答が紛失しないようにバックアップデータを取っておくとよいでしょう。

必要であれば、事前に設定した確認メッセージを編集することもできます。

Configuring wedding invitation form

フォームの準備ができたら、今度はそれを立ち上げる番だ。

フォームビルダーで、「回答を収集する」ボタンをクリックします。

Collect responses button

表示されるポップアップで、「</>」または埋め込みアイコンをクリックします。

サイトに追加したショートコードが表示されるはずです。先に進み、「コピー」をクリックする。

Copying MS Forms shortcode

このコードを「カスタムHTML」ブロックを使って投稿やページに貼り付けることができる。

WordPressのコンテンツエディターで、「+」ボタンをクリックしてブロックを追加します。次に、検索バーを使って「カスタムHTML」ブロックを探します。

このブロックをクリックして、コンテンツエディターに追加してください。

Adding custom HTML block

ここから、Microsoft Formsのショートコードをテキストエリアに貼り付けます。

エディターにプレビューが表示されなくても心配しないでください。

Embedding Ms Forms shortcode

これで、「Publish(公開)」または「Update(更新)」ボタンを押して、公開することができる。

デモサイトではこんな感じです:

Microsoft Forms on a live website

11.WordPressにHTMLフォームを埋め込む方法

HTMLフォームは通常手作業でコーディングされるため、ドラッグ&ドロップでフォームを編集できるエディターはありません。

幸いなことに、HTMLフォームの設定をより簡単にするフォームプラグインがある。最良のオプションのひとつがHTML Formsプラグインです。このプラグインは、訪問者から情報を集めるためのシンプルなお問い合わせフォームを設置するのに最適です。

The form code editor in HTML Forms

一番いいのは、HTMLフォームを使うのにコードを書く必要がないということです。

新規フィールドの追加は簡単です。利用可能なオプションからひとつ選ぶだけで、HTML Forms はフィールドのデータを調整するようあなたに尋ねます。

Adding a dropdown field in HTML Forms

フォームにフィールドを追加」ボタンをクリックすると、HTML FormsはデータをHTMLスニペットに変換し、「フォームコード」エリアに配置します。

以上で作業は終了です!変更を保存」ボタンをクリックして、進行状況を保存するのをお忘れなく。

さて、フォームを公開する時が来た。

HTML Forms を使えば、投稿、ページ、ウィジェットエリアにフォームを簡単に埋め込むことができます。そのためにはフォームのショートコードが必要です。フォームのショートコードは「フォームの編集」パネルの一番上にあります。

HTML Forms' shortcode

このショートコードをクリップボードにコピーしよう。

次に、HTMLフォームを表示したいページや投稿を開きます。このチュートリアルでは、フォームを’Contact’ページに追加します。

ブロックエディターに入ったら、「+」ボタンをクリックし、「カスタムHTML」を検索する。

The custom HTML block

その後、ショートコードを「カスタムHTML」ブロックに貼り付けることができます。

WordPressのブロックエディターではフォームが表示されません。しかしご心配なく。保存すればページに表示されます。

Adding HTML Forms shortcode

では、『保存』ボタンを押して、実際に見てみよう。

あなたのウェブサイトでは、このように見えるかもしれません:

HTML Forms on a live website

詳しい説明は、WordPressにHTMLフォームを追加する方法をご覧ください。

WordPressフォームの埋め込みに関するよくある質問

WordPressにフォームを埋め込むことについて質問がありますか?ここでは、簡単に始められる回答をいくつかご紹介します。

WordPressにフォームを埋め込むことはできますか?

WPFormsは最高の多目的フォームビルダーです。

WordPressにフォームをインストールするには?

まず、WordPressの管理画面からプラグイン 新規追加にアクセスしてください。次に、お好みのフォームプラグインを見つけ、インストールして有効化します。インストールが完了したら、プラグインを使ってフォームを作成し、ショートコードやブロックを使ってサイトに埋め込みます。

WordPressでWPFormsを設定するには?

WPFormsを設定するには、まずWPFormsプラグインをインストールして有効化する必要があります。次に、ドラッグアンドドロップビルダーを使用して新しいフォームを作成し、ショートコードまたはプラグインのブロックを使用してウェブサイトにフォームを埋め込むことができます。

プラグインなしでWordPressにフォームを作成するには?

プラグインを使わずに WordPress でフォームを作成するには、カスタム HTML と PHP が必要です。手動でフォームの HTML をページに追加し、テーマのfunctions.phpファイルでカスタム PHP を使って送信を処理することができます。これは初心者に優しくないので、代わりにフォームビルダーを使うことをお勧めします。

この記事で WordPress にフォームを埋め込む方法をご理解いただけたでしょうか?次に、Google アナリティクスで WordPress のフォームトラッキングを設定する方法とフォームからの離脱をトラッキングして減らす方法について、他のガイドもご覧ください。

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件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

返信を残す

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