Introduction

 A webform is an interactive HTML form on your website that is used to capture information. The data that users fill out in the webform 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

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,  purchases 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 webform works, let us learn about creating a webform.

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 webform
• Whom the records must be assigned to
• What fields must the users fill out in the webform

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

1.  Enable the Assign Users in the Round Robin checkbox.
2. Click on the space provided in 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 webform.

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 webform and cannot be removed. Users cannot skip them while filling out the webform. 

4. Hide a field by enabling the checkbox and providing an Override Value for it. 

   1. Consider that you have a webform 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.

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 webform. 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: Replaces 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.

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. 

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 webform 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 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:

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.

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.