SOLVED

Limit Email Domains on Form Submission

Go to solution
Jon_Jagelsky
Level 2

Limit Email Domains on Form Submission

We used the java script from this article on all of our landing pages with 1.0 forms in order to block personal email domains but in testing I'm finding that this same script does not work with new forms 2.0.

https://community.marketo.com/MarketoResource?id=kA650000000GtqvCAC

Anyone else running into this same issue or have any suggestions on how to block email domains with Forms 2.0?
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Kathi_Gosche
Level 4

Re: Limit Email Domains on Form Submission

One of my developers came up with this code that has worked for me. Depending on the way your button is designed, it may or may not work for you, but you can give it a try.

Replace your old validation code with the below:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var $jQ = jQuery.noConflict();
var invalidDomains =
[
"hotmail.com",
"yahoo.com",
"aol.com",
"gmail.com",
];
$jQ(document).ready(function(){
if ($jQ('.mktoButtonRow').length == 0) {
window.setTimeout(function(){
emailValidation();
}, 500);
} else {
emailValidation();
}
});
$jQ('#Email').bind('blur', function(){
if (isEmailValid()){
var $error = $jQ(this).parent().find('.mktoError');
if ($error.length > 0) {
$error.fadeOut(200, function(){
$error.remove();
$jQ('#Email').removeClass('mktoInvalid');
});
}
}
});
function emailValidation() {
var $buttonRow = $jQ('.mktoButtonRow');
var submitText = $buttonRow.find('button').html();
var $replacement = $jQ('<input id="replacementButton" type="button" class="mktoButton" value="' + submitText + '" />');
$buttonRow.hide();
var buttonRowContents = $buttonRow.html();
$span = $jQ(buttonRowContents).html('');
var $replacementRow = $jQ('<div class="mktoFormRow" />').append($span.append($replacement));
$jQ('.mktoFormRow :last').after($replacementRow);
$jQ('#replacementButton').click(function(){
console.log('debug1');
if (!isEmailValid()) {
console.log('debug2');
var $error = $jQ('#Email').parent().find('.mktoError');
if ($error.length == 0) {
$error = getError('Please provide a business or institutional email address');
$jQ('#Email').after($error);
}
$error.fadeIn(200);
$jQ('#Email').removeClass('mktoInvalid').addClass('mktoInvalid');
return;
} else {
console.log('debug3');
$jQ('.mktoButtonRow button').trigger('click');
}
});
}
function isEmailValid() {
var email = $jQ('#Email').val().toLowerCase();
for(i=0; i < invalidDomains.length; i++) {
var invalidDomain = invalidDomains[i].toLowerCase();
if (email.indexOf(invalidDomain) !== -1) {
return false;
}
    }
return true;
}
function getError(message, detail) {
var $container = $jQ('<div class="mktoError" style="right: 0px; bottom: -47px; display: none" />');
var $arrow = $jQ('<div class="mktoErrorArrowWrap"><div class="mktoErrorArrow"></div></div>');
var $errorMessage = $jQ('<div class="mktoErrorMsg" />').html(message);
if (typeof detail == 'string' && $jQ.trim(detail) != '') {
$errorMessage = $errorMessage.append($jQ('<span class="mktoErrorDetail" />').html(detail))
}
return $container.append($arrow).append($errorMessage);
}
</script>

View solution in original post

22 REPLIES 22
Kathi_Gosche
Level 4

Re: Limit Email Domains on Form Submission

I have run into this issue as well. In fact, that's why I came into the Community today.
Alok_Ramsisaria
Level 10

Re: Limit Email Domains on Form Submission

First drag and drop the form to the landing page draft and then add the JS to the HTML box, which is to be dropped on the landing page. The JS needs to be added in the landing page draft in the HTML box of the editor.
Kathi_Gosche
Level 4

Re: Limit Email Domains on Form Submission

That's the same code I've been using with 1.0 forms and it worked great. However it doesn't seem to work at all with 2.0 forms.
Halid_Delkic
Level 3

