Home  >   Articles   >  Webforms in Vtiger CRM
Articles in this section

Webforms in Vtiger CRM

Learn to set up webforms to capture and store information seamlessly!
R
Ruba
3 Oct, 2024 - Updated 4 days ago
Table of Contents

Feature Availability
 

Feature Availability

One Pilot One Growth One Professional One Enterprise One AI
Feature Availability
Webforms
Webforms to Create Records
Leads
Contacts
Organizations - -
Deals - -
Cases
Vendors - -

Introduction

Did you know your CRM can automatically store information captured on your website? For example, data on potential leads, customer issues, etc.

This is possible with the help of Vtiger’s Webforms. 

Embed the webform code into your website code to capture and store information seamlessly!

 

 A webform is an interactive HTML form on your website that captures information. The data users fill out in the web form is stored in the CRM. 

Now, Vtiger webforms are primarily used to capture and store information about leads. However, you can also use them to add contact, organization, deal, case, and vendor records in the CRM.

For instance, you can have a web form where your contacts can report the issues they face with your product or service. In this case, a contact and case records are created in the CRM.

Working of Webforms  

Consider this example to understand how web forms work. You run an e-commerce business that sells a variety of products. A customer, John D, purchased a pair of headphones from your website. They find the product damaged when it arrives. When they want to report this issue, they go to the My Orders page and open the webform below.
 
 

When John submits the webform, a case record gets created in the CRM. The record contains all the details they submitted. 
You can refer to the record and decide the next step to resolve the customer’s issue. Now that you know how a web form works, let us learn how to create one.
 

Key Terminology

 

Field Name

Description

Webform Name

Webform name for your reference

Primary Module

Module in which a record must be created. The available modules are Leads, Contacts, Organizations, Deals, Cases, and Vendors

Return URL

URL to which users must be redirected after successfully submitting the webform

Secondary Modules

Modules related to the primary module, in which a record must be created

Assigned To

User or a group to whom records created from the webform must be assigned.

Note: Records are assigned to this user only when Round Robin Assignment is disabled.

Campaigns List

Available only if the Primary Module is Leads or Contacts. Leads and contacts added through a webform are linked to the campaign(s) selected in the Campaigns List.

Status

Webform is active if the status checkbox is enabled; otherwise, it is inactive

Captcha Enabled

Enabling a captcha prevents bots from generating unnecessary leads through your web form due to automated scripts

Description

Webform description for your reference

Public ID

Helps in integrating your existing web forms with Vtiger. It is available in Webforms’ List View

Creating a Webform

To create a webform, you must specify the following mandatory information:

  • Status of the webform - Active or Inactive
  • What records must be created from the web form
  • Whom the records must be assigned to
  • What fields must the users fill out in the web form
  Follow these steps to create a web form:
  1. Log in to your CRM account.
 
  1.  Click the User Menu on the top right corner of the screen.
  2. Click the Settings button. 
 
  1.  Look for the Automation section.
  2. Select Webforms. 
  1. Click +Add Webform. The Adding New window opens.

  1. Enter or select information such as webform name, status, etc. Refer to this section for the details.

  1. Specify the user assignment pattern under the User Assignment section.
    Note: User assignment is not mandatory. You must specify it only if you want records to be assigned in the round-robin fashion. When user assignment is not specified, records are assigned to the user specified in the Assigned To field.

  2. Select the fields that must be shown in the webform in the Field Information section.
    The fields will vary depending on the Primary and Secondary modules you choose.

  1.  Enter the label for uploading documents in the web form under the Uploading Documents section.
  2. Click Save. 

User Assignment

The User Assignment section allows you to assign the records created from the webform to users in the CRM using the Round Robin method. 

How Round Robin assignment works

You must first select multiple users. The records then get assigned to users in the order that you have listed them. 

