How to Use Query Strings to Auto-Fill a Text Field

Would you like to auto-fill a text field for a user based on the link they click? Links can be set up to send information into a field so the user can save a step when filling our your form.

In this article, we’ll show you how to leverage query strings to auto-fill a field in a form.


What Is a Query String?

A query string is a part of a URL that either delivers or retrieves information. On some sites, for example, query strings are used to run searches for posts or products.

If you’ve ever noticed a URL with a question mark in the middle, you’ve seen a query string in action. A URL with a query string will look something like this:

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

In this example, we’ll show you how to use a query string to insert a specific word or phrase into a form field.

To do this, we will create a special link users can click if they would like to learn more about “Parties and Events”. The URL for that link will take the user to our “Request More Information” form and, because of the query string we’ll add at the end of that URL, the “I’d like to know more about” field in that form will be auto-filled with “Parties and Events”.

Note: Are you looking to auto-fill today’s date, or the name and email of a logged in user? Our tutorial on Smart Tags shares details and examples.

Creating a Form and Adding a Field Key

For this example, we will create a link that will auto-fill a Single Line Text field in our form.

To get started, you’ll either need to create a new form or edit an existing form with WPForms.

If you are creating a new form, you’ll need to provide your form with a title and choose a template. We’re using the Simple Contact Form template here.

Choose a form template

Next, we’ll add a Single Line Text field to our form.

Single Line Text Field

Then, we need to configure the default value for the Single Line Text field (which we’ve renamed to “I’d like to know more about”) to be ready to accept information from a query string.

To do this, click on the field to open the Field Options screen. From here, you’ll need to open Advanced Options, scroll to the box labeled Default Value, and then click on Show Smart Tags.

Show Smart Tags for Default Value

From this list, select the option called Query String Variable.

Set default value to query string variable

Once you’ve made this selection, you’ll notice that {query_var key=""} has been added to the Default Value box. Between those empty quotes, you need to add a name (called a key) to represent this field. This key will be used later in our query string.

We’ll give our field a key called “contact-reason”. It’s important to note that the name you use for this key will be visible in the URL we set up later, so the name should be logical to the key’s purpose. Also, be sure your key doesn’t include any spaces – instead, replace spaces with a dash “-” or an underscore “_”.

Assign a key to the query string variable

Publishing Your Form and Creating a Link with a Query String

Now that you’ve set up the form, you can go back to your WordPress dashboard. You can either create a new page or edit an existing page to publish the form you just created.

To publish your form, first click the + (plus) button to add a new block.

Insert form on page

To locate the WPForms block, you can search “WPForms” or open the Widgets category. Then, click the block named WPForms.

Select WPForms Block

This will add the WPForms block to the editor screen. Next, go ahead and select the form you want from the Select a Form dropdown.

Your form is now embedded on the page, so you can publish your page and visit it on the front end.

Next, you’ll need to create another new page or edit an existing page where we can add a link to this form.

In this example our form is on our contact page, so a standard link would look something like: https://example.com/contact. We’ll link some text to that first.

Right now, that link will simply open the Contact page. Next, we’ll modify this link to contain a query string. This modified link will not only open the contact page, but pass a query string that auto-fills the Single Line Text field in our form:

https://example.com/contact?contact-reason=EventsandParties

Here is how we built this new link, in order of its components:

  • The normal link (https://example.com/contact)
  • A question mark
  • The key you designated earlier (in this example, contact-reason)
  • An equals sign
  • The text you want to be auto-filled

By clicking on this link, our Single Line Text box will be auto-filled with any text after the equals sign. In this case, the link above will put “EventsandParties” in that field:

Autofill text from query string

To add spaces to the text that appears in this field, just place %20 anywhere you would like a space to appear. For example, the code https://example.com/contact?contact-reason=Events%20and%20Parties will add a space to result auto-fill text that reads “Events and Parties”:

Autofill text from query string with spaces

Note: Would you like to auto-fill two or more fields with your query string? Just be sure to add an & symbol before including an additional key and text. For example: https://example.com/contact?contact-reason=Events%20and%20Parties&second-field=OtherValue

That’s it! We hope this tutorial helped you to set up links with query strings that will auto-fill a text field on a form.

Next, you might also want to see our guide on how to create dynamic field choices to list post titles or categories.