Forms: How to pre-fill form fields using widget's API

Want to fill in your form fields with specific values? If so, this post is just the thing for you!

We are excited to announce that this functionality is supported in our Forms apps (Form Builder, Contact Form, Subscription Form) now. So, let’s dive in and see how it works :rocket:

What are the benefits?

This feature allows you to easily pre-fill your form fields with any information. This means you can save your clients time by having certain fields already filled in based on what they’ve done or where they are on the page.

What fields can be pre-filled?

Firstly, you need to choose the fields that should be pre-filled. There are 17 types of fields you can pre-fill using Custom JS:

  • Short Text
  • Long Text
  • Email
  • Website
  • Phone
  • Number
  • Date
  • Time
  • Hidden
  • Choice
  • Image Choice
  • Dropdown
  • Consent
  • Star Scale
  • Number Scale
  • Thumb Scale
  • Smiley 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


Creating a field value

To pre-fill form fields, we’ll need to use the following API method:

widget.setFieldValue(‘Field ID’, value);

This method takes the field ID and the field value as parameters. While it might seem difficult at first, creating a field value is actually quite simple.

Field ID

You can find this ID for each field on its editing page at the bottom. For example:

Please don’t forget that the Field ID will change once you change the Label of this field:


Value

This represents the specific value that needs to be assigned to the corresponding field.


Feature in action

This example shows how you can use our API method for the Short Text field.

We’ve changed the field’s label to “First Name”. Consequently, the field ID has changed to [first-name]:


Now you need to assign a specific value to this field using the code we provided above and add it to the Custom JS field on the Settings tab. In our example, this field will be pre-filled with the name “Alex”:

widget.setFieldValue('[first-name]', 'Alex');

Important: Custom JS operates only upon widget installation, but not in preview mode. While the screenshots below may demonstrate changes within the widget’s configurator, please know that this is only a test environment.

Just in case, here is the link to our Help Center article where you can find more details - How to pre-fill form fields dynamically using widget’s API - Elfsight Help Center


Guys, this feature is useful for more complex situations where you want your widget to automatically pre-fill form fields based on certain conditions or user actions.

If you’d like to implement this functionality, describe your use case in the comments and our devs will come up with a custom solution :slightly_smiling_face:

3 Likes

Hi Max,
I am new to Elfsight form builder.
I wonder how to get the “widget” in my custom js file.
Any advice would be appreciated. Thanks
Looking forward to your help.

2 Likes

Hi there and welcome to the Community, @Talya_Levmor :wave:

Could you please elaborate on what you mean under “get the “widget” in my custom js file”?

1 Like

Hi @Max
I don’t understand correctly. The first name “Alex” is defined in Custom JS. This is static input for me.
How should another name be passed dynamically?

3 Likes

Hi there, @Sina :wave:

Thank you so much for your note!

You’re right, the examples in this guide show how the fields are pre-filled with the specific values defined in the Custom JS field.

I agree that the word “dynamically” may be confusing in this context, and I’ve adjusted the title and info in the post.

However, you still can dynamically pre-fill the fields based on certain conditions or actions using this feature.

If you’d like to implement it, please describe your use case, Our devs will come up with a custom script that will be used in a combination with the pre-fill feature :slightly_smiling_face:

2 Likes

Hello @Max, I don’t currently need the function. I use the placeholder to pre-populate fields.
I just wanted to understand what the code is supposed to achieve. I think in order to pass the name “Alex” dynamically, it has to be available as a variable at the beginning. Either by entering or selecting. In a multistep form you could then pass this on to other forms. But I haven’t tested it yet.
Here we come up with ideas again like introducing external variables into a form.
These could then be passed on with a link, for example
https://example.com/to-elfsight-form?name=Alex
I think I’ve even come across such a suggestion, if I’m not mistaken.

1 Like

Unfortunately, the dynamic pass of the values in multistep forms isn’t supported now, but we have this idea on the Wishlist - Pre-fill questions in multistep Form based on previous answers

As for the external variables, I guess we have a solution. Please check it out
and let me know if it covers your idea - Form widgets: How to pre-fill form fields using URL Parameters

2 Likes