クエリ文字列を使用したテキストフィールドの自動入力

クリックしたリンクに基づいて、ユーザーのテキストフィールドを自動入力しますか？ リンクは、ユーザーがフォームに入力する手間を省けるように、フィールドに情報を送信するように設定できます。

このチュートリアルでは、クエリ文字列を活用してフォームのフィールドを自動入力する方法を説明します。

---

クエリ文字列とは？

クエリ文字列は、情報の配信または取得を行うURLの一部です。たとえば、一部のサイトでは、クエリ文字列を使用して投稿や製品の検索を実行します。

URLの途中に疑問符があることに気づいたことがあるなら、それはクエリ文字列が機能しているのを見たことがあるということです。クエリ文字列を含むURLは、次のようになります。

http://example.com/plugin?name=wpforms

この例では、特定の単語またはフレーズをフォームフィールドに挿入するためにクエリ文字列を使用する方法を示します。

これを行うために、ユーザーが「イベントとパーティー」についてもっと知りたい場合にクリックできる特別なリンクを作成します。そのリンクのURLは、ユーザーを「詳細情報のリクエスト」フォームに誘導します。作成するクエリ文字列は、「もっと知りたいこと」フィールドを「イベントとパーティー」で自動入力します。

新規フォームの作成

開始する前に、まずWPFormsがWordPressサイトにインストールおよび有効化されており、ライセンスが検証済みであることを確認する必要があります。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスできます。

新しいフォームを作成する場合、フォームにタイトルを付け、テンプレートを選択する必要があります。ここではシンプルな連絡フォームテンプレートを使用します。

この 例では、フォームの1行テキストフィールドを自動入力するリンクを作成します。このフィールドをフォームに追加するには、クリックするか、ドラッグアンドドロップしてプレビューエリアに配置します。

クエリ文字列変数スマートタグの追加

次に、1行テキストフィールド（「もっと知りたいこと」に名前を変更しました）のデフォルト値を、クエリ文字列からの情報を受け入れられるように設定する必要があります。

これを行うには、フィールドをクリックしてフィールドオプション画面を開きます。ここから、詳細設定タブを開き、デフォルト値というラベルのボックスまでスクロールし、スマートタグを表示をクリックする必要があります。

ドロップダウンリストから、クエリ文字列変数というオプションを選択します。

この選択を行うと、{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は、結果の自動入力テキストにスペースを追加し、「Events and Parties」と表示されます。

これで完了です！このチュートリアルがお役に立ち、クエリ文字列を使用してフォームのテキストフィールドを自動入力するリンクを設定できたことを願っています。

次に、サイトのコンテンツでフィールドを動的に入力しますか？詳細については、動的なフィールドの選択に関するガイドを確認してください。