All Collections
Build & customize
Create forms
FAQs
How to use URL parameters to pre-fill form fields
How to use URL parameters to pre-fill form fields

Automatically fill form fields, use alias IDs and URL parameters to set specific field values for discounts, UTM tracking, and more!

Updated this week

A URL parameter is a way to pass data in a link to a web page. You can use URL parameters to auto-populate known data from your audience like their phone number, track different metrics in services like Google Analytics or Google Ads, or even use Facebook conversion API (the new version of Facebook Pixels).

Here we will explain how to pass URL parameters using hidden form fields, capture UTM values (such as traffic mediums, sources, campaigns, etc.), and pre-fill form fields and auto-populates.

Prepopulating form fields via URL Parameters

First, you need to get to the form editor page. Click on a field, and add a valid alias ID from the side menu containing the field data. The id should contain English letters and numbers with no space or other characters except underscore.

The form I used in the image below is a multi-step order form, and I wanted to discount only to a particular group of my customers.

For the sake of that, I added a short text field as a discount code to the form. Then I added an alias ID to this field.

add a valid alias ID

🗄️ Old dashboard:

Here you can see how you can do this in the old dashboard:

automatically populate

After saving the form, I copied the URL from the pop-up and added the alias id with the desired value at the end of it.

how to auto populate forms

It should be exactly like the URL parameters like the example below:

https://formaloo.net/6zjqj?discount_code=winterOff

Now I can share this URL with that particular group of my customers that I wanted to give them a discount with the code of winterOff.

When they open the form, the discount field is set winterOff automatically.

pre populate form fields html

Even if your form is embedded on your site, you are still able to use this feature. You need to add this parameter discount_code=winterOff to the host website URL address. like:

https://www.myblog.com/post=12?discount_code=winterOff

Pre-fill more than one field

you can add as many alias ids as you want to your form.

https://formaloo.net/6zjqj?discount_code=winterOff&city=tallinn&zipCode=10111

Using URL parameters in website widgets

Alias IDs as URL parameters work properly on all forms; widgets, multi-steps, and single-step. But we have a better approach for widgets. Adding alias ids as a prop of the widget’s script helps you manage the field values better and more efficiently.

Here is an example of a widget snippet with an alias id. On the first step, go to the share page or get the widget’s snippet from the saving pop-up on the form’s editor page.

auto populating

Then add the alias ids with the format of URL parameters to alias_fields, as a new prop to widget settings.

<!-- Formaloo Widget --> <div data-widget-form="formaloo-widget" data-prop-slug="yKtEiEOL" data-prop-type="side-widget" dir="ltr" style="font-size:14px;line-height: normal;"> <script type="text/props"> { "position": "right", "once_per_user": false, "alias_fields": "discount_code=winterOff" } </script> </div> <script async src="<https://widget.formaloo.net/script.js>"></script> <!-- End Formaloo Widget -->

This way helps you to use local variables and functions of the host website to set the initial values of your form’s field.

Use this guide to set the value of alias ids:

Field Type

Valid Values

Text

text (e.g. winteroff)

email

valid email address

phone

number

number

number

long text

text

website

valid URL

time

valid 24h time (e.g. 13:50)

date

valid date (e.g. 2021/9/10)

star

Number between 1 to 5

score

Number between 0 to 10

CSAT

Number between 1 to 5

like/dislike

for like 1, for dislike -1

hidden

text or number

Using URL parameters in Script

You can now use URL parameters in the Script code that you use to embed your form. On the first step, go to the share page or get the Script snippet from the saving pop-up on the form’s editor page.

Copy the code and paste it into the page where you want to embed your form.

data-alias-fields="[email protected]&message=code hello"

Your Script then should look like the following:

<div id="formz-wrapper" data-formz-slug="your-form-slug" data-formz-type="simple" data-alias-fields="[email protected]&message=code hello" ></div> <script src="https://formaloo.me/istatic/js/main.js"></script>

How to use hidden fields with URL Parameters

With the power of Alias IDs, you can add hidden fields with values to your forms. It means the field won’t be displayed to the user, but the value you set for it will be submitted including the user’s answers.

This is handy for saving some additional data like the user session, the source URL of the form (like UTM), or any other info you want.

So you need to add a hidden field to your form on the form editor page.

add a hidden field to your form

Then add a title and alias ID to it. The rest is exactly like the way I described earlier. Just add its alias ID with its value as URL parameters to the form’s URL and share it with your users, or if it’s a widget, add it to the widget’s script.

The CSAT widget in the Formaloo dashboard is a good example of managing our users’ analytics with hidden fields.

We submit the user’s email and name along with the widget answers to improve customer support and satisfaction.

this is an example of using the widget and hidden fields with React on the Formaloo dashboard.

import { useEffect } from "react" import { useUser } from 'src/use'; const CsatEmbeddedWidget = () => { const { user } = useUser(); useEffect(() => { const script = document.createElement('script'); script.src = "<https://widget.formaloo.ne/script.js>"; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, []) const widgetProps = { "position": "left", "once_per_user": false, "alias_fields": `email=${user.email}&first_name=${user.name}` } return ( <> {/* Formaloo Widget */} <div data-widget-form="formaloo-widget" data-prop-slug="eOysiTH7" data-prop-type="side-widget" dir="ltr" style={{ fontSize: 14, lineHeight: 'normal' }}> <script type="text/props"> {JSON.stringify(widgetProps, null, 2)} </script> </div> </>) } export default inject("profileStore")(CsatEmbeddedWidget)

You can also use Hidden Fields to capture UTM or GCLID values from your formaloo form and send it to your customer data platform or the application of your choice.

Did this answer your question?