AI要約
WordPress のページに WPForms を追加する方法を学びたいですか？
私はしばらくの間 WPForms を使ってきました。新規ユーザーからよく寄せられる質問の 1 つは、フォームビルダーから実際のページにフォームを移動する方法です。
良いニュースは？WPForms には 5 つの異なる方法があり、それぞれ数回クリックするだけで完了します。このガイドでは、すべての方法を説明するので、ご自身の環境に最適な方法を選択できます。
WordPressのページにWPFormsを追加するにはどうすればよいですか？
WPFormsを使えば、サイトのどこにでも簡単にフォームを表示できます。
組み込みの埋め込みウィザード、WordPressブロックエディター、ショートコード、ウィジェット、またはElementorやDiviのようなページビルダーを使用できます。
以下の5つの方法すべてを説明します。どれを選ぶべきかわからない場合は、方法1から始めてください。それが最も速いです。
始める前に
フォームをページに追加する前に、2つのものを準備しておく必要があります。
1. WPFormsのインストールと有効化
まだインストールしていない場合は、WordPressサイトにWPFormsプラグインをインストールしてください。WPForms LiteはWordPress.orgから無料でダウンロードできます。または、アカウントからProバージョンをアップロードすることもできます。ヘルプが必要な場合は、WordPressにプラグインをインストールする方法についてのこのステップバイステップガイドをご覧ください。
2. フォームを作成する
次に、WordPressダッシュボードのWPForms » Add Newに移動します。WPFormsには、ドラッグアンドドロップフォームビルダーと、すぐに始められる2,100以上のフォームテンプレートが用意されています。テンプレートを選択し、必要なフィールドをカスタマイズして、Saveをクリックします。
これでセットアップは完了です。それでは、フォームをページに追加しましょう。
方法1：埋め込みウィザードを使用する
これはWPFormsをページに追加する最も速い方法です。フォームビルダーを離れる必要さえありません。フォームを作成または編集した後、ビルダーの右上にあるEmbedボタンをクリックします。
ポップアップで2つのオプションが表示されます：新しいページを作成するか、既存のページを選択します。
新しいページに埋め込む
フォーム用の新しいページが必要な場合は、Create New Pageをクリックします。ページの名前を入力し、Let’s Goをクリックします。
フォームがすでに埋め込まれた状態で、ページエディターに直接移動します。あとはPublishをクリックするだけです。
既存のページに埋め込む
すでにフォームを配置したいページがありますか？Select Existing Pageをクリックし、ドロップダウンからページを選択します。
Let’s Goをクリックすると、そのページの編集画面にリダイレクトされます。ここから、WPFormsブロックをページに追加する必要がある場合があります（次の方法で説明します）。変更を保存するには、Updateをクリックします。
方法2：ブロックエディターを使用する
すでにページを編集していて、フォームを挿入したい場合は、WPFormsブロックを直接追加できます。
フォームを配置したいページを開きます。左上隅にあるプラス（+）アイコンをクリックして、ブロックライブラリを開きます。
「WPForms」を検索するか、Widgetsセクションまでスクロールします。WPFormsブロックをクリックして、ページに追加します。
次に、Select a Formドロップダウンから表示したいフォームを選択します。
フォームはエディターに直接表示されます。準備ができたら公開または更新をクリックしてください。
WPFormsブロック設定を構成する
フォームを追加すると、右側のサイドバーパネルに追加の設定が表示されます。
調整できる項目は次のとおりです。
- タイトルを表示および説明を表示：これらをオンにすると、フォームフィールドの上にフォームの名前と説明が表示されます。
- フォームのスタイル：WPFormsを使用すると、CSSを記述せずにブロックエディターで直接フォームをスタイル設定できます。フィールドのサイズ、色、ボタンのスタイルを視覚的に変更できます。
- 詳細設定：フォームの外観をより細かく制御する必要がある場合は、カスタムCSSクラスを追加します。
方法3：ショートコードを使用する
WPFormsは、作成したすべてのフォームに一意のショートコードを生成します。これは、クラシックエディター、ブロックを完全にサポートしていないテーマ、またはショートコードを受け入れるその他の領域を使用している場合に役立ちます。
フォームのショートコードを見つけるには、WordPressダッシュボードのWPForms » すべてのフォームに移動します。各フォームの横にショートコードが表示されます。次のようなものです。
ショートコードをコピーし、フォームを追加したいページまたは投稿を開きます。ショートコードブロックを追加（またはクラシックエディターの場合は直接貼り付け）し、ショートコードを入力して、公開または更新をクリックします。
方法4：ウィジェットを使用する（サイドバーまたはフッター）
サイドバーまたはフッターにフォームを表示したいですか？ウィジェットとして追加できます。これは、ニュースレターのサインアップ、簡単な連絡フォーム、またはサイト全体に表示したいリードキャプチャフォームに最適です。
WordPressダッシュボードの外観 » ウィジェットに移動します。
フォームを配置したいウィジェットエリア（サイドバー、フッターなど）を見つけてクリックして展開します。
エディターの左上隅にあるプラス（+）ボタンをクリックし、通常のページで行うのと同じように、WPFormsブロックを検索します。
ドロップダウンからフォームを選択します。
ウィジェット設定を保存するには、右上隅にある更新ボタンをクリックします。
ライブサイトのフッターウィジェットにフォームが表示される様子は次のとおりです。
より詳細なチュートリアルについては、WordPressサイドバーウィジェットに問い合わせフォームを追加する方法ガイドをご覧ください。
方法5：ページビルダーを使用する
ElementorまたはDiviでページを作成している場合、WPFormsは両方のネイティブ統合を備えています。ショートコードや回避策は必要ありません。
ElementorページにWPFormsを追加する
Elementorビルダーでページを開きます。左側のサイドバーで、基本セクションにあるWPFormsウィジェットを探します。フォームを表示したい場所にページにドラッグします。
ウィジェット設定のドロップダウンからフォームを選択します。Elementorは、ページ上でフォームのライブプレビューを表示します。
フォーム自体に変更を加える必要がある場合は、選択したフォームを編集リンクをクリックして、ポップアップウィンドウでフォームビルダーを開きます。
すべてがうまくいったら、Elementorビルダーの下部にある公開または更新をクリックします。
WPFormsは、フィールドの色、ボタンのスタイル、コンテナの背景など、Elementor内での完全なフォームスタイリングもサポートしています。
完全なチュートリアルについては、ElementorページにWPFormsを追加する方法のガイドをご覧ください。
DiviページにWPFormsを追加する
ページを開き、Diviビルダーを使用をクリックしてビジュアルエディターを起動します。レイアウトを選択し、ページに新しい行を追加します。
Diviでモジュールを挿入するように求められたら、WPFormsを検索して選択します。
モジュール設定で、フォームを選択ドロップダウンからフォームを選択します。フォームのタイトルと説明を表示したい場合は、トグルをオンにすることもできます。
緑色のチェックマークをクリックしてモジュールを保存し、ページを公開します。スタイリングと高度なオプションの詳細については、DiviページにWPFormsを追加する方法のガイドを参照してください。
ボーナス：フォームが埋め込まれている場所を追跡する
サイト全体にフォームを追加すると、それぞれがどこにあるかを覚えておくのが難しくなることがあります。WPFormsには、すべてのフォームがどこに埋め込まれているかを正確に表示する組み込み機能があります。
WPForms » すべてのフォームに移動します。次に、ページの上部にある画面オプションを開き、場所ボックスをチェックします。
これにより、すべてのフォームのテーブルに、各フォームを追加した場所の数を示す列が追加されます。それをクリックすると、特定のフォームのすべての場所が表示されます。
これにより、サイト全体を掘り下げることなく、お問い合わせフォームがどのページにあるかを常に確認できます。
WordPressにWPFormsを追加することに関するFAQ
WordPressサイトにフォームを追加するのは簡単ですが、定期的にいくつかの質問があります。最も一般的なものを以下に示します。
WPFormsフォームがページに表示されないのはなぜですか？
確認すべきことがいくつかあります。まず、フォームを追加した後、実際にページを公開または更新したことを確認してください。ショートコードを使用した場合は、フォームIDが正しいことを再確認してください。
ショートコードのタイプミスは、何も表示されない結果になります。一部のキャッシュプラグインは、ページの古いバージョンを提供する可能性があるため、サイトのキャッシュをクリアしてから再度確認してみてください。
同じフォームを複数のページに追加できますか？
はい。同じフォームを必要なだけ多くのページ、投稿、またはウィジェット領域に埋め込むことができます。このガイドのすべての方法は、サイト全体でフォームを再利用するために機能します。すべての送信は、WPForms » エントリの下の1か所に収集されます。
どの埋め込み方法を使用すべきですか？
状況によります。簡単なガイドを以下に示します。
- 埋め込みウィザード：最も簡単なオプションです。フォームの作成または編集中で、すぐに公開したい場合に使用します。
- ブロックエディター：すでにページを編集している場合に最適です。ブロックレベルのスタイル設定コントロールが利用できます。
- ショートコード：クラシックエディターまたはブロックではなくショートコードを受け入れる場所で使用します。
- ウィジェット：サイドバーやフッター用です。サイトのすべてのページに表示したいフォームに最適です。
- ページビルダー：ElementorまたはDiviを使用している場合、ネイティブのWPForms統合により、すべてビルダーのワークフロー内で完結します。
次に、WordPressフォームをカスタマイズします
これで完了です！WordPressのページにWPFormsを追加する5つの異なる方法を学びました。フォームが公開されたので、次に実行したい可能性のあることがいくつかあります。
- 色、フォント、レイアウトオプションでフォームの外観をカスタマイズします
- CAPTCHA、スパム防止トークン、許可/拒否リストでスパムコンタクトフォームを停止します
- 複数のメール通知を設定して、フォーム送信をチームの適切な担当者にルーティングします
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
外部ページ（WordPress以外）に埋め込むためのコードを生成してフォームを埋め込む方法はありますか？
こんにちは、Danielさん。申し訳ありませんが、これは標準機能では不可能です。WPFormsはWordPressプラグインであり、WPFormsを使用するにはWordPressサイトが必要になるためです。
ありがとうございます。
製品ページの「カートに追加」ボタンの隣に「リクエストボタン」ポップアップを表示するにはどうすればよいですか？
ありがとうございます
こんにちは、Mohamamdさん。ご質問に可能な限り徹底的にお答えし、混乱を避けるために、チームにご連絡いただけますでしょうか？
WPFormsライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます。
ローカルウェブサイトにある場合、wpformsコンタクトフォームはメールを送信しますか？
こんにちは、Hazemさん、
はい、サイトがローカル環境でホストされている場合、通知メールは受信および送信者への送信が可能です。
作成したWPformをタブメニューに埋め込むことはできますか？もしできるなら、どうすればよいですか？
デイブさん、ご質問にできる限り網羅的にお答えし、混乱を避けるために、チームにご連絡いただけますでしょうか？
WPFormsライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。それ以外の場合は、WPForms Lite WordPress.orgサポートフォーラムで限定的な無料サポートを提供しています。
ありがとうございます。
一度にすべてのページにフォームを追加するにはどうすればよいですか？
ルーシーさん、一度にすべてのページにフォームを追加することはできません。最も近い回避策は、短いものを作成し、こちらに記載されているように、ページテンプレートに追加することです。
お役に立てば幸いです。
このガイドをありがとうございます。WordPress初心者である私にも非常に明確でわかりやすいです。フォームが送信された場合、どのように応答を受け取るのか理解できません。全く見当がつかず、チュートリアルではこの重要なトピックについて全く触れられていません。敬具、マイク
マイケルさん、フォーム通知メールを設定するには、こちらのドキュメントをご覧ください。メール配信を改善したい場合は、こちらのブログ記事もご覧いただけます。
特定のページに会話型フォームを追加する方法はありますか？私の場合は、ホームページに挿入したいです（または少なくとも会話型フォームをホームページにしたいです）。
ジョアンさん、現在、会話型フォームを特定のページに埋め込む機能はありませんが、機能リクエストトラッカーに登録されています。代替案として、WordPressウェブサイトでリードを獲得するためのインタラクティブなフォームを作成できるLeads Formアドオンを検討できます。
こんにちは。通知を受け取るべき人のメールアドレスを正しく入力し、カンマで区切ってメールアドレスが正しいことを確認したにもかかわらず、メールは管理者のみが受信しています。
なぜでしょうか？
リッカルドさん、ご期待どおりに動作せず申し訳ありません。喜んでお手伝いさせていただきます。有料ユーザーの方は、こちらからサポートチケットを送信してチームにご連絡いただくことをお勧めします。または、Lite版をご利用の場合は、こちらでサポートスレッドを立ち上げてください。
ありがとうございます。
リッカートスケールをダウンロードして手動でインストールするにはどうすればよいですか？
シーナさん、リッカートスケールフィールドを使用するには、Survey and Pollsアドオンをインストールする必要があります。詳細については、こちらのドキュメントをご覧ください。
WooCommerceの商品ページにフォームを埋め込む方法はありますか？
カタマラン様 – 残念ながら、現在Wooの商品ページにフォームを埋め込む方法はありません。しかし、機能リクエストリストにメモしておきましたので、引き続き検討させていただきます！ありがとうございます 🙂
こんにちは、
Webformをインストールしましたが、機能はしていますが、問い合わせが私のメールアドレスに届きません。手伝っていただけますか？
タッシュ様 – メール配信の問題が発生しているとのこと、大変申し訳ありません。この問題を解決するには、こちらのドキュメントに従ってください。
お役に立てば幸いです。他に質問があればお知らせください。ありがとうございます 🙂