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

Pro Tips Elfsight Widgets Tips
, , ,
1

Want to dynamically fill in your form fields? 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

image
image372×626 13 KB


Choose the needed Field Types and set them up

image
image341×791 8.81 KB


Creating a field value

To dynamically 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:

image
image396×722 12.6 KB

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

image
image396×652 12.9 KB


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

image
image396×684 13 KB


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.


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

P.S 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

1 Like