WordPressフォームのフィールドを自動入力する方法

WordPressフォームのフィールドを自動入力する方法

WordPressフォームのフィールドを自動入力しますか?投稿タイプや商品などの情報をフォームフィールドの選択肢として自動的に使用できます。

これにより、フォームの入力が簡単になり、作成時の時間も大幅に節約できます。

WPFormsを使用すると、動的なフィールド選択肢を使用してフォームフィールドを簡単に自動入力できます。この記事では、その設定方法を説明します。

WordPressフォームを今すぐ作成

WordPressフォームのフィールドを自動入力する方法

このチュートリアルでは、WooCommerceの商品を問い合わせフォームに自動入力する方法を説明します。

ステップ1:WPFormsプラグインをインストールする

まず、WPFormsプラグインをインストールして有効化します。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

次に、新しいフォームを追加します。まず、WPForms » 新規追加に移動します。

自動入力フィールド付き新規フォームを追加

次に、シンプルな問い合わせフォームテンプレートをクリックして開始します。

シンプルな連絡フォームテンプレートを使用する

フォームビルダーが全画面ウィンドウで開きます。シンプルな問い合わせフォームには、次のフィールドが既に含まれています。

  • 名前
  • Eメール
  • コメントまたはメッセージ

ドロップダウンフィールドをドラッグして、自動入力される回答の選択肢を追加してください。

ドロップダウンフィールドをクリックし、右側のフォームプレビューにドラッグします。

ドロップダウンで動的なフィールド選択を追加

次に、ドロップダウンを一度クリックして、左側の設定を開きます。ここのラベルを編集して、ドロップダウンの内容を説明してください。

動的選択フィールドのドロップダウンラベルを変更

次に少しスクロールダウンして、高度なオプションを展開します。フォームの入力を簡単にするために、ここで2つの設定を選択します。

  • スタイルモダンドロップダウンを選択します。これにより、訪問者はリストを検索できます。これは、非常に長いドロップダウンを使いやすくするための優れた方法です。必要に応じて、複数選択ドロップダウンを簡単に作成して、訪問者が複数の回答を選択できるようにすることもできます。
  • プレースホルダー – フィールドにプレースホルダーを設定することは常に良い考えです。プレースホルダーはデフォルトの選択肢のように見えますが、訪問者は選択できません。これは、選択肢がリストの最初の回答にデフォルト設定されないようにするための優れた方法です。
自動入力フィールドのスタイルとプレースホルダー設定

これで、新しいドロップダウンに動的なフィールド選択肢を追加する準備ができました。

ステップ2:自動入力フィールドの設定

次に、ドロップダウンリストに表示される選択肢を設定します。

動的なフィールド選択肢を使用すると、すべての回答を手動で入力する心配がありません。WPFormsがすべての選択肢を取得します。

ドロップダウンの高度なオプションを展開すると、2つの選択肢が表示されます。

  • 投稿タイプ
  • 分類
自動入力フィールドの動的選択

投稿タイプを使用すると、動的な投稿タイプソースからフィールドを自動入力できます。WooCommerceストアでは、ここの2番目のドロップダウンの選択肢は次のようになります。

  • 投稿 – サイト上のすべてのブログ投稿のリスト。
  • ページ – サイト上のすべてのページのリスト。
  • 商品 – ストア内のすべての商品のリスト。

これらはすべて投稿タイプです。設定済みのカスタム投稿タイプがあれば使用できます。

たとえば、ここに2つの追加のカスタム投稿タイプが設定されているため、選択できるオプションがいくつかあります。

投稿タイプ選択でフィールドを自動入力

フォームフィールドを自動入力するために使用できるもう1つの選択肢を見てみましょう。

ドロップダウンの2番目のオプションであるタクソノミーを選択すると、動的タクソノミーソースという2番目のドロップダウンが表示されます。

2番目のドロップダウンの選択肢には、次のようなオプションが含まれます。

  • タグ – ブログ投稿に関連付けられているすべてのタグ。
  • カテゴリ – ブログ投稿に関連付けられているカテゴリ。
  • 商品カテゴリ – eCommerce商品に関連付けられているカテゴリ。
  • 商品タグ – 商品に追加したタグ。
  • 商品タイプ – 商品タイプまたはバリアント。

繰り返しますが、あなたのストアにはほとんどの場合、より多くのオプションがあります。

この例では、ストアオーナーがブランド別に商品をグループ化するプラグインを追加したため、フィールドを自動入力するために使用できるブランドタクソノミーもあります。

動的な分類法選択でフィールドを自動入力

このチュートリアルでは、投稿タイプを選択し、次に商品を選択します。これにより、ストア内のすべての商品が一覧表示されます。

