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

Pro Tips Elfsight Widgets Tips
, , ,
1

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 :slightly_smiling_face:

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

image
image372×626 13 KB


Choose the needed Field Types and set them up

image
image372×649 9.2 KB


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

image
image373×550 8.94 KB


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

image

image


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

image

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


GIF 12-20-2023 4-07-07 PM


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

1 Like
13

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?

1 Like
14

Hi @Chris_Vaughan :wave:

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