Hello People,
I was asked on a client site that they only want to accept non-public emails, basically, they wanted to capture only work email while avoiding @gmail.com or @icloud.com etc.
In other words, they wanted to block this domain from the email input field, so if someone tries to input their personal email in input, it will ask to provide a work email.
This was done using JS, the approach is simple, keep looking at the input field, and once the user starts typing, make the submit button inactive and change the state only if it’s a valid email. i.e. email extension does not include defined domains.
To achieve this, you just need to add below JS and modify domains as per your need
document.addEventListener('DOMContentLoaded', function() {
const excludedDomains = ['gmail.com', 'outlook.com', 'yahoo.com', 'hotmail.com'];
function isValidWorkEmail(email) {
if (!email.includes('@')) return false;
const parts = email.split('@');
if (parts.length !== 2) return false;
return !excludedDomains.includes(parts[1].toLowerCase());
}
const emailField = document.getElementById('field849214407e-e5');
const downloadBtn = document.querySelector('.kb-adv-form-submit-button');
// Try to find the existing error div
let errorMessage = document.getElementById('work_email_only-error');
// If not found, create the error div to match Kadence Form's structure
if (!errorMessage) {
errorMessage = document.createElement('div');
errorMessage.id = 'work_email_only-error';
errorMessage.className = 'kb-adv-form-error-msg kb-adv-form-message kb-adv-form-warning';
errorMessage.style.display = 'none';
errorMessage.textContent = 'Please use your work email.';
emailField.parentNode.insertBefore(errorMessage, emailField.nextSibling);
}
downloadBtn.disabled = false;
emailField.addEventListener('input', function() {
downloadBtn.disabled = true;
errorMessage.style.display = 'none'; // Hide error while typing
});
emailField.addEventListener('blur', function() {
const email = emailField.value.trim();
if (email && !isValidWorkEmail(email)) {
errorMessage.style.display = 'block';
} else {
downloadBtn.disabled = false;
errorMessage.style.display = 'none';
}
});
downloadBtn.addEventListener('click', function(e) {
if (downloadBtn.disabled) {
e.preventDefault();
errorMessage.style.display = 'block';
emailField.focus();
}
});
});
I have highlighted the line that needs to be modified, on line 2, just make sure you add all your blocklist domains, and on line 11, you have to find the email input ID and replace it.
That’s it, and it will not affect your default form notices, so other default validations will also go through.
I have added a tutorial to Customize the Thank You Message of your Kadence form, .
And it will submit work emails which do not contain the domain in the blacklist in the JS file.
If you face any issue in achieving this, do let me know and I will help you out.
[…] a recent blog, I explained how to Restrict Certain Domains in Kadence Forms Email Input and on the same client, I got the requirement to have a custom thank you message state where there […]