Advanced: Autofilling Form Fields Using Query String Parameters

ALL PLANS

Overview

If you’d like a cleaner URL than what the Simple Query String Parameter setup provides, you can achieve this by using Action Widgets. This method allows you to set parameters without relying on the automatic labels generated by ShortStack.

Setting Up Your Form Container and Field Widgets

1. In the Campaign Builder, add a Form Container to your campaign.
2. Add Field Widgets corresponding to the data you wish to collect (e.g., Name, Email, Country).
3. Once your form is set up, publish the campaign to generate the Campaign URL.

Constructing Your Campaign URL with Parameters

To pre-fill form fields, you'll need to append query string parameters to your Campaign URL. The format is as follows:

https://yourcampaignurl.com?parameter1=value1&parameter2=value2

Steps:

1. Determine the field names in your ShortStack form that you wish to pre-fill. It's advisable to use these exact names as parameters to avoid confusion.
2. Append each field name and its corresponding value as a query string parameter to your Campaign URL.

Example:

https://yourcampaignurl.com?email=example@example.com&country=USA

Handling Multi-Section Fields

For fields with multiple sections (e.g., First Name and Last Name), separate the values using a pipe character (|).

Example:

https://yourcampaignurl.com?name=John|Doe

This will populate "John" in the First Name field and "Doe" in the Last Name field.

Adding Action Widgets to Your Campaign

To ensure the query string parameters populate the correct form fields, you'll need to set up Action Widgets for each parameter.

1. In the Campaign Builder, add a new Action Widget.
2. Click the blue + button under WHEN.
3. Select The campaign has finished loading under the Campaign category.
4. Click Save.
5. Click the blue + button under THEN.
6. In the Widget section, select the specific field you want to auto-fill (e.g., Email).
7. In the Event section, choose Set field value.
8. In the Field Value section, select Use the value from a query string parameter.
9. Enter the corresponding parameter name (e.g., email). Ensure it exactly matches the parameter used in your URL.
10. Click Save.
11. Repeat steps 1-10 for each additional field you wish to auto-fill.

Ensure that the parameter names in your URL match the ones specified in the Action Widgets to facilitate accurate data population.

Testing Your Setup

After configuring your form and Action Widgets, click Publish Changes in the top right corner of the Builder:

1. Use the constructed URL with query string parameters to access your campaign.
2. Ensure that the specified form fields are pre-filled with the correct information based on the URL parameters.
3. Test the URL with various data to confirm consistent functionality.