Home  >   Articles   >  Setting up & Automating Webforms
Articles in this section

Setting up & Automating Webforms

Learn to embed the webform code into your website code to capture and store information seamlessly!
R
Ruba
12 Dec, 2023 - Updated 2 months ago
Table of Contents

Introduction

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

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

Simply 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 is used to capture information. The data that users fill out in the web form gets 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 webform where your contacts can report the issues they face with your product or service. In this case, a contact record and a case record are created in the CRM. 

Feature Availability

Sales Starter

Sales Professional

Sales Enterprise

All-in-One Professional

All-in-One Enterprise

Feature Availability

Webforms

Webforms to Create Records

Leads

Contacts

Organizations

Deals

Cases

-

-

-

Vendors

-

 

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

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

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 submitted by them. 

You can refer to the record and decide the next step to be taken to resolve the customer’s issue. Now that you have an idea of how a web form works, let us learn about creating a web form.


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 that you specify 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 as well as in the Round Robin assignment, the priority is given to Round Robin. 

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 for it. 

    1. Consider that you have a web form for the submission of 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 the information that is helpful to your team internally, and 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 value in 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

To give webform users an option to upload documents and files from the webform, you can provide a field. 

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 webform, 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. To top it all, once you create, Vtiger CRM provides ready-to-use HTML code for webforms! 

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 webform code gets copied. You can paste it into your website’s source code.

Handy Hint: To test a webform, copy its code from the CRM and paste it into a text editor such as Notepad++, etc. 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 webforms. When you add the Primary Email field to a webform, the Email Opt-in field gets added automatically. 

 
 

In the example above, on adding the Primary Email of Contacts to the webform, the Email Opt-in field is added. 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 webforms 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 webform 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 webforms are linked to existing records in the CRM. For example, when an existing contact creates a case through a webform, the case gets linked to the CRM's contact record.


Integrating Existing Webforms

You might already have webforms 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. You can find them when you open a webform in the CRM.

  • Public ID: This field's value is used to establish a connection between the existing form and the Vtiger webform.
  • Post URL: This field’s value specifies the location of the module where information must be submitted.
 

Modifying field names in existing webforms

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

Phone Calls

Country code drop-down is now shown in Webforms.                                                      

  1. Go to Settings - Webforms                                                                                                           
  2. In the Webform page for phone fields country dropdown will be shown.
    1. On submit, the phone field should have a proper country in the record created in CRM
    2. This should be verified in the webform page, generated from webform contents in List and Detail
    3. This should be tested with
      1. With phone fields
      2. Single and Multiple phone fields
      3. No phone fields
      4. Phone fields with override value
      5. With hidden fields
      6. With captcha
  3. Impact : Webform generate and submit
Note: This is only handled on the webform page and not in settings.

OTP in Vtiger Webforms

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

Before a visitor submits the form, it will send the OTP 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.

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