ユーザーがクリックしたリンクに基づいてテキストフィールドを自動入力したいですか?リンクを設定してフィールドに情報を送信することで、ユーザーがフォームに入力する際のステップを省くことができます。
このチュートリアルでは、クエリー文字列を活用してフォームのフィールドを自動入力する方法を紹介します。
Note:WPFormsでより高度なクエリ文字列を作成したいですか？クエリ文字列の作成方法については、URLによる事前入力を有効にするチュートリアルをご覧ください。別のフォームから取得した情報をフォームフィールドに事前入力したい場合は、クエリ文字列を使ったフォームの事前入力の記事を参照してください。
クエリー文字列とは何か？
クエリー文字列は、情報を配信または取得するURLの一部です。例えば、いくつかのサイトでは、クエリー文字列は記事や商品の検索を実行するために使用されます。
URLの真ん中にクエスチョンマークがあることに気づいたことがある人は、クエリー文字列が使われているのを見たことがあるはずだ。クエリー文字列を含むURLは次のようになります：
http://example.com/plugin?name=wpforms
この例では、クエリー文字列を使って特定の語句をフォームフィールドに挿入する方法を紹介します。
そのために、ユーザーが「イベントとパーティー」について詳しく知りたい場合にクリックできる特別なリンクを作成します。このリンクのURLは、ユーザーを "Request More Information "フォームに導きます。作成するクエリー文字列は、"I'd like to know more about: "フィールドに "Events and Parties "を自動入力します。
Note:今日の日付やログインユーザの名前とEメールを自動入力したいですか？WPFormsでスマートタグを使用することは、これを達成するための素晴らしい方法です。
新しいフォームの作成
使い始める前に、まずあなたのWordPressサイトにWPFormsがインストールされ、有効化されていること、そしてライセンスが確認されていることを確認する必要があります。その後、フォームビルダーにアクセスするために新しいフォームを作成するか、既存のフォームを編集することができます。
新しいフォームを作成する場合、フォームのタイトルとテンプレートを選択する必要があります。ここではSimple Contact Formのテンプレートを使います。
この例では、フォームの1行テキストフィールドを自動入力するリンクを作成します。このフィールドをフォームに追加するには、そのフィールドをクリックするか、プレビューエリアにドラッグ＆ドロップします。
クエリー文字列変数スマートタグの追加
次に、Single Line Textフィールドのデフォルト値（"I'd like to know about "という名前に変更）を設定し、クエリー文字列から情報を受け取れるようにする必要がある。
これを行うには、フィールドをクリックしてフィールド・オプション画面を開きます。ここからAdvancedタブを開き、Default Valueと書かれたボックスまでスクロールし、Show Smart Tagsをクリックします。
ドロップダウンリストから、Query String Variableというオプションを選択します。
これを選択すると、次のようになる。 {query_var key=""} が追加された。 デフォルト値 ボックスで囲む。この空の引用符の間に、このフィールドを表す名前（キーと呼ばれる）を追加する必要があります。このキーは、後でクエリー文字列で使用します。
このフィールドに "contact-reason "というキーを付けます。このキーに使用する名前は、後で設定するURLに表示されるので、キーの目的に沿った論理的な名前にすることが重要です。また、キーにスペースが含まれていないことを確認してください。代わりに、スペースをダッシュ"-"またはアンダースコア"_"に置き換えてください。
フォームの公開
フォームの設定が完了したら、WordPressのダッシュボードに戻ります。そして、新しいページを作成するか、既存のページを編集して、作成したフォームを公開します。
フォームを公開するには、まず＋（プラス）ボタンをクリックして新しいブロックを追加します。
WPFormsブロックを見つけるには、"WPForms "を検索するか、ウィジェットカテゴリを開きます。そして、WPFormsという名前のブロックをクリックします。
これでエディタ画面にWPFormsブロックが追加されます。次に、フォームの選択ドロップダウンからフォームを選択して埋め込みます。
これでフォームがページに埋め込まれたので、サイトのフロントエンドでフォームを公開し、訪問することができます。
クエリー文字列によるリンクの作成
次に、新しいページを作成するか、既存のページを編集して、このフォームへのリンクを追加します。
この例では、フォームはお問い合わせページにあるので、標準的なリンクは次のようになります： https://example.com/contact.
新しいページでは、テキストを追加し、「イベントとパーティー」のテキストをフォームのあるページにリンクさせます (https://example.com/contact).
今のところ、このリンクは単にコンタクトページを開きます。次に、このリンクをクエリー文字列を含むように変更します。この変更したリンクは、問い合わせページを開くだけでなく、フォームの一行テキストフィールドを自動入力するクエリー文字列を渡します：
https://example.com/contact?contact-reason=EventsandParties
この新しいリンクの作り方を、構成要素順に紹介しよう：
- 通常のリンク (https://example.com/contact)
- クエスチョンマーク
- 先ほど指定したキー（この例ではcontact-reason）。
- 等号
- 自動入力させたいテキスト
このリンクをクリックすると、一行テキストボックスに等号以降のテキストが自動入力されます。この場合、上記のリンクは、そのフィールドに "EventsandParties "を入力します：
このフィールドに表示されるテキストにスペースを追加するには %20 空白を表示させたい場所例えば https://example.com/contact?contact-reason=Events%20and%20Parties を入力すると、自動入力されたテキストにスペースが追加され、「イベントとパーティー」と表示されます：
注：2つ以上のフィールドにクエリー文字列を自動入力したいですか？追加のキーとテキストを入力する前に、必ず"&"（アンパサンド）記号を追加してください。
例えば、こうだ： https://example.com/contact?contact-reason=Events%20and%20Parties&second-field=OtherValue
その他の記号、例えば"("、")"、"@"を使用するには、URL Encode/Decodeなどのツールを使用して、これらの記号を対応するコードに変換する必要があります。
以上です！このチュートリアルが、フォームのテキストフィールドを自動入力するクエリ文字列を持つリンクの設定に役立てば幸いです。
次に、フィールドにサイトのコンテンツを動的に入力したいですか？詳細については、動的フィールドの選択に関するガイドをご覧ください。