Form widgets: How to pre-fill form fields using URL Parameters

[Max]

As you may know, our Forms widgets have an option to pre-fill form fields using URL Parameters.

This means that when your website visitor clicks on the element with a pre-fill URL or just opens such a link, the info from the URL Parameters will be automatically added to the corresponding field. It saves a lot of time and makes form filling much easier.

Now, we are going to show how you can do this

Field types that can be pre-filled

Firstly, you need to choose the fields that should be pre-filled. There are 8 types of fields you can pre-fill in Elfsight Form widgets:

• Short Text
• Long Text
• Email
• Website
• Phone
• Number
• Hidden
• Number Scale

Creating a field

That’s a breeze! Just follow these steps:

Click Add Field button on the Build Form tab

Choose the needed Field Types and set them up

Copy the Field ID without brackets (it will be necessary for creating a parameter)

Creating a parameter

To pre-fill form fields, first you need to create parameters for each field you’d like to prepopulate. URL Parameters show what data goes to a specific field.

Here are the steps you should follow:

Choose Pre-fill with URL Params section on the Settings tab and click on Add Parameter

Paste the Field ID to the Parameter Name, choose the corresponding Form Field and click Done

When all parameters are created and your Form widget is installed, you can proceed with creating a URL link for autofilling.

Building a pre-fill URL

1. The URL of the page where your Form widget is installed is the base URL. For example: mywebsite.com/contact/ We will use it to add form field parameters to.

2. After the base URL, add a question mark (?), then the parameter name, followed by an equal sign (=) and the pre-filled parameter value at the end: mywebsite.com/contact/?first-name=John

3. Just in case, you can find the full list of the Parameter names you’ve created in your widget settings → the Settings tab → Pre-fill with URL Params.

4. If there are spaces in your Parameter name or in the pre-fill parameter value, please replace the space with " %20": mywebsite.com/contact/?first-name=John%20Doe

5. To add 2 or more form field parameters, add ampersand (&) at the end of the URL:
   mywebsite.com/contact/?first-name=John&last-name=Doe&email-address=j.doe@mail.com

Faced difficulties or got questions? Describe your use case in the comments and we’ll be happy to help

[Chris_Vaughan]

Is there a way to include the parameter as part of the embed code? For example, when I put buttons on my landing page to drive users down the page to where the code is, it changes the URL and makes it so the parameters are no longer there. Accordingly, they have no value. But I would like to embed my form on different pages and have a referral parameter get passed on each submission. But this referral would change for each page it is embedded on. Advice on how to pass the parameter through the embed process?

[Max]

Hi @Chris_Vaughan

Could you please send me a link to the page where your widget is installed? I’ll be happy to check things for you