WPFormsでURLによる事前入力設定を有効にする方法

WPFormsのURLによる事前入力設定を使用して、ウェブサイトのユーザーエクスペリエンスを合理化したいとお考えですか?以前のインタラクションに基づいてフォームフィールドを事前入力しますか?クエリ文字列の力を活用して、あるフォームから別のフォームへフォームフィールドを自動入力することで、ユーザーの利便性と効率を大幅に向上させることができます。

ユーザーがすでに1つのフォームで特定の情報を提供しており、そのデータを再入力させることなく、別のフォームにシームレスに引き継ぎたいシナリオを想像してみてください。クエリ文字列を利用することで、訪問者にとってよりスムーズでパーソナライズされたジャーニーを作成し、まさにそれを実現できます。

この機能が実際に動作するステップバイステップのチュートリアル(2つのフォームの作成と、一方のフォームからもう一方への情報の受け渡しが含まれます)については、この記事をご覧ください

このチュートリアルでは、フィールドタイプと、これらがクエリ文字列でどのように表示されるかに焦点を当て、事前入力されたフォームを作成できるようにします。

URLによる事前入力を有効にする

フォームフィールドの事前入力を開始する前に、まずフォーム内でこのオプションを有効にして、別のフォームからの事前入力パラメータを受け入れられるようにする必要があります。

これを実現するには、まず新しいフォームを作成するか、既存のフォームのいずれかを編集する必要があります。次に、フォームビルダー内で設定 » 一般に移動し、高度なオプション内で、URLによる事前入力を有効にするというラベルのオプションを切り替えて有効にします。

高度なオプション内のフォームの設定の[全般]タブでURLによる事前入力設定を有効にする

URLの組み立て

次に、GETパラメータを利用してクエリ文字列を構築し、特定のフィールドを指定して対応する値を含める必要があります。興味深いことに、このプロセスではフィールドタイプは関係なくなります。フィールドタイプに関係なく、WPFormsでURLによる事前入力を有効にするためのすべてのクエリ文字列は、一貫した構造に従います。たとえば、基本的なクエリ文字列形式の次のURLを検討してください。

http://test.com?wpf20_1_subfield=value

  • ?wpf: WPFormsのURLによる事前入力設定のクエリ文字列の開始を示します。
  • フォームID: 対象のフォームを識別します(提供されたURLでは、フォームIDは20です)。
  • フィールドID: フォーム内の対象フィールドを指定します(提供されたURLでは、フィールドIDは1です)。
  • サブフィールド識別子(オプション): 住所フィールド内の都市サブフィールドなど、サブフィールドを対象とする場合にのみ使用されます(例のURLでは、「subfield」とラベル付けされています)。
  • =(等号): 値の開始を示します。
  • 値: フィールドに追加または選択する目的の値を示します。スペースは%20に置き換える必要があります。

事前入力設定の使用

上記のチュートリアルリンクでは、訪問者に最初のフォームを表示させ、いくつかの基本的な情報を入力してもらうことを想定しています。その後、送信ボタンを使用して、その情報を別のフォームに渡します。

それを達成するには、フォームビルダーで設定 » 確認に移動します。次に、確認タイプドロップダウンからURLに移動(リダイレクト)を選択します。次に、リダイレクトURLに適切なwpf{formID}_{fieldID}クエリ文字列を追加します(以下の例を参照)。

URLによる事前入力設定を使用してクエリ文字列を生成する

例として、このURLを確認リダイレクトURLに追加します。http://mydomain.com/contact?wpf20_1=Events%20and%20Parties

この例では、20はフォームID、1はフィールドIDです。クエリ文字列は、フィールドが事前入力されるようにwpf{formID}_{fieldID}形式でフォームとフィールドIDを参照する必要があります(contact-reasonのようなカスタムクエリキーはWPFormsフィールドを事前入力しません)。

この設定で条件付きロジックを使用する

事前入力設定と条件付きロジックを併用する場合、機能はシームレスに動作します。条件付きフィールドは、事前入力によって入力された値に基づいて非表示または表示されます。条件付きロジックはフィールドが動的に入力された後に適用されるため、フォームが期待どおりに機能し続けることを確認してください。

特定のフィールドのクエリ文字列の例

より高度なユーザーのために、以下の表は各フィールドタイプのGETパラメータを設定する方法を示す例を提供します。さらに、フィールドがさまざまなフォーマットオプションを提供している場合、それらの代替手段の特定の例も含まれています。

