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

Introduction

Do you want to pre-populate form fields with information pulled from another form? Not only does this insure 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.

Creating your forms

We’ll start by creating two separate forms. If you need any help in creating forms, please see this documentation.

Creating the homepage form

First, create your first form and add all of your fields to this form.

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

create the first form with the name and email address

Creating an additional form

Next, create an additional form with the fields you need which will include the fields you want to pre-populate.

Once you’ve completed adding your fields, under Settings » General tab, click the Advanced options so that you can toggle the button to Enable dynamic fields population.

be sure to remember to toggle the option on the Settings, General, Advanced to Enable dynamic fields population

Setting up the URL Redirect on form submission

Now it’s time to pull it all together. Edit the homepage form you created in the first step 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://my-example-site.com/quote/?wpf1036_1={field_id="1"}&{wpf1036_2={field_id="2"}

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

  1. my-example-site.com – this needs to be changed to match your site’s domain name.
  2. quote – this needs to be changed to match the page name you’ve added your more detailed form to.
  3. {wpf1036_1={field_id="1"} – the 1036 is the form ID for the second form and the _1 is the field ID for the email address field. You’ll need to update both of these to match the form ID for the second form and the field ID for the second form that contains the Name field
  4. {field_id="1"} – this will need to be changed to match the field ID number from your first form for the Name field.

After setting up your confirmation URL you'll be all set to pre-populate form fields

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.

pre-populate form fields

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.

FAQ

Q: Why isn’t it pre-populating the next form?

A: If you notice that your fields aren’t pre-populating, please check that on your second form, you have enabled the dynamic field population.

Open the form builder of the second form and on the General tab, click the Advanced towards the bottom of your screen and toggle the button to Enable dynamic fields population.

enable dynamic fields population on the advanced tab under the General Settings

Q: What do I do if I’m using a first and last name for my name field?

A: If you’re not using the Simple format for your name, you would just list out your name field in the URL like this.

http://my-example-site.com/quote/?wpf1036_1|first={field_id="1|first"}&wpf1036_1|last={field_id="1|last"}&{wpf1036_2={field_id="2"}

The same can be said for the address, your format for breaking down the address would appear like this.

&wpf1036_3|address1={field_id="3|address1"}&wpf1036_3|address2={field_id="3|address2"}&wpf1036_3|city={field_id="3|city"}&wpf1036_3|state={field_id="3|state"}&wpf1036_3|postal={field_id="3|postal"}