Feature Availability 

Vtiger Editions: One Pilot | One Growth | One Professional | One Enterprise | One AI

Introduction

Integrating Vtiger webforms with WordPress helps you engage and gather actionable information from website visitors. They are commonly used on websites for:

• Lead generation: Collecting details from potential customers.
• Customer inquiries: Allowing customers to submit inquiries or report issues.
• Feedback and surveys: Gathering customer feedback.
• Contact forms: Capturing general inquiries or contact details.

To integrate Vtiger CRM webforms with your WordPress site, you need:

1. A Vtiger CRM account to create and manage webforms.
2. A WordPress account to embed the webform into your website.

Simply create or access an existing webform in Vtiger, copy its HTML code, and embed it into your WordPress website. This setup allows you to streamline lead and customer data collection directly from your site into Vtiger. To learn more about webforms in Vtiger, click here. 

Benefits of Integrating Vtiger Webforms with WordPress

Here are the benefits of integrating webforms with WordPress: 

• Collect lead information directly from your site without external redirects.
• Automatically store customer information in your Vtiger CRM account, thus reducing manual entry.
• Allow visitors to submit information directly on your site, increasing user engagement.

In this article, you will learn about:

• Integrating Vtiger Webforms with WordPress.

Key Terminology

Integrating Vtiger Webforms into WordPress 

• Step 1: Access a webform in your Vtiger CRM Account.
  • Note: You can use an existing Webform or create a new one.
• Step 2: Add the Vtiger Webform to your WordPress.

Step 1: Accessing a Webform in Vtiger CRM

Follow these steps to access a Webform in Vtiger:

1. Log in to the CRM.
2. Click the User Menu on the top right corner of the screen.
3. Go to Settings > Automation > Webforms. The Webforms page opens.

4. Select and open an existing Webform or create a new one by clicking +Add Webform. You will learn how to create a new Webform later in the article.
5. Copy the HTML code in either one of the following ways:

1. Click on the Get form code icon by hovering over the Webform. A page with HTML code opens.

2. Open the respective Webform and click on the Get form code icon. A page with HTML code opens.

6. Click Copy to clipboard.

Step 2: Adding a Webform to WordPress

Follow these steps to add a Webform to WordPress:

1. Log in to your WordPress Account.

2. Click on Posts or Pages in the Dashboard, depending on where you want to embed the form. To help you understand, we will add a Webform to a new post here.

3. Click the + icon.

4. Search for the Custom HTML block and add it.
5. Paste the HTML code you copied from Vtiger’s webform.

6. Click the Preview button to see how the form or code will appear and function on your website.
7. Click Publish.

Your web forms will now be available on your website. If website visitors fill out the form, the information will be directly stored in the respective module in your Vtiger account. For example, suppose you select Contact as the module when creating the Vtiger Webform. In that case, any data submitted through the form will automatically be saved in the Contact module of your CRM.

Creating a Webform

Follow these steps to create a Webform:

1. Log in to your CRM account.
2. Click the User Menu on the top right corner of the CRM screen.
3. Go To Settings > Automation > Webforms. The Webforms page opens.

4. Click +Add Webform. The Adding new page opens.
5. Enter or select the following information to create a Webform:
   1. Webform Information - Specify the essential details such as webform name, status, and other relevant information.
   2. User Assignment - Define the user assignment pattern for this section.
   3. Webform Field - Select the fields that should be displayed on the web form.
   4. Additional Hidden Field - Pre-fill fields with provided values that will not be visible on the web form.
   5. Upload Documents - Add a field to allow users to upload documents and files directly through the web form.
6. Click Save.

Troubleshooting tips

• Form Not Displaying: Ensure the HTML code is copied correctly into the Custom HTML block and check for theme conflicts.
• Data Not Captured: Verify the correct module was selected when creating the Webform in Vtiger.
• Submission Errors: Check for any security plugins or CAPTCHAs that might be blocking form submissions.
• Layout Issues: Adjust CSS or use the Preview function to ensure the form displays correctly on different devices.
• Changes Not Updating: Clear both your WordPress and browser cache after making changes to the Webform.

References 

Webform