🚀 How to Block Free Email Domains on Your Landing Pages with SmartBuilder — Even When They Said It's Impossible!

Hey Unbounce Community! 🚀

I recently faced a challenge where I needed to block submissions from free email domains on my landing pages built with SmartBuilder. The Unbounce tech team said it was not possible... But guess what? I've crafted a script that works like a charm, and today, I’m here to share it with all of you!
 

🧠 The Problem

We often need to ensure that leads coming through our landing pages are more likely B2B, and one way to do that is by preventing users from signing up using free email domains (like Gmail, Yahoo, etc.).
 

🚀 The Solution

Below is a script that allows you to block specified email domains and give visual feedback to users attempting to use them.

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        const blockedDomains = ['me.com', 'mac.com', 'icloud.com', 'gmail.com', 'googlemail.com', 'hotmail.com', 'live.com', 'msn.com', 'outlook.com', 'yahoo.com', 'ymail.com', 'aol.com'];

        const emailInput = document.querySelector('#emailField');
        const submitButton = document.querySelector('#submitButton');
        const originalSubmitText = submitButton.textContent;

        emailInput.addEventListener('input', function() {
            const domain = emailInput.value.split('@')[1];
            if (blockedDomains.includes(domain)) {
                emailInput.style.border = '2px solid red';
                submitButton.disabled = true;
                submitButton.textContent = "Please Use Your Work Email";
            } else {
                emailInput.style.border = '';
                submitButton.disabled = false;
                submitButton.textContent = originalSubmitText;
            }
        });
    });
</script>

🧐 Script Explanation

1. Selecting Elements:
 

const emailInput = document.querySelector('#emailField'); const submitButton = document.querySelector('#submitButton');

• #emailField: This should be replaced with the ID of your email input field in SmartBuilder.
• #submitButton: Replace this with the ID of your submit button in SmartBuilder.

2. Blocked Domains:

const blockedDomains = ['me.com', 'mac.com', 'icloud.com', 'gmail.com', 'googlemail.com', 'hotmail.com', 'live.com', 'msn.com', 'outlook.com', 'yahoo.com', 'ymail.com', 'aol.com'];

• This array contains the domains you want to block. Feel free to remove or add domains as per your requirements.

3. Event Listener:

emailInput.addEventListener('input', function() {...});

• This code listens for user input in the email field and triggers a function each time the input changes.

4. Domain Check and UI Feedback:

const domain = emailInput.value.split('@')[1];
if (blockedDomains.includes(domain)) {
    emailInput.style.border = '2px solid red';
    submitButton.disabled = true;
    submitButton.textContent = "Please Use Your Work Email";
} else {
    emailInput.style.border = '';
    submitButton.disabled = false;
    submitButton.textContent = originalSubmitText;
}

• Extracts the domain from the entered email and checks against the blocked list.
• If it's on the list, it highlights the email input in red, disables the submit button, and changes the button text.
• If not, it resets the UI elements to their original state.

🛠 How to Implement

1. Navigate to Unbounce Dashboard > Your Landing Page > Script Manager.
2. Click Add a Script > Choose Custom Script.
3. Copy-paste the above script into the Script area.
4. Ensure to target the specific pages you want the script to run on.
5. Save and Publish your page.

That’s it! 🎉 Now, you've set up a barrier against free email domains on your Unbounce landing page. Feel free to tweak as needed, and do share if you enhance it further!
 

Happy converting, Unbouncers! 🚀