WPFormsでURLによるプリフィルを有効にする方法

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

あるフォームでユーザーが既に特定の情報を入力した後、そのデータを別のフォームにシームレスに引き継ぎ、再入力させる必要がない場合を想像してみてください。クエリー文字列を利用することで、まさにそれを実現することができ、訪問者によりスムーズでパーソナライズされた旅を作り出すことができます。

2つのフォームを作成し、1つのフォームからもう1つのフォームに情報を渡すなど、この機能を実際に使用したステップ・バイ・ステップのチュートリアルについては、こちらの記事をご覧ください

このチュートリアルでは、プリフィルドフォームを作成できるようにするために、フィールドの型とクエリ文字列での見え方について説明します。

URLによるプリフィルを有効にする

フォームフィールドへのプリフィルドを始める前に、まずフォーム内でこのオプションを有効にし、別のフォームからプリフィルドされたパラメータを受け取れるようにしなければなりません。

これを実現するには、まず新規フォームを作成するか、フォームを編集する必要があります。次に、フォームビルダーから設定 " 一般に移動し、詳細設定オプションの中のURL によるプリフィルを有効にするを有効にします。

詳細設定オプション内のフォーム設定の一般タブでURLによる事前入力設定を有効にする

URLの組み立て

次に、特定のフィールドを特定し、対応する値を含めるためにGETパラメータを利用して、クエリー文字列でURLを構築する必要がある。興味深いことに、このプロセスではフィールドの型は関係ありません。フィールドの種類に関係なく、WPFormsでURLによるプリフィルを有効にするためのすべてのクエリ文字列は一貫した構造に従います。たとえば、基本的なクエリ文字列形式を持つ次のURLを考えてみましょう:

http://test.com?wpf20_1_subfield=value

  • ?wpf: WPForms の prefill by URL 設定のクエリ文字列の先頭をマークします。
  • フォームID:対象となるフォームを識別します(提供されたURLでは、フォームIDは20です)。
  • フィールドID:フォーム内の目的のフィールドを指定します(指定されたURLでは、フィールドIDは1です)。
  • サブフィールド識別子(オプション):Address(住所)フィールド内のCity(市区町村)サブフィールドのように、サブフィールドをターゲットにする場合にのみ使用する(例のURLでは、単に「subfield」と表示されている)。
  • = (イコール・サイン): 値の開始を示す。
  • 値:フィールドに追加または選択する値を表す。空白は%20で置き換える。

プレフィル設定の使用

上のチュートリアルのリンクでは、訪問者に最初のフォームを見てもらい、基本的な情報を入力してもらうというものです。次に、その情報を送信ボタンで別のフォームに渡します。

そのためには、確認タイプを Go to URL(リダイレクト)に設定し、上記のフィールドにこの設定を使用してクエリー文字列を入力する必要があります。

例えば、次のURLを リダイレクトURL. http://mydomain.com/contact?contact-reason=Events%20and%20Parties

Enable Prefill By URL設定を使ってクエリー文字列を入力する

これで終わりです!クエリ文字列を使って別のフォームからフォームフィールドに事前入力する方法」をご覧ください。他の例については、「クエリ文字列を使ってテキストフィールドを自動入力する方法」の記事をご覧ください。

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

条件付きロジックをプレフィル設定と同時に使用する場合、機能はシームレスに動作します。条件付きフィールドは、プリフィルによって入力された値に基づいて非表示または表示されます。条件付きロジックはフィールドが動的に入力された後に適用されるため、フォームが期待どおりに機能し続けることを保証することが重要です。

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

より高度なユーザーのために、各フィールド・タイプのGETパラメーターの設定方法を例示しています。さらに、フィールドが様々なフォーマット・オプションを提供している場合、それらの選択肢の具体例も含まれています。