Re: Limit Email Domains on Form Submission

We’re experiencing the same issue since switching over to forms 2.0.

Tried dragging/dropping the form first, followed by the JS, but the block isn’t working as it did on forms 1.0.
 
Would be interested to hear if anyone has discovered an alternative method.
Kathi_Gosche
Level 4

Re: Limit Email Domains on Form Submission

One of my developers came up with this code that has worked for me. Depending on the way your button is designed, it may or may not work for you, but you can give it a try.

Replace your old validation code with the below:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var $jQ = jQuery.noConflict();
var invalidDomains =
[
"hotmail.com",
"yahoo.com",
"aol.com",
"gmail.com",
];
$jQ(document).ready(function(){
if ($jQ('.mktoButtonRow').length == 0) {
window.setTimeout(function(){
emailValidation();
}, 500);
} else {
emailValidation();
}
});
$jQ('#Email').bind('blur', function(){
if (isEmailValid()){
var $error = $jQ(this).parent().find('.mktoError');
if ($error.length > 0) {
$error.fadeOut(200, function(){
$error.remove();
$jQ('#Email').removeClass('mktoInvalid');
});
}
}
});
function emailValidation() {
var $buttonRow = $jQ('.mktoButtonRow');
var submitText = $buttonRow.find('button').html();
var $replacement = $jQ('<input id="replacementButton" type="button" class="mktoButton" value="' + submitText + '" />');
$buttonRow.hide();
var buttonRowContents = $buttonRow.html();
$span = $jQ(buttonRowContents).html('');
var $replacementRow = $jQ('<div class="mktoFormRow" />').append($span.append($replacement));
$jQ('.mktoFormRow :last').after($replacementRow);
$jQ('#replacementButton').click(function(){
console.log('debug1');
if (!isEmailValid()) {
console.log('debug2');
var $error = $jQ('#Email').parent().find('.mktoError');
if ($error.length == 0) {
$error = getError('Please provide a business or institutional email address');
$jQ('#Email').after($error);
}
$error.fadeIn(200);
$jQ('#Email').removeClass('mktoInvalid').addClass('mktoInvalid');
return;
} else {
console.log('debug3');
$jQ('.mktoButtonRow button').trigger('click');
}
});
}
function isEmailValid() {
var email = $jQ('#Email').val().toLowerCase();
for(i=0; i < invalidDomains.length; i++) {
var invalidDomain = invalidDomains[i].toLowerCase();
if (email.indexOf(invalidDomain) !== -1) {
return false;
}
    }
return true;
}
function getError(message, detail) {
var $container = $jQ('<div class="mktoError" style="right: 0px; bottom: -47px; display: none" />');
var $arrow = $jQ('<div class="mktoErrorArrowWrap"><div class="mktoErrorArrow"></div></div>');
var $errorMessage = $jQ('<div class="mktoErrorMsg" />').html(message);
if (typeof detail == 'string' && $jQ.trim(detail) != '') {
$errorMessage = $errorMessage.append($jQ('<span class="mktoErrorDetail" />').html(detail))
}
return $container.append($arrow).append($errorMessage);
}
</script>

View solution in original post

Anonymous
Not applicable

Re: Limit Email Domains on Form Submission

Do you know if this code should be on the landing page template (in the Design Studio) or should it be on the landing page itself? Or does it not matter? Thank you,

--Regan

Kathi_Gosche
Level 4

Re: Limit Email Domains on Form Submission

I have it placed on the landing page itself. I haven't tried it in a template, but that might work fine too. If you try it, I would be interested to hear how it worked out.

Jon_Jagelsky
Level 2

Re: Limit Email Domains on Form Submission

That worked great! Thank you so much Kathi
 

Wish i had developer like that in-house 🙂 

Kathi_Gosche
Level 4

Re: Limit Email Domains on Form Submission

Glad it worked for you Jon. Enjoy.