1. Capture the Customer Source with Hidden UTM Parameters
If you’re running marketing campaigns, you need to know where your leads are coming from. One of the easiest ways to do this is by adding hidden UTM fields to your forms. This allows you to track the source, campaign, and other details of the visitor who filled out the form.
Here’s a simple JavaScript snippet to capture UTM parameters:
<script>
(function() {
'use strict';
// **Configuration**
const COOKIE_EXPIRATION_DAYS = 365;
const COOKIE_ATTRIBUTES = {
path: '/',
sameSite: 'Lax',
// Uncomment the next line if your site uses HTTPS
// secure: true,
};
// **Utility Functions**
function setCookie(name, value, days, attributes = {}) {
try {
const date = new Date();
date.setTime(date.getTime() + (days * 864e5)); // Days to milliseconds
let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${date.toUTCString()};`;
// Append attributes
for (const [attrName, attrValue] of Object.entries(attributes)) {
cookieString += attrValue === true ? ` ${attrName};` : ` ${attrName}=${attrValue};`;
}
document.cookie = cookieString;
} catch (error) {
console.error('Error setting cookie:', error);
}
}
function getCookie(name) {
try {
const cookies = document.cookie ? document.cookie.split('; ') : [];
const prefix = encodeURIComponent(name) + '=';
for (let cookie of cookies) {
if (cookie.startsWith(prefix)) {
return decodeURIComponent(cookie.slice(prefix.length));
}
}
return null;
} catch (error) {
console.error('Error getting cookie:', error);
return null;
}
}
// Expose getCookie to the global scope
window.getCookie = getCookie;
function getGAClientId() {
try {
const gaCookie = getCookie('_ga');
if (gaCookie) {
const parts = gaCookie.split('.');
if (parts.length === 4) {
return `${parts[2]}.${parts[3]}`;
}
}
return null;
} catch (error) {
console.error('Error retrieving GA Client ID:', error);
return null;
}
}
function parseUrlParameters() {
try {
const urlParams = new URLSearchParams(window.location.search);
urlParams.forEach((value, key) => {
setCookie(key, value, COOKIE_EXPIRATION_DAYS, COOKIE_ATTRIBUTES);
});
// Set 'gaclientid' cookie if not present
if (!getCookie('gaclientid')) {
const clientId = getGAClientId();
if (clientId) {
setCookie('gaclientid', clientId, COOKIE_EXPIRATION_DAYS, COOKIE_ATTRIBUTES);
} else {
console.warn('GA Client ID not found.');
}
}
} catch (error) {
console.error('Error parsing URL parameters:', error);
}
}
function populateFormFields() {
const fields = [
'utm_campaign',
'utm_source',
'utm_medium',
'utm_content',
'utm_term',
'gclid',
'gaclientid',
'fbclid'
];
// Populate tracking data from cookies
fields.forEach(field => {
const value = getCookie(field);
if (value !== null) {
const inputSelector = `input[name="${field}_hidden"]`;
const inputElements = document.querySelectorAll(inputSelector);
if (inputElements.length > 0) {
inputElements.forEach(inputElement => {
inputElement.value = value;
});
} else {
console.warn(`Input field ${inputSelector} not found.`);
}
}
});
// Populate page URL and title without using cookies
const pageUrl = window.location.href;
const pageTitle = document.title;
// Fill 'page_url' inputs
const pageUrlInputs = document.querySelectorAll('input[name="page_url"]');
if (pageUrlInputs.length > 0) {
pageUrlInputs.forEach(input => {
input.value = pageUrl;
});
} else {
console.warn(`Input field 'page_url' not found.`);
}
// Fill 'page_title' inputs
const pageTitleInputs = document.querySelectorAll('input[name="page_title"]');
if (pageTitleInputs.length > 0) {
pageTitleInputs.forEach(input => {
input.value = pageTitle;
});
} else {
console.warn(`Input field 'page_title' not found.`);
}
}
function init() {
document.addEventListener('DOMContentLoaded', () => {
parseUrlParameters();
populateFormFields();
});
}
init();
})();
</script>
In your form, add the following hidden fields to store this data:
<input type="hidden" name="page_url">
<input type="hidden" name="page_title">
<!-- Hidden Fields for Tracking Parameters by Digi2 -->
<input type="hidden" name="utm_campaign_hidden" />
<input type="hidden" name="utm_source_hidden" />
<input type="hidden" name="utm_medium_hidden" />
<input type="hidden" name="utm_content_hidden" />
<input type="hidden" name="utm_term_hidden" />
<input type="hidden" name="gclid_hidden" />
<input type="hidden" name="gaclientid_hidden" />
<input type="hidden" name="fbclid_hidden" />
This way, you’ll always know where your leads are coming from and can analyze which campaigns are working best.
2. Validate Your Form for a Better User Experience
A form that’s difficult to fill out can frustrate users and drive them away. Make sure that each field is clearly labeled and that users understand what’s expected of them. If a mistake happens, the form should provide instant feedback with easy-to-understand messages.
For example, instead of a vague "Invalid input" message, say "Please enter a valid email address" or "Your password must be at least 8 characters long", you can also use red and green markings to let the user know if they have entered the content correctly in the form fields. This makes it easier for users to fix errors quickly and complete the form without frustration. A smooth, hassle-free experience increases the chances that they’ll actually submit it.
Below is a sample image showing the difference between valid and invalid form validation that we created for our client Mapeciaki.pl:
3. Disable Scrolling When a Popup Form Appears
If you’re using pop-up forms, make sure they grab the user’s full attention. A common mistake is allowing the background to scroll while the form is displayed. This can be distracting and make it harder for users to focus on filling out the form.
This is how we did it on the website at one of our clients:
To improve the experience, keep the background static while the form is open. This ensures users stay engaged with the form instead of accidentally scrolling away. Also, make sure the pop-up is easy to close so users don’t feel trapped — frustration can lead to them abandoning your site altogether.
