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

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

そこで、動的なフィールド入力が役立ちます。これは、プロファイルから訪問者の名前を取得したり、リンク経由で渡されたデータを使用したりするなど、既にお持ちの情報を使用してフォームフィールドを自動的に入力します。

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

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

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

動的なフィールド入力により、ユーザーの選択、表示している特定のページ、クリックしたリンク（クエリ文字列）、またはログイン中のプロファイル情報に基づいて、フォームフィールドを自動的に入力できます。

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

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

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

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

さあ、始めましょう！

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

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

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

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

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

まず、WPFormsのウェブサイトにアクセスしてアカウントを作成しましょう。「今すぐWPFormsを入手」をクリックし、希望するプランを選択してサインアップを完了してください。

サインアップが完了すると、WPFormsのアカウントページにアクセスできます。ここでプラグインをダウンロードし、ライセンスキーを取得できます。次のステップのために、このタブを開いたままにしておいてください。

それでは、WPFormsをサイトに追加しましょう。

WordPressダッシュボードに移動し、プラグイン » 新規追加をクリックします。

次の画面で、「WPForms」と検索します。

表示されたら、今すぐインストールをクリックし、次に有効化をクリックして正しく有効にします。

その後、WPForms » 設定に移動します。

ライセンスキーをボックスに貼り付け、「キーを確認」をクリックします。

これでWPFormsのセットアップが完了し、準備ができました。ここからWordPressフォームの作成を開始し、動的なフィールド入力を設定してフィールドを自動入力できます。

これを行うには、WPForms » 新規追加 にアクセスして、最初のフォームを作成してください。

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

WPFormsでは、空白のキャンバスから開始したり、AIフォームビルダーを使用したり、既製のテンプレートを選択したりできます。WPForms AIを使用したい場合は、プロンプトを記述するだけで、ツールがフォームを生成します。

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

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

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

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

ウェブサイトのコンテンツ（製品や投稿など）からオプションを自動的に一覧表示する新しいフォームフィールドを追加しましょう。

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

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

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

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

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

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

ログイン中のユーザーの名前やメールアドレスを自動的に入力したい場合は、「一行テキスト」フィールドを追加し、ラベルを編集して、詳細 » デフォルト値 を開いてください。

タブでは、「スマートタグ」リストから {User_First_Name} または {Logged-In_User's_Email} を選択できます。

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

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

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

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

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

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

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

WPFormsでは、URLパラメータを使用してフォームフィールドを動的に入力することもできます。

この機能により、フォームに情報を自動的に渡すスマートリンクを作成できます。これはメールニュースレターに最適で、購読者がクリックしたリンクに基づいてフィールドを自動入力できます。

まず、WPFormsで新しいフォームを作成するか、既存のフォームを編集する必要があります。詳細については、WordPressでのお問い合わせフォームの作成方法に関するガイドを参照してください。

フォームの作成が完了したら、左側の列の「設定」タブに切り替え、「一般」タブを選択します。

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

これでフォームを保存してフォームビルダーを終了できます。フォームは URL パラメータを使用して動的にフィールドを事前入力する準備ができました。

URLパラメータを使用したリンクの作成

WPForms は、特定の形式で URL パラメータを介して渡される動的なフォームフィールドを受け入れます。

https://example.com/contact/?wpf15_1=value

このリンクの隠されたコードを分解してみましょう。

• ? – クエスチョンマークは、実際のリンクが終了し、「特別なデータ」が開始されることをブラウザに伝えます。
• wpf – このプレフィックスは、データがWPFormsに属していることをWordPressに伝えます。
• 15 – これは、対象としているフォームの特定のID番号です。
• _1 – これは、入力したい特定のフィールドのID番号です。
• =値 – 等号以降は、フォームフィールドに表示されるデータです。

ここに、製品タイトルをフィードバックフォームのテキストフィールドとして渡しているURLの例を示します。

https://example.com/contact/?wpf15_2=Vintage%20Flower%20Vase

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

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

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

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

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

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

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

単純に、URL内のフィールドIDの後にサブフィールド識別子を追加します。次のようになります。

https://example.com/contact/?wpf15_3_city=london

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

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

ボーナスヒント：住所フィールドにオートコンプリートを追加する

フォームを強化するもう 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でも私たちを見つけることができます。