Autofilling Form Fields Using Query String Parameters

Overview

You may come across a circumstance where one of your website's visitors has already filled out some information on a non-ShortStack form, but then you direct them to your ShortStack campaign and—ideally—you'd like for the visitor not to have to enter in any information they'd already provided to you.

With some advanced know-how, you can do just that by using a campaign URL with query string parameters attached to autofill fields in your ShortStack form. In this doc, we'll walk through how to get this set up in the Campaign Builder.

Setting Up Your Form Container and Field Widgets

You'll need to set up your form like any other campaign you build in ShortStack. Start by adding a Form Container, and then adding Field Widgets to that container for each bit of data you want to collect from your visitors.

This video does an excellent job of quickly showing you how that's done:

When you're finished setting up your form, note which fields you want to have auto-filled, as you'll need to keep those in mind when setting up your URL. Then, publish your campaign so that you have the Campaign URL to use as a base for the next step.

Setting Up Your Campaign URL With Parameters

This is a step that you'll have to do outside of ShortStack, and it requires the most tech know-how. The biggest thing to remember is that you'll want the URL to be formatted like so:



You can have as many field/value pairs added to the URL as you'd like, and you'll need to set it up so that the field values are populated from the data submitted by each visitor on your website. Remember that for each pair, you'll need a corresponding field in your ShortStack campaign. While you can technically make your field names anything you'd like, it's best practice to use the names of your ShortStack fields to proactively diffuse any potential confusion during the rest of the setup.

This new URL with the field names and field values added will be what you'll use on your website to direct people to your ShortStack campaign.

Note: ShortStack can not help with the setup of adding your parameters/values to your URL, as it is outside the scope of our support.

Multi-Section Fields

You'll notice that some fields have multiple sections - for example, a name field has separate values for first and last name. To address this, you'll want your field value added to the URL with a pipe (a straight vertical line - Shift + \ on your keyboard) between the sections. So for example, setting up a name parameter with two values would look like this:



And then when the information is pulled into your form, it'd be placed in the corresponding sections.

Adding Action Widgets to Your Campaign

The difficult part is now done! You have your form and fields established, you have your campaign URL set up, and you've made sure that the data filled out by visitors on your site is populating in the URL's field values just like they're supposed to. Now the final step: Setting up Action Widgets so that those values are pulled into the right fields in your ShortStack campaign.

For an easy-to-follow example, we're going to have a URL set up that pulls in the email and country of the visitor that has already been filled out on our website; it looks like this:

Each URL will have different values based on what was submitted to your site (the j@stack.com and USA in this example) but the parameters (email and country) will be the same.

We'll need to set up an Action Widget for each of the two pieces of data we want to pull into our form.

1. Start by adding an Action Widget to your campaign, then click the Add Condition button.
   
   
   
   
2. Click the radio button for The campaign has finished loading, then Save.
   
   
   
   
3. Now your new action will trigger as soon as the campaign has loaded on your visitor's browser. Click the Add Action button.
   
   
   
   
4. Now, you'll link a parameter from the URL to the corresponding field in your ShortStack form. In the Widget section, use the dropdown to select the specific field you want auto-filled. Then, in the Action section, click the radio button to select Set field value.
   
   
   
   
5. Finally, in the Field Value section, select Use the value from a query string parameter using the dropdown and then type that parameter (in this case our email parameter since we're wanting to populate the Email field) into the Query string parameter field - make sure the parameter you type in exactly matches what is used in your URL. Then, click Save.
   
   
   
   
6. Double-check your Action Widget's settings - in this widget, the trigger will fire when the campaign has finished loading, and the action will be that the field value for our Email field will be set to the value of the query string parameter "email" from our URL. Click Save and Exit to finish.
   
   
   
   
7. Repeat steps 1 through 6 for each additional field/parameter that you'd like to have auto-filled in your ShortStack form.

Testing Everything Out

Once you have everything set up, you'll want to test it to make sure it's working. Again, using the same example URL from earlier; the campaign loaded and then automatically filled the email and country fields based on the parameters in the URL.



Note that you don't need to have parameters set up for all the fields in your form - just fields for which you don't want folks to have to re-enter information they have already provided to you.