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

Are you looking for a functionality where your form fields will be pre-filled dynamically? If so, you'll be thrilled to hear that our Form Builder, Contact Form, and Subscription Form widgets can do that. This article will help you understand how to use this feature and what can be achieved with its help.

How you can benefit from this feature

The main advantage of the following functionality is the ability to pass any value to your form widget. By doing so, you can make form fields pre-populated based on certain conditions or after users perform specific actions on the page, resulting in a quicker and simpler form completion process for your clients. To achieve the desired result, you'll need to assign a specific value to each field you wish to pre-fill using the Custom JS option available within our Forms widgets:

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

Following that, 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 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: 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.

The below examples illustrate how you can use our API method for each field type that can be pre-filled.

1

Short Text
In the example below, we've changed the field's label to “First Name”. Consequently, the field ID has changed to [first-name]: All you need to do now is assign a specific value to this field using the code we provided above and add it to the Custom JS tab. In our example, this field will be pre-filled with the name “Alex”:

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

2

Long Text
The following example illustrates that our Long Text field labeled “Message” will have the following message pre-filled: In this case, the field ID and field value has been set as follows:

widget.setFieldValue('[message]', 'I would like to add that...');
	

3

Email
Would you prefer the email field to be automatically pre-filled with a specific email address? Here's an example illustrating how this can be achieved:

widget.setFieldValue('[email]', '[email protected]');
	

4

Website
The following example demonstrates how the “Website” field will be pre-filled with “elfsight.com”. Below is the code we've used to achieve this:

widget.setFieldValue('[website]', 'elfsight.com');
	

5

Phone
In the example below, as soon as a user begins filling out the form, the field for entering a mobile number will automatically populate with the following digits:

For that, the field ID and field value has been set as follows:

widget.setFieldValue('[phone-number]', '+1 (595) 485 6790');
	

6

Number
Do you need the “Number” field to have a certain number right from the start? Add a pre-filled number based on this example:

widget.setFieldValue('[number-of-guests]', '6');
	

7

Date
To have a certain date chosen right from the start, use either a Date Object or a number string in the format specified in the Date field settings. For example:

widget.setFieldValue('[date-of-birth]', new Date('December 17, 1995'));
	

or

widget.setFieldValue('[date-of-birth]', '12/17/1995');
	

8

Time
To have certain time pre-filled, add your field value in the following time format - H:MM (for 12-hour format) or HH:MM (for 24-hour format):

widget.setFieldValue('[time]', '3:00 PM');
	

or

widget.setFieldValue('[time]', '17:00');
	

9

Hidden
The information in Hidden fields is only visible to the widget owner when they receive a submission. Therefore, your website visitors can't interact with such a field at all. For more information on how to use this field, please refer to the following article - Tips on using Hidden field.

In case you would like this field to be pre-filled too, you can set it up using the following example:

widget.setFieldValue('[hidden]', 'YOUR TEXT OR NUMBER');
	

10

Choice

Do you have several choice options and would like to have one pre-selected? Take a look at the below example to see how you can make this happen:

widget.setFieldValue('[cat-breed]', 'Siamese cat');
	

Would you like to have two options preselected? You can achieve this by using additional square brackets, as illustrated below:

widget.setFieldValue('[cat-breed]', ['Siamese cat', 'Sphynx cat']);
	

11

Image Choice

Would you like to have one image pre-selected? Explore the example below to learn how you can achieve this:

widget.setFieldValue('[age]', 'senior');
	

12

Dropdown
Assign a value representing one of the available options within the dropdown. In the following example, we have made the “Scared” option pre-selected by adding the following to Custom JS:

widget.setFieldValue('[cat-behavior]', 'scared');
	

13

Consent
The example below demonstrates that consent will be pre-given. We simply used the ID of the consent field and implement it as follows:

widget.setFieldValue('[lgwd641u]', 'yes');
	

14

Star Scale
Would you like to request a review? The good news is you can also have this field pre-populated, as shown below:

widget.setFieldValue('[please-rate-us:]', '4');
	

15

Number Scale
Functions similarly to the example above. In this instance, you'll only have a pre-selected number instead of stars:

widget.setFieldValue('[rate-your-experience-from-1-to-10:]', '7');
	

16

Thumb Scale
Select which button you'd like to be pre-selected by adding “like” or “dislike” as a field value:

widget.setFieldValue('[do-you-like-our-product?]', 'like');
	

17

Smiley Scale
Choose what emoji you would like to have pre-selected. Use “awful”, “poor”, “ok”, “good” or “awesome” as a field value:

widget.setFieldValue('[did-you-like-the-support-you-received?]', 'awesome');
	

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 find writing the necessary script challenging, don't worry. Simply contact our Support Team, and our developers will be happy to assist you in achieving your desired setup.