Consider specifying users in this order - Samuel Johnson, John Doe, and Rahul Kapoor. Now, the first webform submission creates a record and assigns it to Samuel Johnson, the second to John Doe, and the third to Rahul Kapoor. The fourth record is assigned to Samuel Johnson, and the cycle repeats.

  Follow these steps to enable Round Robin assignment:
 
 
  1.  Enable the Assign Users in the Round Robin checkbox.
  2. Click on the space provided in the Round Robin Users List.
  3. Select users or groups from the drop-down to assign records.

Note: When you specify a user in the Assigned To field and in the Round Robin assignment, Round Robin is given priority. 

Field information

This is the block where you specify the fields that must be shown in the web form.

Follow these steps to add fields:

 
  1.  Click on the space provided in Add Fields.
  2. Select a field from the drop-down.
    1. Tip: You can change the order of the fields with a drag-and-drop action.
    2. The fields you add are listed.
  3. Mark the field as mandatory by enabling the checkbox under the Mandatory column.
  4. Mandatory fields are automatically added to a web form and cannot be removed. Users cannot skip them while filling out the web form. 
 
  1. Hide a field by enabling the checkbox and providing an Override Value. 

    1. Consider that you have a web form for submitting customer issues or cases. The Status field in Cases is mandatory. However, webform users would not be aware of the value to be set on the field because it is CRM-specific information. So, you can provide an override value to the field and hide it. Such fields can be used to fill out information that is helpful to your team internally but not relevant to the customers. 

    2. Fields are automatically hidden when you provide an override value for them.

  2. Choose what to do with duplicate field values in the Duplicate Handling column. ​​​​​
    1. With Duplicate Handling, you can decide what must be done with duplicate record submissions from the web form. Vtiger provides you with the following three options to handle duplicate records:​​​​​​
      1. Keep existing value: Retains the existing values in the CRM. If no value exists in a field, then the submitted value is considered.
      2. Use non-blank submitted value: Replace the CRM value with the submitted value.
      3. Append to existing data: Appends the submitted value to the value existing in the CRM. In this case, you must configure a Concatenation Separator to tell the submitted value apart from the CRM value. You can set it up under Settings > Configuration > Configuration Editor.

 

Note:

  • You can also add Additional Hidden Fields to a web form to use it across multiple channels. To learn more about it, click here.
  • Duplicate Handling will function only if Duplicate Prevention is set up for the module(s) specified in the web form. To learn more about Duplicate Prevention, click here.  
 

Uploading documents

You can provide a field to give webform users an option to upload documents and files from the web form. 

Follow these steps to provide an option to upload documents:
 

 
  1.  Click the +File Upload Field button.

  2. Provide a name to the field under Document Title.

  3. Mark the field as Mandatory by enabling the Mandatory checkbox. 

    • This is an optional step.

Tip: You can click the Delete icon to remove the field.  ​​​​​​

Displaying a Webform

 After you create a web form, you must know how to display it.

Displaying a webform is as easy as copying its code from the CRM and pasting it into your website's source code. Once you create a web form, Vtiger CRM provides ready-to-use HTML code! 

Click. Copy. Embed. Doesn’t that sound simple?

Follow these steps to get the webform code:

  1. Log in to your CRM account.
  2. Click the User Menu on the top right corner of the screen.
  3. Click the Settings button.
  4. Look for the Automation section.
  5. Select Webforms. 
  1. Hover on the webform whose code you want to copy.

  2. Click the Get form code icon on the top right corner of the page.

  1.  Click Copy to clipboard.

The web form code gets copied. You can paste it into your website’s source code.

Handy Hint: To test a web form, copy its code from the CRM and paste it into a text editor such as Notepad++. Save the file in .html format. Open the HTML file to check how the webform appears. The HTML file opens in your web browser. 

Obtaining Consent through Webforms

You can obtain consent from your leads and contacts to send them marketing emails through web forms. When you add the Primary Email field to a web form, the Email Opt-in field is automatically added. 

 
 

In the example above, the Email Opt-in field is added when adding the Primary Email of Contacts to the webform. This is because you need a contact’s consent to send them marketing emails after obtaining their email address. 

To learn more about email opt-in and marketing emails, click here.
 

