How to Auto-Populate a Form Using a Link

Written by Noah Coffey on February 22, 2012

Posted in Form Hacks

Post last updated on February 10, 2016.

Sometimes, it can be useful to provide a link to your web form that automatically inserts some data into the form. An example of this would be to pre-fill an email address form field or insert a domain name into a common contact form so you can use one form across multiple websites. The latter is the example we’ll walk through here.

Pre-Populate a Contact Form

Let’s say we have three different websites that all need contact forms. Instead of creating a separate contact form for each website, we can use the same contact form for all three. The secret is using an auto-populate form feature to pre-fill a read-only form field that tells us the source of the contact form.

Let’s walk through how to set this up. First, here is our example contact form:

Example Contact Form

Step 1: Add a Blank Short Answer Field

In this example, I’ve added a blank short answer field just above the name field. That field will be the one we pre-populate with our website name so both the visitor to the form and we will know which site they came from. I’ve also marked that field as read-only so it shows up without a border.

Short Answer Field Options

Step 2: Add a Query String to the Form URL

Next, we will add something called a query string to our form URL. This will allow us to specify a field name and a bit of text we want to automatically show up inside that field. Let’s say our first website is a shoe store. We’ll tell the form (via the URL) that anyone who clicks on this link came from our shoe store website.

Let’s say our original form URL looks like this:
http://www.formstack.com/forms/?form=1178804&viewkey=vlR5BAEfA

After adding the query string for our shoe store, our URL looks like this:
http://www.formstack.com/forms/?form=1178804&viewkey=vlR5BAEfA&Site=Sunshine+Shoe+Store

You can see that we’ve added &Site=Sunshine+Shoe+Store to the end of the URL. This will insert “Sunshine Shoe Store” into the field with the label “Site” (the plus signs are converted to spaces). Here’s what the form looks like when someone clicks the link from the shoe store:

Example Form with Query String

Step 3: Repeat for Other Websites

Now, we just have to change the phrase “Sunshine Shoe Store” in our link to the name of our other two websites (or any number of websites), and we can reuse this contact form for any website we have. Each form will pre-populate the source site in the short-answer field we created in step 1. In other words, all our submissions will include the name of the site, so we will know where each visitor came from.

If you want more information on auto-populating your forms, check out our detailed support doc on pre-populating form fields. You might also be interested in our Social Autofill feature, which allows visitors to complete your forms faster by automatically gathering contact data from their social media accounts.

Ready to try out all our autofill form features? Click below to sign up for a free 14-day trial of Formstack!