自動入力されるフィールドには多くの選択肢がある場合があります。ドロップダウンから項目を除外したい場合は、自動入力されるフィールドから項目を除外するガイドをご覧ください。

最後に、フォームの一般設定を確認してください。次のガイドをご覧ください。

フォームを保存するには、保存をクリックします。

ステップ3:フォームの公開

フォームは、投稿、ページ、またはサイドバーにさまざまな方法で公開できます。これにはショートコードを使用できますが、代わりに埋め込みオプションを使用することをお勧めします。

まず、フォームビルダーの上部にある埋め込みをクリックします。

動的選択でフォームを埋め込む

次に、新しいページを作成をクリックします。

自動入力フィールドを持つフォームの新規ページを作成

ページの名前を入力し、開始をクリックします。

自動入力フィールドを持つフォームのページを作成

ここで問題がなければ、公開をクリックして公開します。

動的な選択肢を持つフォームを公開

これで完了です!フォームは提出可能になりました。

自動入力フィールドを持つ公開済みフォーム

動的フィールドをテストして、問い合わせを受け付け始めるのに良い時期です。

今すぐWordPressフォームを作成する

自動入力フォームフィールドに関するFAQ

動的フィールドの選択肢や自動入力されるフィールドについてよく質問を受けます。ここでは、よく寄せられる質問をいくつか紹介します。

動的フィールドの選択肢とは何ですか?

動的フィールドの選択肢とは、訪問者に対して自動的に入力されるフォームの応答です。

各回答を手動で入力する代わりに、WPFormsを使用してサイトのカスタム投稿タイプまたはタクソノミーからすべてのオプションを自動的に取得できます。

動的選択肢は、自動入力されるフィールドとも呼ばれます。

フォームに自動入力フィールドを追加する理由

自動入力フィールドは、以下のような場合に役立ちます。

  • フォームの放棄を減らす – フィールドにあらかじめ入力しておくことで、フォームの入力を簡単にする
  • 精度を向上させる – 訪問者が自分で回答を入力する必要がなくなる
  • フォームを最新の状態に保つ – WPFormsは、フォームフィールドの最新の項目を常に表示します。

WPFormsは、投稿タイプまたはタクソノミーからオプションのリストを自動的に取得するため、フォームのメンテナンスは簡単です。

どのフィールドを自動入力できますか?

WPFormsでは、動的なフィールド選択を使用して3つのフィールドタイプを自動入力できます。

  • ドロップダウン
  • 複数選択フィールド
  • チェックボックス

簡単なドラッグアンドドロップビルダーを使用して、フォームに追加できます。

自動入力フィールドが便利な理由

自動入力フォームフィールドは、以下に最適です。

次に、WPFormsでスマートフォームをすばやく作成しましょう

フィールドの自動入力は、複雑なフォームを迅速に作成するためのスマートな方法です。フォームでさらに多くのことをしたい場合は、試すことができるその他のアイデアをいくつか紹介します。

フォームの作成準備はできましたか?最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookTwitterでフォローしてください。

開示:当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPFormsがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかをご覧ください

クレア・ブロードリー

クレアはWPFormsチームのコンテンツマネージャーです。彼女はWordPressとウェブホスティングに関する執筆経験が13年以上あります。 詳細はこちら

最高のWordPressドラッグアンドドロップフォームビルダープラグイン

簡単、高速、安全。WPFormsを信頼する600万人以上のウェブサイト所有者に加わりましょう。

