How to Use URL Parameters to Pre-Fill Form Fields

The exciting and powerful features we’ve added to Formaloo form builder and databases recently, are “**Hidden** Field” and “Alias ID”. Perhaps you’ve experienced the times when you need to add initial value to your form’s questions. With Alias ID, this will happen quickly with no knowledge of coding.

Or when you need to send additional data like the user id, user session, user email, or the source URL of the embedded form beside the answers to your form’s questions. Adding the hidden field to the CSAT widgets or any form brings your data and customer analytics to a new level.

To summarize, the Alias ID of all your form’s fields enables you to pre-fill data into your forms when you want to via parameters in the URL. This means you automatically pre-fill data based on the activities your users do on your website and apps. The hidden field feature, enables you to get this data without annoying your users with the additional fields and long forms that they don’t want to see.

What is URL Parameters?

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

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

A note about GDPR: If you are concerned about GDPR compliance or Google Analytics privacy policy please refrain from appending personally identifiable information to the URL on form submissions.

How to use Alias ID to use URL Parameters?

First, you need to get to the form editor page. Click on a field, and from the side menu which contains the field data, add a valid alias id. 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 alias id to this field.



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.



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 customer 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.



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

Using multiple URL parameters

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 the 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.



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

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:

How to use hidden field with URL Parameters?

With the power of Alias IDs, you can add the 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 includes with 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 that you need to add a hidden field to your form on the form editor page.



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 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 widgets 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 = ""; 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 */}

) } 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.

Updated on: 22/01/2023