How to Prevent Specific Email Addresses with Marketo Forms 2.0

January 18, 2016 Tairik Jean Da Costa

Marketo Forms API Perkuto
Marketo Forms 2.0 API is a great tool, which allows the developers to have more control over the behavior and data sent through Marketo Forms.

One of the situations very often faced is the ability to control the forms submission depending on certain conditions.

Let’s imagine a scenario where we have a “Contact Us” page with a Marketo Form 2.0 embedded and we want to prevent specific email addresses of being sent from that page. We can easily do this using Marketo Forms 2.0 API.

1) submittable Method

First of all, let’s take a look at one API method: form.submittable(false);

This method allows us to control if the form can be submitted or not; false meaning the form cannot be submitted and true it can.

In our javascript code we will have something like:

if (!isEmailGoodPersonal(email)) {
   form.submittable(false);
   var emailElem = form.getFormElem().find(“#Email”);
   form.showErrorMessage(“Must be businesss email.”, emailElem);
}else{
   form.submittable(true);
}

This snippet with a simple if condition checks if the email address contains one of allowed domains in our js array and uses the “submittable” method to enable or disable the form submission accordingly to our conditions. Once the method is invoked with “false” parameter, the user will not be able to send the form unless the same method is invoked with “true” option. That’s important because you need to remember to invoke the method again with the true parameter otherwise your user will not be able to complete the form.

Another interesting thing here is the “getFormElem” and “showErrorMessage” methods. The first one returns the Marketo form element, in this case, “Email” and the second one helps us to display the desired message formatted with Marketo styling to the field correspondent.

2) How to check if the email is valid or not

Earlier we saw we are using isEmailGoodPersonal function to check if the email address satisfies our conditions or not. Let’s check this function in details:

var invalidPersonalDomains = [“@gmail.”,”@yahoo.”,”@live.”,”@aol.”,”@outlook.”];
function isEmailGoodPersonal(email) {
   for(var i=0; i < invalidPersonalDomains.length; i++) {
     var domain = invalidPersonalDomains[i];
     if (email.indexOf(domain) != -1) {
       return false;
     }
   }
   return true;
}

First we need to create an array with a list of invalid domains (invalidPersonalDomains). Then, the function will loop through that list and checks if the string (email) passed as parameter contains or not the domain presents in the array. The function must return “true” or “false”.

3) Tie all together

It’s time to put all parts together. Normally, Marketo provides us an embedded code like follows:

<script src=”//app-sj09.marketo.com/js/forms2/js/forms2.min.js”></script>
<form id=”mktoForm_xxxx”></form>
<script>MktoForms2.loadForm(“//app-sj09.marketo.com”, “xxx-xxx-xxx”, xxxx);</script>

We just simply need to replace it with our own changes. The final code will look like this:

<script src=”//app-abj.marketo.com/js/forms2/js/forms2.min.js”></script> <form id=”mktoForm_xxxx”></form>
<script>MktoForms2.loadForm(“//app-abj.marketo.com”, “xxx-xxx-xxx”, xxxx);</script>
<script>
(function (){
  var invalidPersonalDomains = [“@gmail.”,”@yahoo.”,”@live.”,”@aol.”,”@outlook.”];

  MktoForms2.whenReady(function (form){
    form.onValidate(function(){
      var email = form.vals().Email;
      if(email){
        if(!isEmailGoodPersonal(email)) {
          form.submittable(false);
          var emailElem = form.getFormElem().find(“#Email”);
          form.showErrorMessage(“Must be businesss email.”, emailElem);
        }else{
          form.submittable(true);
        }
      }
    });
 });

 function isEmailGoodPersonal(email) {
   for(var i=0; i < invalidPersonalDomains.length; i++) {
     var domain = invalidPersonalDomains[i];
     if (email.indexOf(domain) != -1) {
       return false;
     }
   }
   return true;
 }
})();
</script>

Conclusion

As we can see, Marketo Forms 2.0 API gives us a great flexibility to take over control our forms and make it suite to our needs easily.

For more references and code samples to help with advanced Marketo Form 2.0 custom function, check out our repository: https://github.com/Perkuto/Marketo

Credit: Business vector designed by Freepik

Previous Article
Training new Marketo Consultants the Perkuto Way
Training new Marketo Consultants the Perkuto Way

Since marketing automation is a fairly new industry, and qualified and available experts are rare, we decid...

Next Article
The Ultimate Marketo Program Launch Checklist
The Ultimate Marketo Program Launch Checklist

Are you tired of meaningless reports due to incomplete data? Or *cringe* have you accidentally sent an emai...