WordPressフォームのフィールドを自動入力する方法」に関する34件のコメント

  1. WPForms様
    ユーザーが投稿に独自のタグを追加できる、投稿フォームを探しています。WPFormsで可能でしょうか?
    よろしくお願いします。
    ジョシュ

    1. ジョシュ様 – ユーザーが投稿に適用される既存のタグを取得できるようにすることはできます(詳細はこちらで確認できます)。ただし、現時点では、投稿に適用されるカスタムタグを作成できるようにすることはできません。

      非常に役立つとは思います。機能リクエストとしてメモしておき、今後のロードマップを計画する際に考慮します。現時点でお探しのものを提供できないことをお詫びしますが、ご提案に感謝いたします。

      さらに詳しい情報やサポートが必要な場合は、サポートにご連絡ください。

      WPFormsライセンスをお持ちの場合は、メールサポートをご利用いただけますので、サポートチケットを送信してください。それ以外の場合は、WPForms Lite WordPress.org サポートフォーラムで限定的な無料サポートを提供しています。

      ありがとうございます!🙂

    2. ウェブサイトにアクセスしたユーザーの情報が自動入力されるようにしたいのですが、可能でしょうか?

      1. シヴァムさん、こんにちは。

        これを実現するための組み込み機能はありませんが、クエリ文字列を使用することで実現できます。このガイドを参照してください。

        これのことですか?

  2. こんにちは。顧客が選択に応じて、メールを送信する代わりに異なるページを開くことは可能ですか?

    たとえば、オプション1と2をクリックするとページAに移動し、オプション1と3をクリックするとページBに移動するようなことですか?

    これでこのプラグインを管理できることを願っています。よろしくお願いします。パット

    1. パトリックさん、こんにちは。 条件付き確認機能を使用すれば、これを実現できます。

      「確認タイプ」を「ページを表示」または「URLに移動(リダイレクト)」に設定し、条件を適切に設定するだけです。

      お役に立てば幸いです!

      1. アショクさん、こんにちは。ご要望の通り、2つの異なるフォームから1つのフォームフィールドに値を入力する組み込み機能はありません。ただし、「フォームA(ソース)」から「フォームB(宛先)」に値を渡すことは可能です。クエリ文字列(基本的なテキストフィールドの場合)を使用して、一方のフォームからもう一方のフォームにフィールド値を事前入力できます。

        基本的なテキスト入力フィールド以外のフィールドについては、開発者ガイドをご覧ください。

        お役に立てば幸いです!

  3. こんにちは。WordPressフォームベースのアンケートで、同じ人の以前のアンケート回答を事前入力することは可能ですか?もし可能なら、どのようにすればよいですか?

    1. ミヒルさん、こんにちは!現時点では、プラグインに、フォームがユーザーの以前のデータを照会してフォームに自動入力する機能はありません。しかし、それがどのように役立つかは理解できますので、将来のアップデートでチームが検討できるよう、この種の機能への関心をお伝えしました!

      現時点ではご要望にお応えできず申し訳ありませんが、アイデアに感謝いたします。

      ありがとうございます!

  4. こんにちは、自動入力されたドロップダウンに「その他」オプションを追加する必要があります。カスタム投稿タイプを選択するオプションを提供するか、何も適合しない場合は「その他」を選択して条件付きテキストフィールドが表示され、テキストを入力できるようにします。これを達成する方法はありますか?

    ありがとうございます!

    1. こんにちは、Stefanさん!このシナリオにぴったりの記事があります🙂こちらをご覧ください: https://wpforms.com/docs/how-to-add-an-other-option-for-checkboxes-multiple-choice-or-dropdown-fields/

      お役に立てれば幸いです 🙂 これについてさらにご質問がある場合は、アクティブなサブスクリプションをお持ちの場合はお問い合わせください。お持ちでない場合は、サポートフォーラムにご質問をお寄せください。

  5. 名前とメールアドレスを自動入力する方法はありますか?ほとんどのユーザーは携帯電話を使用しています
    そのため、フォームを開いたときに「名前」と「メールアドレス」が自動的に追加されますか?可能ですか?

    1. こんにちは、Rajさん。ログインユーザーの場合、スマートタグを使用して名前と名前フィールドを簡単に自動入力できます。こちらがスマートタグ、特にユーザー管理スマートタグに関する優れたガイドです。

      ただし、ログアウトユーザーについては申し訳ありませんが、現在、名前とメールアドレスフィールドを自動的に自動入力することはできません。

      この機能への関心に留意し、この機能に関するアップデートを受け取るためのリストにメールを追加しました。

      ありがとうございます。良い一日を!

  6. 私のクライアントはサービス業を営んでいます。ウェブサイトには、提供するサービスごとに異なるCTAボタンがあり、すべて同じお問い合わせフォームに誘導されます。たとえば、あるCTAは「屋根のクリーニング見積もりを取得する」と言い、別のCTAは「サイディング、雨どい、またはフェンスのクリーニング見積もりを取得する」と言います。すべてのサービスは、お問い合わせフォームのチェックボックスオプションとしてリストされています。私の質問は、クリックしたCTAに基づいて、他のすべてのサービスを表示したまま、フォームがサービスを自動選択する方法はありますか?

    1. こんにちは、Erwinさん、

      ご質問に可能な限り網羅的に回答するために、どのようなことを実現したいのか、詳細を添えて 弊社のチームにご連絡 いただけますでしょうか?

      ありがとうございます!

  7. こんにちは、お客様のためにフォームを作成しているのですが、商品をクリックした後に商品名が自動的に表示されるようにするにはどうすればよいですか?

    1. こんにちは、Viniciusさん、

      現在、データベースからフィールド入力を自動的に入力する組み込み機能はありません。この機能を将来の機能強化のために検討するよう、ご要望に投票を追加しました。

      お待ちいただきありがとうございます!

  8. https://wpforms.com/docs/how-to-use-query-strings-to-auto-fill-a-text-field/

    単一のクエリ文字列で2つ以上のフィールドを自動入力したいですか?

    例: https://example.com/contact?contact-reason=Events%20and%20Parties&second-field=OtherValue

    1. {query_var key=”contact-reason”}
    2. {query_var key=”&second-field”}

    「&」の部分が機能しませんが、書き方が間違っていますか?

    ありがとうございます。ご協力いただけると幸いです!

    1. こんにちは、Lynnさん、

      「{query_var key=”second-field”}」を設定し、「&」記号を削除してください。

      お役に立てば幸いです!

  9. こんにちは、フィールドを「顧客」から自動入力することは可能ですか?

    (AJAX検索/オートコンプリート付きのテキストフィールドは非常に強力な機能になるでしょう)

    1. パオロさん、こんにちは。

      現在、AJAX検索とオートコンプリートでフィールドを自動入力する組み込み機能はありません。その場合、この機能リクエストを共有していただけると幸いです。投票を追加しました。

      ありがとうございます 🙂

  10. こんにちは、ユーザーリストでフィールドを自動入力することは可能ですか?(例えば、すべての顧客のリストなど)。
    ありがとうございます

  11. この記事で説明されているように(URLは削除済み)、あるフォームから別のフォームにデータを送信したいのですが、ドロップダウンフィールドと日付についても同様のことをしたいです。
    可能でしょうか?
    次に、フォームをスライダーに埋め込みたいです。使用しているテーマはedubinです。
    よろしくお願いします

    1. AIさん、これは可能だと思います。ドロップダウンフィールドのガイドと日付フィールドのこちらを確認することをお勧めします。

      スライダーへの埋め込みに関しては、テーマがスライダーでのショートコードを許可するかどうかによりますが、可能であるはずです。許可されている場合は、こちらに記載されているようにショートコードを使用して埋め込むことができます。

      お役に立てば幸いです。

  12. こんにちは。

    前の複数選択フィールドから選択された値でドロップダウンフィールドを自動入力する必要があります(カスケードフィールド)。これを行う方法はありますか?

    ありがとうございます!

    1. パドマさん、こんにちは。現在、あるフィールドから別のフィールドに情報を渡して入力する機能はありません。しかし、これが役立つことは完全に同意します!チームでさらに議論するために、機能リクエストをメモしました。

      回避策として、これはJavaScriptで実現できますが、JavaScriptの使用経験が必要です。残念ながら、これはカスタムの回避策であり、完全なソリューションを提供することはできませんが、正しい方向に向かわせたいと思います。カスタムJavaScriptが必要なため、こちらで尋ねられた類似の質問を確認できます。

      ありがとうございます 🙂

  13. 製品SKUをフォームに自動入力するにはどうすればよいですか?商品ページに見積もりフォームを追加したいのですが、ユーザーが見積もりフォームを開いたときに、その商品のSKUが自動入力されるようにしたいです。

    ありがとうございます

    1. ダニアルさん、こんにちは。

      現在、製品SKUを自動入力する機能はありません。しかし、非常に役立つことには同意します。

      機能リクエストをメモしておき、将来のロードマップを計画する際に考慮します。

      ご提案ありがとうございます 🙂

  14. 単一商品ページの場合
    商品のカテゴリとサブカテゴリを自動検出できますか?(商品名ではなく)
    ユーザーが入力する必要がなくなります。

    1. サチンタ様 – 申し訳ありませんが、このドキュメントで説明されている自動入力機能を使用しない限り、デフォルトでは不可能です。

      お役に立てれば幸いです。ありがとうございます 🙂

  15. こんにちは!

    フォームが2つあります。最初のフォームのデータを次のページにリダイレクトしてデータを確認しています。最初のフォームからのデータはURLに表示されますが、2番目のフォームフィールドには表示されません。2番目のフォームフィールドにデータを表示するにはどうすればよいですか?

    1. ジヤ様!
      URLにデータが表示されているのに、2番目のフォームのフィールドに表示されないとのこと、承知いたしました。これは通常、2番目のフォームで URLによる事前入力 設定が有効になっていないためです。この設定は、2番目のフォームの高度な設定で有効にする必要があります。

      フォームの事前入力を設定するための詳細な手順については、こちらのガイドをご覧ください:クエリ文字列を使用して別のフォームからフォームフィールドを事前入力する方法

コメントを追加

コメントを残していただきありがとうございます。コメントはすべて、当社のプライバシーポリシーに従ってモデレーションされます。また、すべてのリンクはnofollowとなります。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。

このフォームはCloudflare Turnstileによって保護されており、Cloudflareのプライバシーポリシーおよび利用規約が適用されます。