How to pre-fill form fields using URL Parameters

You can pre-fill the fields in our Form widgets through URL parameters, which can make form filling quicker and easier for your clients and thus make more people complete their submissions. In this article, we're going to explain what fields can be autopopulated, how to enable this functionality in the widget and how to build URLs to execute this.

Field types that can 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 is easy! First, go to the Build Form tab in your widget setting and click Add Field:

Then choose the Field Type you'd like to add to the form:

Set the element up the way you want it to be, and you're ready to move to the next step.

Creating a parameter

In order to pre-fill form fields, first you need to create parameters for each field you'd like to prepopulate. Parameters are used in URLs to indicate what data is assigned to a specific field.

1: To create a parameter, please go to the Settings tab in your widget's configurator and click Pre-fill with URL Params:
2: Next, click Add Parameter:
3: Enter the Parameter Name, choose the corresponding Form Field, click Done then Save:

Great job! 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

Take the URL of the page that your Form widget is installed on. This is the base URL that we will use to add form field parameters to. For example:

mywebsite.com/contact/

2

Add a question mark (?) after the base URL, then add the Parameter name, followed by an equal sign (=) and then add the pre-filled parameter value:

mywebsite.com/contact/?Name=John

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.

3

If there are spaces in your Parameter name or in the pre-fill parameter value, please replace the space with " %20":

 mywebsite.com/contact/?Name=John%20Doe

4

To add two or more form field parameters, add ampersand (&) at the end of the URL:

 mywebsite.com/contact/?Name=John%20Doe&[email protected]

Well done! Now, if a user clicked this link, the fields Name and Email of the widget at mywebsite.com/contact/ would be automatically prepopulated.

The pre-filled fields are not locked, so the user is free to edit or completely change the information in it. The only exception to this rule is the Hidden field type.

Tips on using Hidden field

The information in Hidden fields is only visible to the widget owner when they receive the submission, and the user can't interact with these fields at all.

So, pre-filling Hidden fields might come in handy, for example, if you'd like to know how your clients found their way to your form.

To achieve that, you need to:

1

Create a Hidden field in your Form widget:

2

Add a parameter for it:

3

Next, add its Parameter name and preferred Parameter value to the URL:

 mywebsite.com/contact/?From=Facebook

This way, if a user follows the link to your widget and submits a form, an additional pre-populated field will be added to their submission.

Here's how they'd see your form:

And how you'd see their submission:

Great! Now you are familiar with this feature and can effectively utilize this option to make the process of filling out the form easier for your website visitors!