Home  >   Articles   >  Adding Hidden Fields to a Webform
Articles in this section

Adding Hidden Fields to a Webform

Learn how you can use your web form across multiple channels by setting up additional hidden fields.
R
Ruba
1 Apr, 2024 - Updated 22 days ago
Table of Contents

Introduction

Hidden Fields are added to a Webform to capture information when the Webform is used across multiple channels.

Let’s understand this better with the help of an example.

Assume you share a sign-up web form link with your leads through multiple channels, such as email campaigns and Facebook lead ads.

When a lead signs up through the web form, you want to know whether they came from email campaigns or Facebook ads. To get accurate information on the source of lead information, you can use Hidden Fields.  

Hidden Field values are dynamic. You can map a Hidden Field to a URL parameter to capture different values. You can also set up override values that will be used when the parameter value is empty.

Note: If you are learning about Vtiger webforms for the first time, make sure you read this article first.

 

Configuring Hidden Fields

In Webforms, you can specify the parameters in the URL that must capture the information you need and store it in the related CRM fields.

Using the Hidden Fields block on the Webforms Settings page, you can: 

  • Add a field where the information must be stored
  • Specify the URL parameter that will capture the information
  • Mention the override value for each field in case the URL parameter returns an empty value

Follow these steps to add hidden fields to a Webform:

  1. Log in to your CRM account.
  2. Click the User Menu on the top right corner of the CRM screen.
  3. Select Settings.
  4. Go to the Automation section.
  5. Select Webforms.
  6. Click +Add Webform.
  7. Fill out all the mandatory information.
  8. Go to the Hidden Fields block.
  9. Click inside the Click to select fields space.
  10. Enter the Fields.
  11. Specify the URL Parameter for the field. This parameter will appear in the URL of the web pages.
    • For example, source. So, the Lead Source field is mapped to the URL parameter source. 
  12. Enter an Override Value
    • Override values are considered if URL parameters have no value. In the example, if the source has no value, then the override value you specify is used.
  13. Click Save.
 

Note

  • You can add as many hidden fields as you like.
  • In the case of picklist fields, if the URL parameter values are not a part of the picklist, then the override value is used. 

How Hidden Fields Work

Let’s consider the same example as mentioned earlier. 

Assume you receive 30 new leads after your webform goes Live 15 of them signed up through the email campaign you sent, and the other fifteen came in through Facebook Lead ads. Thus, there are two sources for your Leads - your Email Campaign and Facebook.

Every time a lead opens your campaign, the URL parameter source is assigned the value email campaign in the backend in the first case. Similarly, source=facebook in the second case.

So you get clarity on which channels are generating the most Leads.

We’re not done yet…

What if you want your leads to traverse multiple web pages before landing on the sign-up section of the Webform? You can still find the source of the Lead.

To handle such scenarios, you must embed the Hidden Field script, which is available in Vtiger CRM,  into your website code. 

Follow these steps to copy the script and embed it into your website code:

  1. Log in to your CRM account.
  2. Click the User Menu on the top right corner of the CRM screen.
  3. Select Settings.
  4. Go to the Automation section.
  5. Click Webforms. 
  6. Click a web form where hidden fields are already set up.
  7. Scroll down to the Hidden Fields block.
  8. Click the View Code button shown on the right. 
  9. Click Copy to clipboard. The script gets copied.
  10. Paste it into a text editor file and save it with the .js extension.
  11. Copy the file to all your website pages.

The script reads the URL parameters on every page load and stores them in your local storage (in any browser).

When the Lead finally lands on the sign-up section of the web form and submits it, the URL parameter value is stored in the CRM field.

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

The Urchin Tracking Module, or UTM, is a simple code attached to a URL that tracks the progress of your campaigns. UTM Parameters are the individual bits of text within that code. 

Each UTM parameter identifies a different aspect of the marketing campaign associated with the UTM-coded link. 

UTM Parameters:

  • Help you track and measure the performance of your digital marketing campaigns. 
  • Send data about your campaigns to Google Analytics. 
  • Automatically collects sent by Google Analytics for deeper analysis.​​​​​​

When a UTM-coded link is clicked, they send data about the campaign to Google Analytics, and the UTM automatically collects data for deeper analysis.

Using UTM Parameters

You can use the UTM parameters in the Email Marketing Campaign by adding them to your sales emails, automated emails, newsletters, etc. 

UTM Parameters have one Core function - to identify the campaign that shows the traffic to your site.

For example, you can use  utm_source=weekly_sale to track your weekly sales email.


 

Creating UTM coded-URLs

Google's Campaign URL Builder is a tool for creating 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, providing detailed insights into the effectiveness of various marketing initiatives.

You can create UTM-coded URLs using Google’s free tool - Campaign URL Builder.

Note: You cannot create UTM codes in Google Analytics (GA).
 

Follow these steps to create UTM-coded URLs:

  1. Login to the 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.
  6. Click the copy URL option on the right side of the URL.

You can now use this URL in the promotional email.

Limitations

Hidden Fields

  • Email and SMS opt-in fields from Leads and Contacts modules cannot be used as hidden fields. 
  • Owner, Owner Group, and Co-owner fields cannot be used as hidden fields.
  • Boolean fields or fields such as checkboxes and radio buttons should have the incoming values On or Off in the URL, translating to a Yes or a No.
  • A field can be either under Webform Fields or in Hidden Fields, not both.

Picklist Fields

  •  If you add a picklist field as a hidden field and the URL parameter has a value that is not present in the picklist, the hidden field will remain empty if no override value is specified.
  • For example, consider that Lead Source is the hidden field and the URL parameter source=Campaign. If Campaign is not in the Lead Source picklist, then the Lead Source field in the lead record remains empty if no override value is specified.  

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