一行テキスト
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_1=任意の長さのテキスト
段落
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_2=任意の長さのテキスト
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_3=2番目の選択肢
値の表示を有効にする ?wpf771_4=ドロップダウン1
動的選択肢:投稿タイプ ?wpf771_5=123
(123は投稿タイプIDです)
動的選択肢:分類法 ?wpf771_6=12
(12は分類法IDです)
パイプ区切り値(PSV) ?wpf135_3={field_id="9|value_choice"}
複数選択
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_7=2番目の選択肢
値の表示を有効にする ?wpf771_8=選択肢2
画像選択 ?wpf771_9=Second%20Choice
?wpf771_9=choice2
(値の表示オプションによって異なります)
動的選択肢:投稿タイプ ?wpf771_10=123
(123は投稿タイプIDです)
動的選択肢:分類法 ?wpf771_11=12
(12は分類法IDです)
パイプ区切り値(PSV) ?wpf135_3={field_id="9|value_choice"}
チェックボックス
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_12=2番目の選択肢
?wpf771_12[]=2番目の選択肢
?wpf771_12[]=2番目の選択肢&wpf771_12[]=3番目の選択肢
値の表示を有効にする ?wpf771_13=チェックボックス2
画像選択 ?wpf771_14=Second%20Choice
?wpf771_14=checkbox2
?wpf771_14[]=Second%20Choice&wpf771_14[]=Third%20Choice
(表示値オプションによります)
動的選択肢:投稿タイプ ?wpf771_15=123
?wpf771_15[]=124
(123は投稿タイプIDです)
動的選択肢:分類法 ?wpf771_16=12
?wpf771_16[]=13
(12はタクソノミーIDです)
パイプ区切り値(PSV) ?wpf135_3={field_id="9|value_choice"}
数値
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_17=2018
名前
フィールドフォーマット / バリエーション GETパラメータ
シンプル ?wpf771_18=名前
名姓 ?wpf771_18_first=名&wpf771_18_last=姓
名ミドル名姓 ?wpf771_19_first=名&wpf771_19_last=姓&wpf771_19_middle=ミドルネーム
Eメール
フィールドフォーマット / バリエーション GETパラメータ
[email protected]
確認有効 [email protected]
GDPR同意
フィールドフォーマット / バリエーション GETパラメータ
サポートされていません。
ユーザーは同意するために手動でチェックボックスをクリックする必要があります。
ウェブサイト/URL
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_23=https://google.com
一部のサーバーでは、URLをパラメータとして含むリクエストをブロックする場合があります。必ずテストしてください!
住所
フィールドフォーマット / バリエーション GETパラメータ
米国 ?wpf771_24_address1=番地1&wpf771_24_address2=番地2&wpf771_24_city=デルマー&wpf771_24_state=CA&wpf771_24_postal=12345
国際 ?wpf771_25_address1=番地1&wpf771_25_address2=番地2&wpf771_25_city=ハルキウ&wpf771_25_state=ハルキウ州&wpf771_25_postal=61000&wpf771_25_country=ウクライナ
パスワード
フィールドフォーマット / バリエーション GETパラメータ
サポートされていません。
ユーザーは値を手動で入力する必要があります。
電話
フィールドフォーマット / バリエーション GETパラメータ
米国/国際 ?wpf771_27=5555551234
日付 / 時刻
フィールドフォーマット / バリエーション GETパラメータ
フォーマット:日付、タイプ:日付ピッカー ?wpf771_28_date=2018/11/22
日付、タイプ:日付ドロップダウン(サブフィールド) ?wpf771_29_date_m=11&wpf771_29_date_d=22&wpf771_29_date_y=2018
時刻、フォーマット:12時間制(サブフィールド) ?wpf771_30_time=6:00午前
時刻、フォーマット:12時間制(サブフィールド) ?wpf771_31_time=13:00
フォーマット:date-time ?wpf771_32_date=2018/11/22&wpf771_32_time=13:15
?wpf771_32_date_m=11&wpf771_32_date_d=22&wpf771_32_date_y=2018&wpf771_32_time=6:30午前
非表示
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_33=隠し値
HTML
フィールドフォーマット / バリエーション GETパラメータ
サポートされていません。
このフィールドはユーザーが編集できません。
ファイルアップロード
フィールドフォーマット / バリエーション GETパラメータ
サポートされていません。
セキュリティ対策のため。
ページ区切り
フィールドフォーマット / バリエーション GETパラメータ
サポートされていません。
このフィールドはユーザーが編集できません。
セクション区切り
フィールドフォーマット / バリエーション GETパラメータ
サポートされていません。
このフィールドはユーザーが編集できません。
評価
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_38=4
評価スケールがいくつであっても、4/5または4/10をハイライトします。例:4/3。
キャプチャ
フィールドフォーマット / バリエーション GETパラメータ
サポートされていません。
ユーザーはキャプチャ(計算問題または質疑応答)を手動で完了する必要があります。
署名
フィールドフォーマット / バリエーション GETパラメータ
サポートされていません。
ユーザーは手動で署名する必要があります。
ライカート尺度
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_41_r2_c1=1
?wpf771_41r1_c2[]=1&wpf771_41_r3_c1[]=1
r1は最初の行、c2は2番目の列などを意味します。
単一行/複数行の評価スケールと複数回答に対応しています。
ネットプロモータースコア
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_42=4
0から10までの値4を選択します。
支払いクーポン
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_1=クーポンコード
単一商品
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_43=10
「ユーザー定義」アイテムタイプのみをサポートします。
複数商品
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_44=Second%20Item
(テキストと画像の選択肢)
フィールドフォーマット / バリエーション GETパラメータ
?wpf771_45=2番目のアイテム
クレジットカード
フィールドフォーマット / バリエーション GETパラメータ
サポートされていません。
ユーザーはクレジットカード情報を手動で入力する必要があります。
合計
フィールドフォーマット / バリエーション GETパラメータ
サポートされていません。
値はページ読み込み時にJavaScriptを使用して計算されます。
支払いフィールド(チェックボックスアイテム、複数アイテム、ドロップダウンアイテム)と数量
フィールドフォーマット / バリエーション GETパラメータ
標準 ?wpf938_7={field_id="8|value_choice"}
数量あり ?wpf938_7={field_id="8|value_choice"}&wpq938_7={field_id="8|quantity"}

参考記事

  • フォームIDまたはフィールドIDの検索方法については、チュートリアルをご覧ください。
  • 一般的に、URLの最大長は2,000文字です。

よくある質問

Q: サブラベルにこれを使用するにはどうすればよいですか?

A: これを使用して、複数のサブフィールドを持つ可能性のある名前または住所フィールドを事前入力する場合、例を共有したいと思います。

?wpf1036_1|first={field_id="1|first"}&wpf1036_1|last={field_id="1|last"}&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"}

以上です!この機能の具体的な例については、別のフォームからフォームフィールドを事前入力するためのクエリ文字列の使用方法に関するチュートリアルをご覧ください。その他の例については、テキストフィールドの自動入力にクエリ文字列を使用する方法の記事をご覧ください。