Forms 2.0 Embed Code with Invalid Email Script

[Enget_Dang]

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

[Edward_Masson]

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]

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 · Accepted solution]

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]

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]

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

[Anonymous]

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