4.3. Web-to-Lead Form Integration

The Web-to-Lead feature in Nexved CRM allows you to easily create web forms based on lead fields and custom fields that can be embedded on your website or landing page as an iframe. This enables visitors to submit their contact information, upload attachments, and provide additional details directly into your CRM, creating a new lead.

How Web-to-Lead Form Works

The Web-to-Lead form simplifies the process of generating leads directly from your website. When a visitor fills out the form, the information they provide, including their name, email, attachments, and other details, is captured and saved as a new lead in Nexved CRM.

Creating a New Web-to-Lead Form

1. Navigate to Web-to-Lead Settings From the main admin menu, go to Setup -> Leads -> Web to Lead.

2. Create a New Form Click the New Form button on the top-left corner to begin creating a new web-to-lead form.

   Note: You’ll need to configure the initial form settings before building the actual form.

Form Settings

• Form Name: Enter a name for your form. This is for internal reference and will also be displayed on the lead profile when the lead is created.

• Language: Select the language for validation messages (e.g., "Please enter a valid email").

• Submit Button Text: Customize the text on the form's submit button (e.g., "Request a Quote" or "Contact Us").

• Message After Submission: Customize the message displayed to users after they successfully submit the form (e.g., "Thank you for your submission!").

• Allow Duplicate Leads: Decide whether duplicate leads should be inserted into the CRM. If this option is disabled, any duplicate leads will be created as tasks instead of being added directly to the leads database, and a staff member will need to review and take further action.

• Source: Set the default lead source (e.g., "Web Form").

• Status: Set the default status of the lead after it is successfully imported.

• Responsible Staff: Automatically assign the new lead to a specific staff member.

• Notification Settings: Enable notifications for all users based on the notification type. Additionally, the staff member responsible for the lead will receive an email notification if the New Lead Assigned to Staff Member template in Setup -> Email Templates is not disabled.

• Recaptcha: Enable Google Recaptcha to prevent spam. This field will appear only if you have already configured your Recaptcha keys.

Once you've configured the form settings, two new tabs will be available: Form Builder and Integration Code.

Form Builder

After saving the initial settings, you'll be redirected to the Form Builder tab, where you can customize the form fields. Here you will see a list of available fields from the lead profile, including any custom fields you’ve added.

• Drag and Drop: To add a field to the form, simply drag it from the left side and drop it on the right side in the form builder area.

• Custom Fields: If you have custom fields in your lead profile, you can easily include them in your form by dragging and dropping them into place.

• Hyperlink Fields: Note that custom fields of type Hyperlink are not supported in the web-to-lead form.

Once you've added and customized your form fields, click the Save button in the bottom left corner.

Customizing Form Fields

If you need to modify the appearance or functionality of the form fields:

• Edit Fields: Hover over a field in the form area, and you'll see two buttons — Edit and Remove.

• Custom Labels and Placeholders: You can change the labels of form fields, add help text, set placeholders, and make fields required.

After customization, click Save to preserve your changes. Then, go to the Integration Code tab to access the HTML code you need to embed the form into your website.

Integration Code

The Integration Code tab provides the iframe code for embedding the form into your website. Copy the code and place it on your site where you want the form to appear.

You can also adjust the width and height of the iframe directly in the provided code snippet.

Creating Multi-Column Layouts in Web-to-Lead Forms (Available from v1.9.0)

By default, form fields are displayed in a single column. However, you can customize the form layout to display fields in multiple columns. For example, you can create a 2-column layout for the form.

Steps to Create Multi-Column Layouts:

1. In the Form Builder tab, you can add a class form-col-6 to two fields to display them side by side in two columns.

2. To create a 3-column layout, use the class form-col-4 for each field. You can apply this class to up to 12 fields (since 12 columns fit a full row).

Example: To create a two-column layout, apply form-col-6 to two fields:

• Name: form-col-6

• Email: form-col-6

For a three-column layout:

• Name: form-col-4

• Email: form-col-4

• Company: form-col-4

Save the form and preview it to see how it looks in your integration.

Important: The multi-column layout will only be visible when the form is viewed via the integration link or embedded in an iframe.

Considerations

• Required Fields: Always ensure that your form includes required fields. The name field is required by default, and it’s not recommended to make it optional.

• Protocol Compatibility: When embedding the iframe, ensure that the protocol (HTTP or HTTPS) of the CRM installation matches the protocol of the page the form is embedded on:

  • If your CRM uses HTTP, embed the form on a non-SSL (HTTP) page.

  • If your CRM uses HTTPS, embed the form on an SSL (HTTPS) page.