How to Use Query Strings to Pre-Populate Form Fields From Another Form

Overview

Do you want to pre-populate form fields with information pulled another form? Not only does this assure accuracy between forms but it also saves your visitors time, allowing for higher conversions. In this tutorial, we’ll show you how to pass through information from one form to another by using pre-populated query strings.

Setup

For the purpose of this tutorial, we’ll be creating two separate forms. One for the homepage that will capture just the name and email address. And the second form will capture some additional information needed to complete the lead capture.

1) Creating the homepage form

First, we’ll create the first form and add the Name and Email field to the form.

For now, click Save. We’ll be coming back to this form in another step.

Create your landing page form

2) Creating an additional form and add your field keys

Create an additional form with the Name and Email form fields but also add any additional fields to collect more detailed information.

In the Advanced Options section of the Name field.

Copy and paste this field key into your Default field.

{query_var key="name-field"}

Add the query string to your Name form field Default section to accept the pre-populated information

When you add in the Email field, you’ll repeat this step in the Advanced Options section for the Email form field. Copy and paste this into the Default field.

{query_var key="email-address"}

Add the query string to your Email form field Default section to accept the pre-populated information

4) Enabling the Dynamic Field Population

Next, go to the Settings » General inside the form builder and click the checkbox to Enable dynamic fields population. Then click Save.

Check the box to enable the dynamic fields population

It’s important to note that this doc (specifically) will only work in this manner for certain fields. Depending on the field you’re looking to use, you may want to check our documentation here for further assistance.

5) Setting up the URL Redirect on form submission

Now it’s time to pull it all together. Edit the form you created in Step 1 and go to the Settings » Confirmation section.

Change the Confirmation Type to Go To URL (Redirect) and in the Confirmation Redirect URL field, copy and paste this URL.

http://yoursite.com/your-page-name/?email-address={field_id="3"}&name-field={field_id="1"}

With that URL above, there will be some things you’ll need to change. Such as:

  1. yoursite.com – this needs to be changed to match your site’s domain name.
  2. your-page-name – this needs to be changed to match the page name you’ve added your more detailed form to.
  3. {field_id="3"} – this will need to be changed to match the field ID number from your second form for the Email field.
  4. {field_id="1"} – this will need to be changed to match the field ID number from your second form for the Name field.

After setting up your confirmation URL you'll be all set

If you need help finding your specific field ID numbers, take a look at this tutorial.

Once you’ve added that to your Confirmation Redirect URL, click Save on the form.

Now when users see the homepage form, they can fill in their name and email address and when they click the Submit button, the page will redirect to another form that will automatically pre-populate the Name and Email Address fields with the information collected from the form on your homepage.

And that’s all you need to use a query string to pre-populate your form fields. Would you like to see what other fields you can use this with? Take a look at our documentation on How to Enable Dynamic Field Population.