Points to remember

  • When you create web forms for non-person modules such as Cases, etc., the related Email Opt-in field gets added automatically, including the primary email address of Contacts/Organization.
  • When a customer submits a webform and does not enable the Email Opt-in checkbox, the CRM's opt-in value is set to ‘None’.
  • Vtiger retains the existing value of the Email Opt-in field when an existing contact submits a webform without checking the email Opt-in checkbox. Below are different scenarios in which the Email Opt-in field gets updated:
 

When the existing Email Opt-in value is

What happens when a web form is submitted

Single Opt-in(User), Single Opt-in(Webform), or None

CRM retains the existing value when a webform is submitted with the Email Opt-in checkbox left unchecked.

Single Opt-in(User), Single Opt-in(Webform), or None

CRM updates the existing value with Single Opt-in (Webform) when a webform is submitted with the Email Opt-in checkbox checked.

Double Opt-in

CRM retains the existing value when a webform is submitted with the Email Opt-in checkbox checked or unchecked.

 

Note: Related records created via web forms are linked to existing records in the CRM. For example, when an existing contact creates a case through a web form, the case gets linked to the CRM's contact record.

Integrating Existing Webforms

You might already have web forms on your website for different purposes. You can integrate them with Vtiger with the help of Public ID and Post URL. They are automatically generated when you create a webform in Vtiger and can be found when you open a webform in the CRM.

  • Public ID: The value of this field establishes a connection between the existing form and the Vtiger web form.
  • Post URL: This field’s value specifies the module location where information must be submitted.
 

Modifying field names in existing web forms

The field names must be changed according to the webform reference field names, which are shown in the Field Information block in a CRM webform. For instance, the reference field name for First Name is firstname. 

OTP in Vtiger Webforms

This add-on helps reduce spam coming through your web forms and ensures that the email address and phone number submitted in the form are accurate.

Before a visitor submits the form, the OTP will be sent to the email address or phone number (or both if you choose to). The visitor has to enter the received OTP to submit the form.

Follow these steps to Install OTP in Vtiger Webforms:

  1. Log in to the CRM.
  1. ​​​Click Add-ons.
 
  1. Search for OPT in Vtiger Webforms.
  2. Click Install.

A message OTP in Vtiger Webforms is successfully installed will be displayed.
 

Blacklisting Spam IDs for Webforms

You can blacklist or block Spam IDs for your Webforms by creating a Blocked IPs page. This will help reduce the spam in Webforms.

The CRM will create a Webform record only if it is submitted with a Captcha or Honeybot security option. All other requests will be moved to the Blocked IP list. The CRM emails the Admin, mentioning that an IP was added to the blocked IPs list.
Upon review, admins can unblock or block an IP
. For blocked IPs, even valid webform requests will not be accepted at a future date.

You can add the Blocked IPs page in Settings > Configuration > Blocked IPs. This page will display the following columns:

  • Blocked IP Address
  • Records Created
  • Blocked Webform Requests and
  • Action

What do the values in the columns display:

  • Clicking the Records Created count will display the record ID, record name, module name, and created time.
  • Clicking the Blocked Webform Requests will display a table with the number of blocked requests, the web form name, and the Export button.
  • Clicking the Block or Unblock button in the Action column will allow you to block or unblock an IP address. Clicking the Export option will export the details of the blocked IP address to a CSV file. 

URL Parameters

  • A URL parameter can only have English letters, numbers, and underscore.
  • Parameter names given in Hidden Fields must be different from one another.

UTM Parameters for Google Analytics

Want to measure the effectiveness of your campaigns through Google Analytics? Use URLs with UTM Paraments.

The Urchin Tracking Module, or UTM, is a simple code attached to a URL that tracks the progress of your campaigns. UTM parameters are integral to UTM. If you assign a UTM-coded URL to a marketing campaign, UTM parameters identify different aspects of the campaign like the source of clicks. 

UTM Parameters and Google Analytics

