Pre-Populating Form Fields

Ever think, “I have this information already and I would really love it if these fields on my form were already filled out for my submitters so that they didn’t have to fill it out”? Well, then pre-populating form fields is the process for you!

There are many possible uses, but here are just a few that you might want to use it for:

  1. Copying contact information from one form to another so that you can attribute a second form to the same person without them having to fill out all the information again

  2. Sending out unique form URLs so that you can attribute a form to a certain club member (with our without them knowing about it - sounds sneaky, but I can show you how!)

  3. Creating a string of forms where different people fill out different sections

To pre-populate form fields, we essentially take the URL for the form, and add information to so that, when the web page is loaded, the page also loads information into certain fields automatically. Below I’ll walk you through how to do that. The end result can look complicated, but if you take it piece by piece, it can be easy to assemble.

Building the URL - The Building Blocks

You need the following pieces, which I will show you how to find below; I recommend opening some sort of word processor so that you can copy/paste all the pieces as you get them, and then assemble it into one URL when you’re ready.

  1. URL of the form you want to pre-populate

  2. The field labels that you want to populate

  3. The information you want to populate the fields with

1.  The URL of the form you want to populate

In order to find the URL to the form you want to populate, log into Formstack and open the Publish page of the form. There, you will be able to copy the form URL and put it in your word processor for use to assemble later.

In this example, my form URL is: https://Chartweg.formstack.com/forms/prepopulate_2

2. The field labels that you want to populate

On the form that you want to populate, decide which fields you would like to be filled in. Then, copy the field labels into your word processor for assembly later.

In this example, the fields are: “Name2” and “Your Email2”

A couple of notes:

  1. It is critical that you copy the field label exactly as any misspellings will cause the field to not populate correctly

  2. Any spaces in the field label should be replaced with an underscore; for example, “Your Email2” should be replaced with “Your_Email2” since web addresses are not allowed to have spaces in them

3. The information that you want to populate the fields with

There are two different ways to get this information: if you know the exact information you want to populate, and if you want to fill the information from another form. I’ll take you through both here.

If you know the exact information you want to populate

This is useful when you know exactly what you want the field to be filled in with, such as:

  • If there is a field that you want to be the same for every submission (event name, special code, referral name/ID, etc)

  • If you’re sending out person-specific URLs

This can be typed exactly as you would like to want it to be filled in. Again, like the field label, it’s important to type it as you want it and to replace any spaces with underscores.

For this example, we’ll call the answers: “Formstack Support” and “support@formstack.com”

If you want to fill the information from another form

These options can be used if you are directing from one form to another, such as:

  • If there is a string of forms that you need the same user to fill out, but you don’t want them to have to duplicate basic information (name, email, etc)

  • Creating a multi-stage form where different people have to fill out different parts of the form.

The important key here is that you cannot simply create this link and send it out - it has to come redirected from another form through a submit action or notification/confirmation email.  I will outline how to do that in the “assembling the URL” section

Instead of using the exact information that you want the field to be populated with, you will use the Field ID from the form you’re pulling information from.

So, to explain, I’ve made another form with a name and email field on it that I will use to demonstrate how to use this process.


In order to pass the two fields over, I will need the Field IDs for each of them. The easiest way to find the Field IDs is by opening up a confirmation email “custom message”.

Note: be sure you open the custom message in the form you are pulling information FROM (in our case, that’s called “Pre-Populating Form Fields #1”)

To open a confirmation email, go to the form Settings > Emails & Actions > Confirmation Email. In the Confirmation Email, change it to a Custom Message. From the Form Fields Panel, drag and drop the needed fields into the Custom Message. Then, switch the Editor to Plain Text Editor.

Notice how, in the above example, you can pull the entire name, or the first or last name separately; use whichever suits your needs. Since we want to do the whole name, our two field IDs are:  {$36942607 Name1} and {$36942608 Your Email1}

A few notes:

  • You'll want to delete the field label so that only the field ID is within the tags. In the example above, you would only want to keep {$36942607} and {$36942608}.

  • It’s important that you copy everything from { to } so that the tag populates correctly

Assemble the URL

Now that we have all the pieces that we need for the pre-populating URL, we are going to combine them into one URL that can be sent out to your customers.

Please note: If you'll be attempting to pass data that will likely contain spaces or line breaks (for example - Short or Long Answer fields, Checkbox, or Radio buttons), this will break the URLs we're about to construct. There's no way around this unfortunately as spaces will break any URL. We encourage you to only pre-populate form fields from a previous form only if they will not contain spaces. If you're building a pre-populated URL manually, you can use the "%20" character to be a space in your data.
 
If you know the information:
With the link completed, you can send it out to your submitters to use.
If you are populating from another form
https://CHartweg.formstack.com/forms/prepopulate_2?name2-first={$36942607-first}&name2-last={$36942607-last}&Your_Email2={$36942608}
Notice the 3 symbols that you will use to distinguish information:
  1. ? - goes in between the second form URL and the first field name from the second form that you are trying to populate. You will not use this symbol again
  2. = - goes in between each field name from the second form and the information you want to fill that field in with (whether you type it manually or want to use info from another form). You will use this for each field that you want to pre-populate
  3. & - goes in between each of the field info and the next field name that you want to populate. You will use this for every set of fields that you want to populate
After you have the link finished, you need to decide how best to use it, which will depend on your situation. There are a few options:

What if I don’t want my submitters to know this is happening?

You can easily mark any of these fields hidden so that your submitters don’t even see the fields that you are populating. For more information on how to do that, check out our Hidden Fields Support Doc

What if I don’t want my submitters to be able to edit the information?
You can easily mark any of these fields read only so that, even if the submitter can see the field, they cannot edit it. For more information on how to do that, check out our Read Only Fields Support Doc

Other Helpful Info:
  • Sub-fields populating
    • name field options include
      • name
      • name-first
      • name-last
    • date/time fields can have each part populated, also. As an example, we can populate that field to be January 10, 2014 PM as &datetime=January%2010%202014%
    • Address fields can be pre-populated as
      • address-address
      • address-address2
      • address-city
      • address-state
      • address-zip
      • address-country
    • Multiple options on a checkbox field can be populated by separating each option with a new line, which is encoded in the URL string as "%0A” similar to the date
  • If you are pre-populating a password-protected form, it’s important that you also include the password in the pre-populated URL so that the form can get past the password to populate the form.
  • We do not currently support pre-populating embed forms (sorry!)
  • When you are done with this, if you want the fields to be filled in, then this is the URL you should send to your customers, and not the regular URL that you find in the Publish tab of the form. The URL on the Publish tab will still work, and you are welcome to send it out, however, if a submitters uses that link to get to your form, all of the fields will be blank and none of the fields pre-populated, so keep that in mind depending on the use you would like.