[AppExchange – 123FormBuilder] Prefill dropdown with picklist values

Let’s assume you want to bring all the available values from a specific Salesforce picklist, without manually adding those values in the 123FormBuilder field. The pre-selected value on the form must be the one selected in Salesforce on that specific record.

To walk you through the setup, let’s consider this scenario:

I want to prefill on the form the Lead Source dropdown, but also list all the other available choices from the Salesforce picklist, in case the person filling out the form needs to change the selected option.

  • SF Object → Contact
  • SF Picklist → Lead Source

Let’s get started. Follow this step by step guide:

Step 1. Import picklist values in the Form Editor

In the Form Editor section of the form builder, click on your choice field, and on the right-side panel click on Import From Salesforce.

Next, choose your Salesforce object and picklist field to retrieve their values:

Step 2. Create lookup to return from Salesforce the selected value for a specific record and prefill a text field

First, add a short answer field on the form. You can even set it to be hidden on the form, the prefill will work regardless of whether the field is displayed or not on the form.

Create a new lookup and choose from which object you want the information to be prefilled.

Remember that in this scenario, I want to prefill Lead Source from Contact, so the new Lookup will be on the Contact object and I will return the Lead Source field from Salesforce:

Second lookup

Now, let’s prefill the text field with that value.

Navigate to Form Prefilling, create a new prefill connector, and select the lookup created above. At Form Fields, choose your text field, and at Salesforce Fields choose the value returned from Salesforce.

Second form prefilling

Step 3. Create, upload, and add to the form this custom JS

This is the final step needed to return from Salesforce the selected value for a specific record and prefill a text field.

Copy the following script in a text editor:

{ window.addEventListener('load', function(){ 
loader.engine.on('compute-form-rules-done', function() { 
var value = loader.getDOMAbstractionLayer().getControlValueById('34752448'); // '34752448' id of the control where the selected value is (the hidden input) 
loader.getDOMAbstractionLayer().setControlValueById('34752445', value); //'34752445' id of the picklist values (the dropdown) 

Replace the field IDs that are bold in the script with your own field IDs.

To find your field IDs, right-click on the field, select Inspect Element, and hover the mouse cursor over your entire field. The ID will be listed after data-id. For more information check out this guide.

After you replace the field IDs, save the file with the .js extension and upload the JS script file on a secured hosting service.

Once you have the script URL, go to your form’s Advanced → Form tab section and paste the script under Add a JS script to your form.

If you use dynamic prefill, where the prefill is triggered by user input rather than on form load, then use the following script:

function theMainFunction(){ setTimeout(function() { var value1 = loader.getDOMAbstractionLayer().getControlValueById('2912856'); // '2912856' id of the control where the selected value is (the hidden input) loader.getDOMAbstractionLayer().setControlValueById('2900914', value1); //'2900914' id of the picklist values (the dropdown) var value2 = loader.getDOMAbstractionLayer().getControlValueById('2912858'); // '2912858' id of the control where the selected value is (the hidden input) loader.getDOMAbstractionLayer().setControlValueById('2900915', value2); //'2900915' id of the picklist values (the dropdown) }, 10000); //10000 = 10 seconds } window.onload = theMainFunction;

Replace the field IDs that are bold in the script with your own field IDs.

In the script above, you can adjust the number of seconds for the script to load. For instance, 10,000 milliseconds equals 10 seconds. You can modify this based on the prefill loading time.

Related articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form for more information. in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?