UTM Parameters are specific to Google Analytics.
You can use Google's Campaign URL Builder tool to generate custom URLs with UTM Parameters. When you assign URLs with UTM parameters to a marketing campaign - via the website, emails, newsletters, etc., Google Analytics will track the following: 
  • Where clicks came from
  • What campaigns directed the clicks to your website
Note: Google Analytics tracks a campaign through the following - source, medium, and campaign name. 

Use Case

You launch a campaign through your newsletter with a link to an offer. The newsletter is sent via email and is also available on your website. When readers or website visitors click the UTM-coded link, UTM Parameters track and measure the performance of your digital marketing campaigns by:
  • Identifying the source of clicks (email or website).
  • Sending data about your campaigns to Google Analytics. 
  • Automatically collecting data sent by Google Analytics for deeper analysis.​​​​​​
Here is an example you can use:  utm_source=weekly_sale to track your weekly sales email.
 

Benefit

By creating unique URLs (using UTM codes) for each campaign, you can use Google Analytics:
  • Track how each campaign drives traffic and conversions to your website. 
  • Compare different campaigns and see which ones are most effective.
  • Measure the performance of your digital campaigns. 
  • Derive detailed insights into the effectiveness of various marketing initiatives.
 

Creating UTM coded-URLs

Google's Campaign URL Builder tool allows you to create UTM-coded URLs to track marketing campaigns. It enables you to generate customized URLs with UTM parameters that can be easily tracked in Google Analytics. It provides detailed insights into the effectiveness of various marketing initiatives.
Note: You cannot create UTM codes directly in Google Analytics (GA).
Follow these steps to create UTM-coded URLs:
  1. Log in to Campaign URL Builder.
  2. Go to Demos and Tools.
  3. Toggle the UA to GA4.
  4. Go to the Web tab.
  5. Enter or select the following: 
    1. Enter the Website URL.
    2. Enter the Campaign Source.
    3. Enter the Campaign medium.
    4. Enter the Campaign Name. The URL builder tool automatically generates the UTM-coded link as you fill out the fields.
    5. Click the copy URL option on the right side of the URL.
    6. Paste the URL to a notepad or document.

You can now use this URL in your campaigns as promotional emails, website links, etc.

 

Integrating WordPress Forms

This feature enables you to integrate WordPress forms with Vtiger to get leads right away into your Vtiger CRM account.

Step 1: Mapping the fields

The process of mapping fields is made simple and straightforward. You’ll need to map fields according to web forms reference fields as shown in the picture below.

Follow these steps to map fields:

  1. Install cforms in your WordPress account.
  2. Create a form.
  3. Add fields and set them according to Vtiger CRM Webform Reference Fields.
  4. Include Public ID along with the fields.

For instance, if you have fields like First Name, Mobile, Last Name, Organization, and Email in your WordPress form, the Webforms reference fields will be first name, phone, last name, company, and email respectively.

Step 2: Provide Post URL

  1. Under the Core Form Admin / Email Options, enable the following checkboxes.
  2. Use custom input field NAMES and IDs.
  3. Send form data to an alternative page and paste your Post URL in the text field provided.
  4. Click Save and Update form Settings.
    1. Note -  Public Id and Post URL will be found in the detail view of your web form record in Vtiger CRM.

Note:

  • Public ID should be hidden while creating a cform.
  • The Webform reference field should be copied from the Vtiger Webform to cforms.
  • The Webform reference field for the Public ID field should be publicid.
  • The general syntax during the field mapping is - 
    • Your_Desired_Field_Name[id:paste your webforms reference field name]

How it works

After the setup, you have to create a post to see the WordPress webform. You can embed the web form in your website and capture the Leads into Vtiger CRM, automatically.

  1. Click Posts > Add New. (This can be found on your WordPress sidebar)
  2. Click the cforms Icon.
  3. Select your form and click insert.
  4. Click on Publish.

Clicking on View Post will display your form. Your website visitors are no strangers anymore. They will be your Lead records instead.

Was this article helpful?
6  out of  8  found this helpful.
Comments 0
Be the first to comment
© Copyright 2023 Vtiger. All rights reserved.