### [クエリ文字列を使用してテキストフィールドを自動入力する方法](https://wpforms.com/docs/how-to-use-query-strings-to-auto-fill-a-text-field/) **公開日:** 2023年11月11日 **著者:** Umair Majeed **抜粋:** リンクを使用してフィールドを自動入力する方法を学びます。 **コンテンツ:** クリックしたリンクに基づいて、ユーザーのテキストフィールドを自動入力したいと思いますか？リンクはフィールドに情報を送信するように設定できるため、ユーザーはフォームの入力を1ステップ節約できます。 このチュートリアルでは、クエリ文字列を活用してフォームのフィールドを自動入力する方法を説明します。 --- **注意:** WPFormsでより高度なクエリ文字列を作成したいですか？[URLによる事前入力](https://wpforms.com/developers/how-to-enable-dynamic-field-population/)に関するチュートリアルを確認して、クエリ文字列の構築について詳しく学んでください。別のフォームから取得した情報でフォームフィールドを事前入力したい場合は、[クエリ文字列を使用してフォームを事前入力する](https://wpforms.com/developers/how-to-use-query-strings-to-pre-populate-form-fields-from-another-form/)の記事を参照してください。 ### クエリ文字列とは？ クエリ文字列は、URLの一部であり、情報の配信または取得を行います。たとえば、一部のサイトでは、クエリ文字列を使用して投稿や製品の検索を実行します。 URLの途中に疑問符があることに気づいたことがあるなら、それはクエリ文字列が機能しているのを見たことがあるということです。クエリ文字列を含むURLは次のようになります。 `http://example.com/plugin?name=wpforms` この例では、クエリ文字列を使用して特定の単語またはフレーズをフォームフィールドに挿入する方法を示します。 これを行うために、ユーザーが「イベントとパーティー」についてもっと知りたい場合にクリックできる特別なリンクを作成します。そのリンクのURLは、ユーザーを「詳細情報のリクエスト」フォームに誘導します。作成するクエリ文字列は、「もっと知りたいこと：」フィールドを「イベントとパーティー」で自動入力します。 **注意:** 今日の日付、またはログイン中のユーザーの名前とメールアドレスを自動入力したいですか？WPFormsの[スマートタグ](https://wpforms.com/docs/how-to-use-smart-tags-in-wpforms/ "WPFormsでスマートタグを使用する方法")を使用すると、これを実現できます。 ### 新しいフォームの作成 開始する前に、WPFormsがWordPressサイトに[インストールおよび有効化](https://wpforms.com/docs/install-wpforms-plugin/ "WPFormsプラグインのインストール方法")されており、[ライセンスが検証](https://wpforms.com/docs/verify-wpforms-license/ "WPFormsライセンスの検証方法")されていることを確認する必要があります。その後、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成方法")するか、既存のフォームを編集してフォームビルダーにアクセスできます。 新しいフォームを作成する場合は、フォームにタイトルを提供し、テンプレートを選択する必要があります。ここでは**シンプルな連絡フォーム**テンプレートを使用します。  この例では、フォームの**一行テキスト**フィールドを自動入力するリンクを作成します。このフィールドをフォームに追加するには、クリックするか、プレビューエリアにドラッグアンドドロップします。  ### クエリ文字列変数スマートタグの追加 次に、一行テキストフィールド（「もっと知りたいこと：」に名前を変更しました）のデフォルト値を、クエリ文字列からの情報を受け入れられるように設定する必要があります。 これを行うには、フィールドをクリックしてフィールドオプション画面を開きます。ここから、**詳細設定**タブを開き、**デフォルト値**というラベルのボックスまでスクロールし、**スマートタグを表示**をクリックする必要があります。  ドロップダウンリストから、**クエリ文字列変数**というオプションを選択します。  この選択を行うと、**デフォルト値**ボックスに`{query_var key=""}`が追加されていることに気づくでしょう。空の引用符の間に、このフィールドを表す名前（キーと呼ばれる）を追加する必要があります。このキーは、後でクエリ文字列で使用されます。 フィールドに「contact-reason」というキーを付けます。このキーに使用する名前は、後で設定するURLに表示されることに注意してください。したがって、名前はキーの目的に論理的である必要があります。また、キーにスペースが含まれていないことを確認してください。代わりに、スペースをダッシュ「-」またはアンダースコア「_」に置き換えてください。  ### フォームの公開 フォームの設定が完了したら、WordPressダッシュボードに戻ることができます。次に、新しいページを作成するか、既存のページを編集して、作成したフォームを[公開](https://wpforms.com/docs/creating-first-form/#display-form "最初のフォームの作成方法")します。 フォームを公開するには、まず**+（プラス）**ボタンをクリックして新しいブロックを追加します。  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」と表示されます。  **注意:** クエリ文字列で2つ以上のフィールドを自動入力したいですか？追加のキーとテキストを含める前に、「&」（アンパサンド）記号を追加してください。 例：`https://example.com/contact?contact-reason=Events%20and%20Parties&second-field=OtherValue` 他の特定の記号（例：「(」、「）」、「@」）を使用するには、[URLエンコード/デコード](https://www.url-encode-decode.com/)などのツールを使用して、これらの記号を対応するコードに変換する必要があります。 これで完了です！このチュートリアルが、フォームのテキストフィールドを自動入力するクエリ文字列を含むリンクの設定に役立ったことを願っています。 次に、サイトのコンテンツでフィールドを動的に入力したいと思いますか？詳細については、[動的なフィールド選択に関するガイド](https://wpforms.com/docs/how-to-set-dynamic-field-default-values-in-wpforms/ "WPFormsで動的なフィールドデフォルト値を設定する方法")を確認してください。 **カテゴリ:** 高度なフィールドカスタマイズ、拡張機能 ---