Integration with Salesforce: Create Web-to-Lead Forms

With SurveyJS Form Builder, you can easily create web-to-lead forms to capture essential lead information and submit it directly to your Salesforce CRM for further lead management by your sales team. This example demonstrates how to integrate the Form Builder with Salesforce to set up an effective web-to-lead form. Common Salesforce fields appear in the Form Builder's Toolbox, ready for you to drag and drop them onto the design surface to customize your form. Once completed, open the JSON Editor tab to view the survey JSON schema, which outlines the form's structure and layout. Feed this schema into the SurveyJS Form Library to render your web-to-lead form on a webpage. The code from this example can also be adapted to integrate SurveyJS with other Salesforce web forms or similar CRM platforms, including custom in-house systems.

Form Builder's Toolbox contains questions and panels that users can add to their forms.

1. Load a Salesforce field array from your server.
   Each object in this array should specify a field's name, title, description, and other properties relevant to this field. Open the Code tab and view the salesforce.js file for an example.

2. Construct toolbox items based on this array.
   Toolbox item configuration objects should implement the IQuestionToolboxItem interface. These objects contain information about a toolbox item's name, title, category, tooltip, JSON object associated with the item, etc. Specify the objects' properties using information about Salesforce fields (see the getSalesforceFields(), getQuestionJsonByField(), and getQuestionTypeByField() functions). Make sure to assign a field's name to the valueName property in the json object. valueName specifies a property name that should store the question value. Setting valueName to the name of a Salesforce field ensures correct mapping between that field and the survey question based on it.

3. Add a custom Boolean property that identifies questions mapped to Salesforce fields.
   This property will be used to restrict configuration capabilities for such questions. Use the Serializer.addProperty("question", propMeta) method to add the custom property to all question types. Set this property to true in the JSON objects associated with Salesforce toolbox items.

4. Add Salesforce items to the Toolbox.
   Access the QuestionToolbox instance using Form Builder's toolbox property and call the addItem(item, index) method on this instance. You can also customize toolbox settings to your preferences. For instance, this demo disables the compact toolbox mode, allows multiple toolbox categories to stay expanded, and displays category titles (see the setupToolbox() function).

The JSON objects associated with Salesforce fields include additional configuration properties that users shouldn't change so as not to break the preconfigured functionality. For example, the valueName property ensures correct mapping between Salesforce fields and survey questions. If users change the property's value, the mapping will break. To disable valueName and other predefined properties in the Property Grid, handle the onGetPropertyReadOnly event. Its options.readOnly parameter specifies whether the currently checked property is read-only. Set this parameter to true for the predefined properties. View the code listing for a code example.

The content and layout of a web-to-lead form is described in a survey JSON schema. Form Builder users can view, edit, and copy it in the JSON Editor tab. To render the form on your web page, feed the JSON schema into SurveyJS Form Library.

• Get Started with Form Library in Angular
• Get Started with Form Library in Vue
• Get Started with Form Library in React
• Get Started with Form Library in HTML/CSS/JavaScript

Once potential clients fill out your web-to-lead form and click Complete, a data object with lead information should be sent to your Salesforce. Handle the onComplete event in SurveyJS Form Library to modify the data object if required and send it to your server. This example shows how to identify Salesforce field values and create an individual object for them. To demo this functionality, open the Preview tab and fill out your form. You will see the resulting data object in the browser's console.