単一行テキスト
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_1=text%20of%20any%20length
パラグラフ
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_2=text%20of%20any%20length
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_3=Second%20Choice
値を表示する ?wpf771_4=dropdown1
ダイナミックな選択投稿タイプ ?wpf771_5=123
(123 は投稿タイプID)
ダイナミックな選択分類法 ?wpf771_6=12
(12 はタクソノミーID)
パイプ分離値(PSV) ?wpf135_3={field_id="9|value_choice"}
マルチプル・チョイス
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_7=Second%20Choice
値を表示する ?wpf771_8=choice2
画像選択 ?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=Second%20Choice
?wpf771_12[]=Second%20Choice
?wpf771_12[]=Second%20Choice&wpf771_12[]=Third%20Choice
値を表示する ?wpf771_13=checkbox2
画像選択 ?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=name
最初 最後 ?wpf771_18_first=first%20name&wpf771_18_last=last%20name
ファースト ミドル ラスト ?wpf771_19_first=first%20name&wpf771_19_last=last%20name&wpf771_19_middle=middle%20name
電子メール
フィールド・フォーマット/バリエーション GET パラメーター
- [email protected]
確認が有効 [email protected]
GDPR同意書
フィールド・フォーマット/バリエーション GET パラメーター
-
ユーザーは手動でチェックボックスをクリックして同意する。
ウェブサイト / URL
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_23=https://google.com
サーバーによっては、パラメータとしてURLを含むリクエストをブロックする場合があります。必ずテストしてください!
住所
フィールド・フォーマット/バリエーション GET パラメーター
米国 ?wpf771_24_address1=Address%20Line%201&wpf771_24_address2=Address%20Line%202&wpf771_24_city=Del%20Mar&wpf771_24_state=CA&wpf771_24_postal=12345
インターナショナル ?wpf771_25_address1=Address%20Line%201&wpf771_25_address2=Address%20Line%202&wpf771_25_city=Kharkiv&wpf771_25_state=Kharkiv Oblast&wpf771_25_postal=61000&wpf771_25_country=Ukraine
パスワード
フィールド・フォーマット/バリエーション GET パラメーター
-
ユーザーが手動で値を入力する。
電話
フィールド・フォーマット/バリエーション GET パラメーター
米国/国際 ?wpf771_27=5555551234
日時
フィールド・フォーマット/バリエーション GET パラメーター
フォーマット日付、タイプ日付ピッカー ?wpf771_28_date=11/22/2018
日付、タイプ日付ドロップダウン(サブフィールド) ?wpf771_29_date_m=11&wpf771_29_date_d=22&wpf771_29_date_y=2018
時間、フォーマット12 H(サブフィールド) ?wpf771_30_time=6:00am
時間、フォーマット12 H(サブフィールド) ?wpf771_31_time=13:00
フォーマット date-time ?wpf771_32_date=11/22/2018&wpf771_32_time=13:15
?wpf771_32_date_m=11&wpf771_32_date_d=22&wpf771_32_date_y=2018&wpf771_32_time=6:30am
ヒドゥン
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_33=hidden%20value
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 は1列目を示す、 c2 は2列目など。
1行/複数行の評価スケールと複数回答をサポート。
ネット・プロモーター・スコア
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_42=4
値を選択する 4 より 0 への 10.
支払いクーポン
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_1=coupon%20code
単品
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_43=10
ユーザー定義」アイテムタイプのみをサポートします。
複数の項目
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_44=Second%20Item
(テキストと画像の選択)
フィールド・フォーマット/バリエーション GET パラメーター
- ?wpf771_45=Second%20Item
クレジットカード
フィールド・フォーマット/バリエーション GET パラメーター
- サポートされていません。
ユーザーはクレジットカードデータを手動で入力する必要があります。
合計
フィールド・フォーマット/バリエーション GET パラメーター
-
ページロード時に JavaScript を使用して値が計算されます。
支払フィールド(チェックボックス項目、複数項目、ドロップダウン項目)と数量
フィールド・フォーマット/バリエーション GET パラメーター
スタンダード ?wpf938_7={field_id="8|value_choice"}
数量 ?wpf938_7={field_id="8|value_choice"}&wpq938_7={field_id="8|quantity"}

参考記事

よくあるご質問

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

A:複数のサブフィールドを持つ可能性のあるNameまたはAddressフィールドに事前に入力するためにこれを使用する場合、その例をご紹介します。

?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"}