別のフォームからクエリ文字列を使用してフォームフィールドを事前入力する方法

WordPressでユーザーのフォーム入力体験を効率化したいですか？以前のフォームからの情報でフォームフィールドを自動入力すると、ユーザーエクスペリエンスが向上し、データの精度が保証されます。このチュートリアルでは、事前入力されたクエリ文字列を使用してフォーム間で情報を渡すプロセスを説明します。

これを実現するための手順に入る前に、クエリ文字列について少し掘り下げ、なぜそれが素晴らしいのかを見てみましょう！

クエリ文字列とは？

クエリ文字列は、ウェブサイトのさまざまな部分間の便利なメッセンジャーと考えてください。これらは、URLの末尾に追加される情報の断片であり、Webページが互いに通信するのを助けます。通常、Webアドレスの疑問符の後ろに表示され、アンパサンドで区切られたキーと値のペアが続きます。

どのように機能しますか？

ウェブサイトでフォームに入力していると想像してください。送信をクリックすると、フォームはデータをウェブサイトのサーバーに送信します。しかし、ユーザーに再度入力させることなく、そのデータを別のフォームやページに渡したい場合はどうでしょうか？そこでクエリ文字列が登場します。

フォーム送信後のリダイレクトURLにクエリ文字列を追加することで、実質的に「最初のフォームからの情報です。これを使って次のフォームのフィールドを事前入力してください！」と言っていることになります。ウェブサイトがたどるパンくずリストを残すようなものです。

なぜ有益なのですか？

1. 時間の節約：ユーザーは利便性を愛しています。クエリ文字列は、すでに提供した情報を再入力する手間を省きます。
2. 精度：フォームに入力する際にタイプミスをしたことはありませんか？クエリ文字列を使用すると、最初のフォームから直接データを取得するため、エラーの可能性が減ります。
3. コンバージョンの向上：フォーム入力プロセスを合理化することで、ユーザーはサイトでのアクションを完了しやすくなり、コンバージョン率が向上します。
4. シームレスなエクスペリエンス：すべてはユーザーのスムーズな体験のためです。フォームの自動入力は、ウェブサイト全体でシームレスなジャーニーを作成し、ユーザーエクスペリエンスを向上させます。

要するに、クエリ文字列はウェブサイトのさまざまな部分を結びつける魔法の糸のようなものです。フォーム間で情報を渡し、あなたとユーザーの両方にとって生活を楽にします。入力が少なくなり、自動化が増えることで、誰もが勝利します！

さて、早速始めましょう！

クエリ文字列の使用

まず、2つの別々のフォームを作成します。フォームの作成にヘルプが必要な場合は、このドキュメントを参照してください。

1) ホームページフォームの作成

まず、最初のフォームを作成し、必要なすべてのフィールドを追加します。

今は保存をクリックしてください。後でこのフォームに戻ります。

2) 追加フォームの作成

このステップでは、事前入力された情報を受け取る別のフォームを作成します。事前入力したい情報と一致する、必要なすべてのフィールドを追加します。

次に、設定 » 一般タブに移動し、ドロップダウン矢印をクリックして詳細設定オプションに入ります。ここで、URLによる事前入力を有効にするボタンを切り替えることができます。

3) フォーム送信時のリダイレクトの設定

さて、すべてをまとめましょう。最初のステップで作成したホームページフォームを編集しましょう。フォームビルダーで、設定 » 確認画面に移動します。

ここに到着したら、確認画面タイプをURLに移動（リダイレクト）に変更し、確認画面リダイレクトURLフィールドにこのURLをコピー＆ペーストします。

http://example.com/quote/?wpf1036_1={field_id="1"}&wpf1036_2={field_id="2"}

上記のURLでは、変更する必要があるものがいくつかあります。例えば：

1. example.comをあなた自身のドメインに置き換えてください。
2. quoteという単語をあなたのページ名に置き換えてください。
3. wpf1036_1とwpf1036_2を、受信フォームのフォームIDとそれぞれのフィールドIDに合わせて調整してください。
4. {field_id="1"}を、ホームページフォームの名前フィールドのフィールドIDで更新してください。

特定のフィールドID番号を見つけるのに役立つ情報が必要な場合は、このチュートリアルをご覧ください。

それを確認画面リダイレクトURLに追加したら、フォームの保存をクリックします。

これで、ユーザーがホームページフォームを見ると、名前とメールアドレスを入力でき、送信ボタンをクリックすると、ページは別のフォームにリダイレクトされ、ホームページのフォームから収集された情報で名前とメールアドレスフィールドが自動的に事前入力されます。

これで、クエリ文字列を使用してフォームフィールドを事前入力するために必要なすべてが揃いました。他にどのようなフィールドでこれを使用できるか見てみませんか？WPFormsでURLによる事前入力設定を有効にする方法に関するドキュメントをご覧ください。

よくある質問

Q: なぜ次のフォームが事前入力されないのですか？

A: フィールドが事前入力されない場合は、2番目のフォームで設定が有効になっていることを確認してください。

2番目のフォームのフォームビルダーを開き、設定 » 一般タブに移動します。次に、画面下部にある詳細設定をクリックし、URLによる事前入力を有効にするボタンを切り替えます。

Q: 名前フィールドに姓と名を使用している場合はどうすればよいですか？

A: 名前のシンプル形式を使用していない場合は、URLに名前フィールドをこのようにリストします。

http://my-example-site.com/quote/?wpf1036_1_first={field_id="1|first"}&wpf1036_1_last={field_id="1|last"}&wpf1036_2={field_id="2"}

住所フィールドについても同様です。住所を分解するための形式は次のようになります。

&wpf1036_3_address1={field_id="3|address1"}&wpf1036_3_address2={field_id="3|address2"}&wpf1036_3_city={field_id="3|city"}&wpf1036_3_state={field_id="3|state"}&wpf1036_3_postal={field_id="3|postal"}