[AppExchange – 123FormBuilder] Prefill dropdown with picklist values

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

This setup is useful especially if the values in the Salesforce picklist will change often or if you have a large list of values and find it difficult to manually add them as choices on the form.

In order 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. Create Lookup in the Picklist object and prefill form dropdown with Salesforce values

In the Form Editor section of the form builder, go to the Salesforce integration and select the Lookup tab.

Start by creating a new lookup, name it (we called it lookup1), and select the object to be Picklist Value Info.

Create Lookup

Next, click on Add new filter where: the Salesforce Field is Entity Particle ID, operation Equals and the Form field is Custom Value with the value as the ‘FieldDefinitionId’.

In Salesforce field to return select the Value field.

Picklist value info

In case you don’t know what the FieldDefinitionId for your field in question is, you will first need to:

Salesforce SOQL query
  • Select your Object
  • Copy the following query:
SELECT EntityDefinitionId, QualifiedAPIName, FieldDefinitionId FROM EntityParticle WHERE EntityDefinition.QualifiedApiName ='Customer'
  • Replace OBJECT_API_NAME with your object EX: ‘Contact’, ‘PickList__c’
  • Run the Query and get the ‘FieldDefinitionId’ from the query results. In our case, it will be Contact.LeadSource.
Query results

Now that we have returned the values from Salesforce, we need to set the Form Prefilling part.

Switch to the Form Preffiling tab, click on Add prefill connector, and select the lookup that we just built.

For the Form field, select the dropdown that you want to populate (in our scenario – Lead Source), and in the Salesforce field select Value.

Form prefilling

Stop here if you just need to bring on the form the picklist values available in Salesforce.
Continue if you also want to have the dropdown prefilled with the value selected in Salesforce.


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

First, add a short text field on the form. You can even set it to be hidden on the form, the prefill will work regardless of 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:

(function()
{ 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 replaced 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.

That’s it!


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?