WordPressのフォームは、訪問者とつながり、読者を増やすために不可欠です。お問い合わせフォーム、アンケート、フィードバックフォームなど、ウェブサイトに埋め込むことで、素早く簡単に訪問者から情報を集めることができます。
お問い合わせページからニュースレター購読、さらにはチェックアウトフォームまで、私たちはすべてのプロジェクトでフォームを使用しています。その過程で、私たちは WordPress フォームを埋め込むために必要なすべてのステップを学びました。
このガイドでは、最も人気のある WordPress フォームビルダーを使ってフォームを埋め込む方法を紹介します。
WordPressフォームとは何か、なぜ重要なのか?
WordPressのフォームは、ウェブサイト上の貴重な情報や洞察を収集するためのツールです。訪問者が名前、メールアドレス、フィードバックなどの詳細を入力することができます。
フォームには様々な用途があります。例えば、ユーザーがあなたに連絡を取ったり、Eメールリストを作成するためのお問い合わせフォームや、意見を集めるためのアンケートフォーム、イベント用の登録フォームなどを作成することができます。
また、予約や寄付金集めにフォームを使うこともできます。また、カスタマーサポートの依頼にフォームを使うビジネスもあります。
フォームがなければ、訪問者と関わるチャンスを逃してしまうかもしれません。ですから、WordPressのウェブサイトにフォームを追加することは、ウェブサイトオーナーにとって賢い選択なのです。
WordPressにフォームを埋め込む方法
以下のセクションでは、WordPress サイトにフォームを追加するための各ステップを説明します。特定のフォームタイプに興味がある場合は、リンクをクリックして記事を読み飛ばすことができます:
- How to Embed WPForms Into Your WordPress Site
- How to Embed Donation Forms in WordPress
- How to Embed HubSpot Forms in WordPress
- How to Embed Google Forms in WordPress
- How to Embed Zoho Forms in WordPress
- How to Embed Email Signup Forms in WordPress
- How to Embed Payment Forms in WordPress
- How to Embed Formidable Forms in WordPress
- How to Embed Gravity Forms in WordPress
- How to Embed Microsoft Forms in WordPress
- How to Embed HTML Forms in WordPress
- Frequently Asked Questions About Embedding WordPress Forms
準備はいいかい?始めよう
1.WordPressサイトにWPFormsを埋め込む方法
WPFormsは市場で最高の多目的フォームビルダーです。600万人以上のアクティブユーザーを持つ、最も人気のあるフォームビルダーの一つでもあります。
このツールを使えば、2000以上ある既製のカスタマイズ可能なテンプレートを使って、好きなフォームを作成することができます。
お問い合わせフォームだけでなく、WPFormsはシンプルなフォームから高度なフォームまで簡単に作成することができます:
WPFormsの埋め込みに関しては、WPFormsブロックかショートコードを使うことができます。
それでは、WPFormsをインストールして有効化し、一緒に試してみましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドを参照してください。
次に、WordPressでお問い合わせフォームを作成する方法をステップバイステップで説明します。
WPFormsブロックを使ったWPFormsフォームの埋め込み
フォームを公開する準備ができたら、フォームビルダー内の’埋め込み’ボタンをクリックするだけで、WPFormsブロックを使ってウェブページにフォームを追加することができます。
ポップアップウィンドウが開き、既存のページを選択するか、フォーム用の新規ページを作成することができます。
既存のページを選択」ボタンをクリックすると、ドロップダウンメニューが表示され、あなたのウェブサイトで利用可能なすべてのページが表示されます。新規ページを作成」をクリックすると、「ページ名」フィールドが表示されます。
ページを選んだり、新規ページの名前を決めたら、「Let’s Go!
その後、ページのブロックエディターにリダイレクトされます。
ここから’+’ボタンをクリックし、WPFormsブロックを検索することができます。
次のステップは、WPForms ブロックのドロップダウンを開き、埋め込みたいフォームを選択することです。
フォームを選択すると、WPFormsはそれをブロックエディタに読み込みます。
その後、右側のパネルにある「フォームの設定」をいじってみてください。
デフォルトでは WPForms はフォームタイトルを読み込みません。そこで、’フォームタイトル’ オプションをオンにしてフォームタイトルを追加し、訪問者にもっと文脈を与えるようにするとよいでしょう。フォームの説明を書く場合、このオプションをオンにすることもできます。
さらに良いことに、サイト全体のルック&フィールにマッチするテーマでフォームをスタイルすることができます。
フォームの見た目に満足したら、先に進んで「保存」をクリックします。
これがWPFormsブロックを使ってWPFormsを埋め込む方法です。
ショートコードを使ったWPFormsフォームの埋め込み
WPFormsを埋め込むもう一つの方法は、ショートコードを使うことです。
これを行うには、WPForms ” All Formsで各フォームの ‘Shortcode’ カラムを探します。
ここから、埋め込みたいフォームのショートコードをコピーするだけです。例えば、’カスタマーレビュー’フォームのショートコードをコピーします。
次のステップは、フォームを埋め込むページまたは投稿を開くことです。そのためには、’Pages’ か ‘Posts’ に行く。そして、いずれかにマウスオーバーし、表示されたら’編集’をクリックする。
これにより、ページまたは投稿のエディターに移動します。
フォームを埋め込むには、「+」ボタンをクリックして「ショートコード」ブロックを探しましょう。
ブロックが追加されたら、WPFormsフォームのショートコードをテキストフィールドに貼り付けます。
こんな感じだろう:
ブロックエディターがライブ編集エリアにフォームを読み込まない。
そこで、まず変更を保存し、左下に表示される「View Page」ボタンをクリックする。
2.WordPressに寄付フォームを埋め込む方法
ウェブサイトに寄付フォームを追加することで、人々が簡単にあなたの活動を支援できるようになります。明確でシンプルな方法があれば、訪問者は寄付をしやすくなります。
WordPressに寄付フォームを埋め込む最も簡単な方法は、Charitableプラグインを使用することです。この人気のあるツールを使えば、100以上の既成テンプレートで複数の募金キャンペーンを作成し、カスタマイズすることができます。
それでは、寄付フォームを作成するためにCharitable をインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法をご覧ください。
アクティベーションが完了したら、Charitable ” SettingsにアクセスしてProライセンスをアクティベートしましょう。ライセンスキーを貼り付け、’Verify Key’をクリックするだけです。
これで寄付フォームを作成する準備ができました。詳しい手順については、WordPressで定期寄付フォームを作成する方法をご覧ください。
フォームの見た目に満足したら、WordPressの投稿やページに埋め込むことができます。
キャンペーンビルダーでは、まず「下書き」ドロップダウンをクリックしてオプションを開きます。Chitableが自動的にキャンペーン用の新しいページを作成します。
これで、初めてのチャリタブル・キャンペーンの作成と公開に成功したことになります!
今、あなたのウェブサイトを訪問すれば、寄付フォームが動いているのを見ることができます。
とはいえ、ポップアップウィンドウの「埋め込みウィザード」リンクや、Charitableエディタの「埋め込み」ボタンにお気づきかもしれません。
また、これらの機能のいずれかを使って、他の投稿やページに寄付フォームを追加することもできます。
これを行うには、’Embed Wizard’リンクまたは’Embed’ボタンをクリックするだけです。
表示されるポップアップで、既存のページを選択するか、新規ページを作成するかを選択する必要があります。
すでに専用の寄付フォームページがあるので、「既存のページを選択」を選ぶのがよいでしょう。先に進んでボタンをクリックしてください。
すると、WordPressサイト内の全ページのリストがドロップダウンで表示されます。
ドロップダウンメニューを展開してページを選び、「Let’s Go」ボタンをクリックします。
これでページのブロックエディターにリダイレクトされます。
ここから「+」ボタンをクリックし、「Charitable Campaign」ブロックを検索することができます。そして、検索結果をクリックするだけで、コンテンツエディターに追加されます。
その後、「慈善キャンペーン」ブロックのドロップダウンから埋め込む寄付フォームを選択できるようになります。
ドロップダウンメニューを展開してください。追加したいキャンペーンをクリックしてください。
コンテンツエディターでプレビューが見えなくても心配しないでください。ブロックは問題なく動作します。
では、『保存』、『更新』、『公開』ボタンをクリックして、本番にしましょう。
これで終わりです!このページで、寄付フォームを実際に見ることができます:
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メールを使用することもできます。
HubSpotアカウントにサインインまたは作成すると、WordPressウェブサイトとの接続を求められます。
ウェブサイトを接続」ボタンをクリックするだけで、HubSpotがプロセスを開始します。
接続が完了したら、HubSpotプラグインを使ってHubSpotフォームを作成する準備が整いました。
HubSpot ” Formsに移動します。次に、「フォームを作成」ボタンをクリックします。
ここからフォームタイプとテンプレートを選択します。フォームビルダーでHubSpotフォームをカスタマイズできます。
詳しい手順は、WordPressでHubSpotフォームを作成する方法の最初の方法をご覧ください。
フォームの見た目に満足したら、次のステップはサイトに埋め込むことです。当然、フォームビルダー内の ‘埋め込み’ ボタンを使います。
しかし、この方法は少しわかりにくい。
フォームのリンクを共有し、WordPressの投稿やページでHTMLスニペットを使用することができます。
代わりに、「WordPressに戻る」ボタンをクリックし、管理エリアのHubSpotダッシュボードからフォームを埋め込むことができます。
左上のボタンをクリックしてください。
ここから、埋め込みたいフォームにマウスオーバーするだけです。
その後、『埋め込み』ボタンが表示されたらクリックするだけです。
ポップアップウィンドウが表示され、HubSpotがフォームを埋め込む方法をいくつか紹介します。
ここでは、HubSpotブロックを使ってHubSpotフォームを投稿やページに埋め込むかどうかを選択できます。他のタブに切り替えると、フォームのショートコードが表示されます。
このチュートリアルでは、「WordPress Post」ボタンをクリックします。
投稿’ページが新しいタブで開きます。投稿にマウスオーバーして「編集」をクリックし、フォームを埋め込む投稿を開いてください。
コンテンツエディターでページにHubSpotフォームブロックを追加します。
ここから「+」ボタンをクリックし、検索バーを使ってHubSpot Formブロックを探します。見つけたらクリックしてください。
これでコンテンツエリアにHubSpotフォームブロックが追加されます。
次にドロップダウンメニューをクリックして、利用可能なオプションを開きましょう。次に、埋め込みたいHubSpotフォームを選択します。
これで完了です!これで「保存」ボタンをクリックして変更を保存することができます。
デモサイトではこんな感じです:
WPFormsのHubSpotアドオンを使ってHubSpotフォームを埋め込む
WPFormsを使ってHubSpotフォームを作成することで、複数のプラグインを使いこなす手間をかけずにフォームやお問い合わせフォームを管理することができます。
WPFormsはフォームの作成とHubSpotとの統合を一箇所で行います。これにより、WPFormsのドラッグ&ドロップビルダーやテンプレートを利用しながら、フォームデータをHubSpotと自動的に同期させることができるため、プロセスが簡素化されます。
注:WPFormsでHubSpotアドオンを使用するには、Eliteプランが必要です。HubSpotアドオンとProプランのすべての機能に加えて、無制限のWordPressサイトでプラグインを使用し、プレミアムサポートを解除することができます。マーケティングエージェンシーを運営されている方には最適です。
まず最初に行う必要があるのは、WPFormsプラグインのインストールと有効化です。WordPressプラグインのインストール方法の詳細ガイドをご覧ください。
アクティベーションの際、WPForms ” Settingsでライセンスキーを確認する必要があります。
ライセンスキーはWPFormsアカウントにあります。クリップボードのアイコンをクリックしてコピーしてください。その後、WordPressタブに戻り、’ライセンスキー’フィールドに記入することができます。
Verify Key “ボタンをクリックして、プランを有効にしてください。
では、管理画面のダッシュボードからWPForms ” AddonsにアクセスしてHubSpot Addonをインストールしてみましょう。
ここから下にスクロールして、HubSpotアドオンを見つけます。次に、「アドオンのインストール」ボタンをクリックします。
アドオンを有効化した後、WordPressダッシュボードからWPFormsの’設定’パネルに移動し、’統合’タブに切り替える必要があります。
ここでHubSpot CRMアカウントをWPFormsに接続することができます。新規アカウントを追加」をクリックし、アカウントの詳細を入力してください。
WPFormsからHubSpotフォームを作成し、埋め込みます。
まず、WPForms ” 新規追加 でフォームを作成します。次の画面で、フォームに名前を付け、フォームテンプレートを選択します。
その後、フォームビルダーを使ってテンプレートをカスタマイズできます。
すでにすべてがうまくいっているようであれば、遠慮なく「Marketing」パネルに切り替えてください。ここから’HubSpot’オプションを開き、フォームをプラットフォームに接続しましょう。
HubSpotのアカウント情報を入力し、設定画面の指示に従います。
完了したら、WPFormsブロックまたはフォームのショートコードを使用してフォームを公開できます。詳しくは、WordpressでHubSpotフォームを作成する方法をご覧ください。
4.WordPress に Google フォームを埋め込む方法
WPFormsをはじめとするWordPressフォーム作成ツールはとても使いやすいです。WordPressサイト上で動作し、支払いを受け付けるフォームの作成、ログインフォームの作成、カスタムユーザー登録フォームの作成など、様々なことができます。
しかし、時には異なるウェブサイトやプラットフォームでフォームを共有する必要があるかもしれません。
そのような場合、Googleフォームはとても便利です。共有が簡単で、携帯電話でもうまく機能し、すべての回答を一か所にまとめておくことができます。さらに、Googleドライブに保存された回答は、共同作業者を追加することができます。
Google フォームを WordPress に埋め込むには、まずGoogle フォームのウェブサイトでフォームを作成します。フォームへ移動’ ボタンをクリックするだけです。
次の画面では、様々なフォームテンプレートが表示されます。そのうちの一つをクリックして、ビルドを開始してください。
白紙のフォーム」をクリックしてゼロから始めることもできる。
テンプレートを選んだら、フォームのカスタマイズを始めましょう。ここでは、あなたが行う必要があるかもしれないいくつかのことを示します:
- フォームのタイトルを作成する。
- フォームの説明を入力してください。
- あなたの目標に合わせてフィールドをカスタマイズしてください。
また、AIツールを使用して、質問に最も適したフィールドを選択することもできます。
フォームの形に満足したら、「送信」ボタンをクリックします。ポップアップウィンドウが開き、フォームの埋め込みコードが表示されます。
このコードをコピーしたら、WordPressでフォームを表示したいページや投稿を開きます。
ページまたは投稿のコンテンツエディターで「+」ボタンをクリックし、「カスタムHTML」ブロックを探しましょう。先に進み、それをクリックしてページに追加します。
そして、Googleフォームの埋め込みコードをカスタムHTMLブロックに貼り付けるだけです。
完了したら、’更新’または’公開’ボタンを忘れずにクリックしてください。これで、あなたのウェブサイトにアクセスすると、Googleフォームが表示されているはずです。
より詳細なステップバイステップの手順については、WordPressにGoogleフォームを埋め込む方法のガイドを参照してください。
5.Zoho Forms を WordPress に埋め込む方法
Zoho Formsはあらゆる種類のフォームを簡単に作成できる素晴らしいツールです。お問い合わせフォーム、アンケート、登録フォーム、注文フォームなど、Zoho Formsならどんなフォームも簡単に作成できます。
しかも、Zoho フォームを WordPress サイトに埋め込むのは簡単です。その前に、まずフォームを作りましょう。
まずはZoho Formsのウェブサイトでアカウントを作成してください。無料サインアップ」をクリックするだけです。
アカウントを作成したら、フォームの作成を開始できます。
まず、フォームビルダーの「新規フォーム」ボタンをクリックします。
Zoho Formsには3つのフォーム作成方法があることがわかります:
- 標準またはカード・フォーム・タイプを使って、ゼロからフォームを作成します。
- 既製のフォームテンプレートを使用する。
- CRMフォームの作成は、Proプランにアップグレードした場合にのみ利用できる機能です。
このガイドでは、「ウェブサイトのフィードバック」テンプレートを選択します。
では、『このテンプレートを使う』ボタンをクリックしてみよう。
これで Zoho Forms フォームビルダーの画面になります。
左側のパネルにはすべてのカスタマイズオプションがあり、右側にはフォームプレビューがあります。ドラッグ&ドロップするだけでフォームに要素を追加できます。
Zoho Formsでは、ウェブサイトのテーマに合わせてフォームのテーマを変更することもできます。
これを行うには、「テーマ」タブに移動します。そして、使いたいテーマにマウスオーバーして「適用」をクリックするだけです。
すでにすべてがうまくいっているようなら、「共有」タブに切り替えることができる。
このタブで、Zoho Forms にはフォームを埋め込むためのたくさんのオプションがあることがわかります。
WordPressサイトに埋め込むので、Embed ” Website Buildersに向かいましょう。そして、「Go to WordPress」ボタンをクリックします。
WordPress のプラグインディレクトリにあるZoho Forms のページにリダイレクトされます。
プラグインをインストールするだけです。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。
有効化すると、Zoho Forms を埋め込みたい投稿やページを開くことができます。ここで ‘+’ ボタンをクリックし、Zoho Forms ブロックを選択します。
ブロックが追加されたら、「Zoho Formsにアクセス」ボタンをクリックします。
パーマリンクで埋め込む」リンクもありますが、この方法は初心者に優しくないのでお勧めしません。
次に、Zohoアカウントを登録したドメインを選択するよう促されます。
この場合、ドロップダウンメニューから「zoho.com
」を選び、「Connect」をクリックする。
その後、埋め込みたいフォームを選択できます。
ドロップダウンをクリックし、利用可能なオプションから1つを選択するだけです。次に、下にスクロールして「埋め込み」ボタンをクリックします。
コンテンツエディターがZohoフォームを読み込みます。
気に入ったものがあれば、「保存」ボタンをクリックしてください。
このページにアクセスすると、Zohoフォームが表示されます。
こんな感じだろう:
上の画像から、Zoho Forms のテーマを使うとフォームをウェブサイトのデザインに合わせやすくなることもわかります。
6.WordPressにメール登録フォームを埋め込む方法
OptinMonsterは、典型的なフォームビルダーではありませんが、ユーザー登録フォームを作成し、Eメールリストを作成するのに最適なツールです。
WPBeginnerでは、このリードジェネレータツールを使用して素晴らしい結果を得ています。例えば、OptinMonsterを使用することで、メール購読者を600%増加させることができました。
メール登録フォームを設置する際、スライドインやライトボックスポップアップなど様々なキャンペーンタイプを使用することができます。OptinMonsterのメール登録フォームの埋め込みについて説明する前に、フォームの準備をしましょう。
まず、OptinMonsterのウェブサイトで「今すぐOptinMonsterを入手する」ボタンをクリックして、OptinMonsterのアカウントを作成する必要があります。
これで価格設定ページが表示されます。
人気の高いProプランには「Exit Intent」機能が含まれていますので、Proプランをお勧めします。WPBeginner限定のOptinMonsterクーポンコードで10%OFFにすることもできます。
ご購入を完了するには、お支払い情報を入力し、お支払いを進めてください。
それでは、OptinMonster WordPressプラグインをインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
このプラグインはあなたのWordPressサイトをOptinMonsterに接続します。WordPressの管理画面からOptinMonster ” 設定に移動します。そして、先に進み、「既存のアカウントを接続する」をクリックします。
接続が完了したら、OptinMonsterのメール登録フォームを作成する準備ができました。詳しい手順は、OptinMonsterを使ってWordPressでEメールリストを作成する方法をご覧ください。
OptinMonsterの詳細な表示ルールにより、適切なキャンペーンを適切な人に適切なタイミングで表示することができ、コンバージョン率を高めることができます。これらの設定は、キャンペーンビルダーの表示ルールに 向かうことで見つけることができます。
ここでは、顧客の行動に基づいて、キャンペーンをいつ、どこに表示するかをコントロールできます。
また、モバイルユーザーとデスクトップユーザーで異なるレイアウトを表示するなど、オーディエンスごとにキャンペーンをカスタマイズすることもできます。
OptinMonsterは、特定の日や場所に基づいてルールを設定することができますので、ブラックフライデーのオファーや国別のホリデーをテーマにしたポップアップのようなターゲットを絞ったキャンペーンを実施することができます。
さらに、OptinMonsterのエグジットインテントテクノロジーは、あなたのサイトを去ろうとしている訪問者を回復するのに役立ちます。この機能により、ユーザーの行動をトラッキングし、サイトからの退出直前にターゲットメッセージをトリガーすることで、より多くのメール購読者を獲得し、コンバージョンを増加させることができます。
すべて満足したら、いよいよリードジェネレータフォームをウェブサイトに埋め込みます。
ビルダーから「保存」ボタンをクリックするだけで、処理が開始されます。
変更が保存されたことを確認したら、’Publish’タブに切り替えることができます。
ここから、ステータスを「下書き」から「公開」に変更します。すると、’Publish’タブが’Published’に変わり、一時停止のアイコンがチェックマークに変わっているのがわかります。
キャンペーンエディターを閉じて、OptinMonster ” キャンペーンに移動することができます。
次のステップは、メールサインアップポップのステータスを「保留」から「公開」に変更することです。保留中」リンクをクリックしてドロップダウンメニューを開き、「公開」オプションを選択します。
そうだ!
これで、あなたのウェブサイトにアクセスすると、Eメール登録ポップアップが表示されます。
7.WordPressに決済フォームを埋め込む方法
単一の製品を販売したいだけだったり、完全なショッピングカートを設置したくない場合は、Easy Digital DownloadsやWooCommerceのような包括的なeコマースプラグインを使用するのはやりすぎかもしれません。シンプルな支払いフォームをカスタマイズすることで、カスタムの金額を受け取ったり、いくつかの商品を販売したりすることができます。
そこでWP Simple Payが役立ちます。
WP Simple Payは、完全なeコマースプラグインを必要とせずにStripeの支払いを受け入れるための最良の選択です。
また、クレジットカード決済、Apple Pay、Google Payなど、他の支払い方法にも対応しています。非営利団体、中小企業、ボランティアなど、支払いを集めるためのシンプルなソリューションを必要としている方に最適です。
支払いフォームを埋め込むには、まずWP Simple Payプラグインをインストールする必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。
有効化後、セットアップウィザードに従ってStripeに接続するだけです。
接続が完了したら、WP Simple Payを使って支払いフォームを作成する準備ができました。
詳細な手順については、WordPress で支払いオプションを持つフォームを作成する方法の最初の方法をご覧ください。
支払いフォームが完成したら、「公開」ボタンをクリックしてください。その後、フォームのショートコードをコピーして投稿やページに埋め込むことができます。
WordPressのコンテンツエディターで「+」ボタンをクリックし、「ショートコード」ブロックを選択します。
次に、フォームのショートコードをテキストエリアに貼り付けます。
WP Simple Payはデフォルトで支払いフォームをテストモードで作成します。これは訪問者からの支払いをまだ受け付けられないことを意味します。
これを修正するには、WordPressダッシュボードのWP Simple Pay ” Payment Formsに移動しましょう。そして、作成したばかりのフォームにマウスオーバーし、表示されたら「編集」をクリックします。
このパネルでは、「支払い」セクションに移動します。
最後に「ライブモード」のラジオボタンをクリックし、「アップデート」をクリックします。
こうしてWP Simple Payフォームを埋め込み、利用者からの支払いを受け付けるようになります。
デモサイトではこんな感じです:
8.Formidable フォームを WordPress に埋め込む方法
Formidable Formsは、住宅ローンや車の支払い、生命保険などの高度なフォームを作成するのに最適なツールです。あなたのWordPressウェブサイトで使える225以上のフォームテンプレートを提供しています。
Formidable Formsでフォームを作る方法の詳細については、Formidable Formsのレビューをご覧ください。
Formidable Forms を使えば、どんな投稿やページにも簡単にフォームを設置することができます。フォームの作成が終わったら、フォームビルダーの「埋め込み」ボタンをクリックしてください。
ポップアップウィンドウが開き、フォームを追加する場所を選択できます。3つのオプションがあります:既存のページを選択」、「新規ページを作成」、「手動で挿入」の3つです。
手動で挿入する」オプションを選択すると、ちょっとしたコードを扱う必要があります。初心者の方にとっては少々気が引けるかもしれませんので、お勧めしません。
このチュートリアルでは、「既存のページを選択」を選びます。
次に、別のプロンプトのポップアップが表示される。
ここでドロップダウンメニューを開き、ページを選択します。例えば、デモサイトの’Home’ページにフォームを埋め込むことにしました。
ページを選択したら、「フォームの挿入」ボタンをクリックします。
これでページのブロックエディターが開き、フォームがすでにページに埋め込まれていることがわかるはずです。
これでページを更新する準備ができた。
保存』ボタンを押してください。
デモサイトではこんな感じです:
9.WordPress に Gravity Forms を埋め込む方法
Gravity Formsは WordPress の強力なフォーム作成プラグインですが、プレミアム版のみです。
このフォームビルダーには幅広い機能とカスタマイズオプションがあります。アンケート、クイズ、登録、注文フォームなど多くの種類のフォームを作成することができます。
Gravity Formsを使ってフォームを作成するには、Gravity Formsのウェブサイトからプラグインを購入する必要があります。
その後、あなたのサイトにインストールして有効化することができます。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。
有効化したら、WordPress ダッシュボードのGravity Forms ” 新規フォームに移動して ‘新規追加’ をクリックします。
次の画面で、フォームテンプレートを選択します。
このポップアップ・ウィンドウで、使いたいテンプレートを探すことができます。テンプレートが見つかったら、マウスオーバーして「Use Template」ボタンをクリックしてください。
次に、フォームの名前と簡単な説明を入力するプロンプトが表示されます。
例として以下の画像を使うことができる:
もう一度「テンプレートを使用」をクリックして、フォームの作成を開始します。
Gravity Forms のドラッグアンドドロップビルダーが開きますので、右側のフィールドを使ってフォームをカスタマイズしてください。
フォームの準備ができたら、’フォームを保存’ボタンをクリックして、変更が保存されていることを確認してください。
そして、『埋め込み』をクリックする。
Gravity Forms のフォームを埋め込むには、既存のページに埋め込むか、新規ページに埋め込むか、クラシックエディタを使っている人のためにショートコードで埋め込むかの3つのオプションがあります。
このチュートリアルでは Gravity Forms を既存の Web ページに埋め込む方法を紹介します。
ここから「投稿」ラジオボタンを選択します。すると、ドロップダウンメニューが表示され、WordPressウェブサイト上で公開されている投稿を選択することができます。
フォームの挿入」ボタンをクリックする。
するとページのコンテンツエディターにリダイレクトされ、「フォーム」ブロックを追加するよう促されます。それをクリックしてください。
Gravity Forms は作成したフォームを投稿に追加します。
また、デフォルトで「フォームのタイトル」と「フォームの説明」が含まれていることにもお気づきでしょう。
すべての設定が完了したら、「保存」ボタンをクリックします。
これであなたのウェブサイトに Gravity Forms フォームを作成し、埋め込むことができました。
10.ワードプレスにマイクロソフトフォームを埋め込む方法
Microsoft Formsは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つのフィールドがあらかじめ設定されています。
さらに質問を追加したいとします。その場合、「+新しい質問を挿入」ボタンをクリックし、「日付」、「評価」、「テキスト」などの質問タイプを選択することができます。
既存のものを編集したい場合は、1つをクリックするだけで、カスタマイズオプションが表示されます。
ルック&フィールを変更するには、パレットアイコンをクリックします。
ここから、フォームのレイアウトや背景画像を変更することができます。
歯車のアイコンをクリックして、設定タブに切り替えることができます。
Microsoft Formsはすでにいくつかの基本的な設定を行っています。
しかし、「終了日」を有効にして、回答に基づいて戦略的に結婚式を計画するのに役立てたり、「各回答のメール通知を受け取る」を有効にして、回答が紛失しないようにバックアップデータを取っておくとよいでしょう。
必要であれば、事前に設定した確認メッセージを編集することもできます。
フォームの準備ができたら、今度はそれを立ち上げる番だ。
フォームビルダーで、「回答を収集する」ボタンをクリックします。
表示されるポップアップで、「</>」または埋め込みアイコンをクリックします。
サイトに追加したショートコードが表示されるはずです。先に進み、「コピー」をクリックする。
このコードを「カスタムHTML」ブロックを使って投稿やページに貼り付けることができる。
WordPressのコンテンツエディターで、「+」ボタンをクリックしてブロックを追加します。次に、検索バーを使って「カスタムHTML」ブロックを探します。
このブロックをクリックして、コンテンツエディターに追加してください。
ここから、Microsoft Formsのショートコードをテキストエリアに貼り付けます。
エディターにプレビューが表示されなくても心配しないでください。
これで、「Publish(公開)」または「Update(更新)」ボタンを押して、公開することができる。
デモサイトではこんな感じです:
11.WordPressにHTMLフォームを埋め込む方法
HTMLフォームは通常手作業でコーディングされるため、ドラッグ&ドロップでフォームを編集できるエディターはありません。
幸いなことに、HTMLフォームの設定をより簡単にするフォームプラグインがある。最良のオプションのひとつがHTML Formsプラグインです。このプラグインは、訪問者から情報を集めるためのシンプルなお問い合わせフォームを設置するのに最適です。
一番いいのは、HTMLフォームを使うのにコードを書く必要がないということです。
新規フィールドの追加は簡単です。利用可能なオプションからひとつ選ぶだけで、HTML Forms はフィールドのデータを調整するようあなたに尋ねます。
フォームにフィールドを追加」ボタンをクリックすると、HTML FormsはデータをHTMLスニペットに変換し、「フォームコード」エリアに配置します。
以上で作業は終了です!変更を保存」ボタンをクリックして、進行状況を保存するのをお忘れなく。
さて、フォームを公開する時が来た。
HTML Forms を使えば、投稿、ページ、ウィジェットエリアにフォームを簡単に埋め込むことができます。そのためにはフォームのショートコードが必要です。フォームのショートコードは「フォームの編集」パネルの一番上にあります。
このショートコードをクリップボードにコピーしよう。
次に、HTMLフォームを表示したいページや投稿を開きます。このチュートリアルでは、フォームを’Contact’ページに追加します。
ブロックエディターに入ったら、「+」ボタンをクリックし、「カスタムHTML」を検索する。
その後、ショートコードを「カスタムHTML」ブロックに貼り付けることができます。
WordPressのブロックエディターではフォームが表示されません。しかしご心配なく。保存すればページに表示されます。
では、『保存』ボタンを押して、実際に見てみよう。
あなたのウェブサイトでは、このように見えるかもしれません:
詳しい説明は、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.
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!