Is your sales team complaining that personal email addresses are being used to book a demo or schedule a sales call? There’s a solution for that!
Marketo Forms 2.0 API is a great tool, which allows developers to have more control over the behavior and data sent through Marketo Forms. Of course, one of the challenges is the ability to control the form’s submission in certain conditions.
For example, 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 from being submitted. We can easily do this using Marketo Forms 2.0 API.
Understanding the 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” means 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 to see if the email address contains one of the 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 a “false” parameter, the user will not be able to send the form unless the same method is invoked with the “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 at all.
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.
How To Check If the Email Is Valid Or Not
Earlier we were 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 check if the string (email) passed, whether or not the parameter contains the domain present in the array. The function must return “true” or “false”.
Tying It All Together
It’s time to put all parts together. Normally, Marketo provides us an embedded code as 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>
Overall, Marketo Forms 2.0 API provides great flexibility and enables developers to take over control of our forms to meet our needs easily.
Need help with Marketo landing pages or code snippets? Give our team a call and let’s discuss your objectives.