Introduction

 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. 

Feature Availability

Note: Webforms to create Contacts, Cases, and Organizations are also available in Help Desk Starter and Help Desk Professional editions.

Key Terminology

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.

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

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. 

6. Click +Add Webform. The Adding New window opens.

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

8. 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.

9. 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.

10.  Enter the label for uploading documents in the web form under the Uploading Documents section.
11. 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. 

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.

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.

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. 

4. 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.

5. 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.

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. 

6. Hover on the webform whose code you want to copy.

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

8.  Click Copy to clipboard.

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

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:

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.

2. ​​​Click Add-ons.

 

2. Search for OPT in Vtiger Webforms.
3. 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.​