SOLVED

Forms 2.0 Embed Code with Invalid Email Script

Go to solution
Enget_Dang
Level 3

Forms 2.0 Embed Code with Invalid Email Script

We are currently using a form on a non-Marketo web page, but instead of using the old way of placing the form on a blank landing page and then adding that source to an iframe to be placed on a non-Marketo web page, I'd like to use Marketo's new embedded script code, but the tricky part is that we use the invalid email script to gate unwanted email domains (gmail, yahoo, etc.). Does anyone know how to use the new Marketo embed code and invalid email script without using a Marketo landing page as the source for the form? I'd like to try and avoid any iframes.

Cheers!
Enget
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Alok_Ramsisaria
Level 10

Re: Forms 2.0 Embed Code with Invalid Email Script

On your non marketo landing page add the form using the embeded code and then use below mentioned code:-
 

<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

6 REPLIES 6
Edward_Masson
Level 10

Re: Forms 2.0 Embed Code with Invalid Email Script

There was an update to the developers site regarding emabeding Forms 2.0 to non marketo pages, check this area out:
http://developers.marketo.com/documentation/websites/forms-2-0/
Enget_Dang
Level 3

Re: Forms 2.0 Embed Code with Invalid Email Script

Hi Ed,

Thanks for the recommendation. It looks like this is the script I was looking for, but with limited development skills was wondering if anyone could help modify this a bit to show an error message when someone enters in an invalid email address like gmail.com:

MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621, function(form){
  //listen for the submit event
  form.onSubmit(function(){
    //get the values
    varvals = form.getValues();
    //Check your condition
    if(vals.Country == "USA"&& vals.VehicleSize != "massive"){
      //prevent form submission
      form.submittable(false);
      //Show error message, pointed at VehicleSize element
      varvehicleSizeElem = form.getFormElem().find("#VehicleSize");
      form.showErrorMessage("All Americans must have a massive vehicle", vehicleSizeElem);
    }else{
      //enable submission for those who met the criteria.
      form.submittable(true);
    }
  });
});

Alok_Ramsisaria
Level 10

Re: Forms 2.0 Embed Code with Invalid Email Script

On your non marketo landing page add the form using the embeded code and then use below mentioned code:-
 

<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>

 

Enget_Dang
Level 3

Re: Forms 2.0 Embed Code with Invalid Email Script

Thanks Alok! Saw this on another discussion and it worked pretty well for me. Only functional problem is that the error message is showing under the label and not field, but other than that. Works like a charm!
Enget_Dang
Level 3

Re: Forms 2.0 Embed Code with Invalid Email Script

Actually double-checked and this only works successfully with a Marketo landing page and not a non-Marketo page.
Anonymous
Not applicable

Re: Forms 2.0 Embed Code with Invalid Email Script

Worked very well for Forms 2.0 page. Thank you Alok.