Advanced Marketo Form Techniques Part 2

Customize your Marketo forms even more by using these 3 advanced Marketo form techniques. Learn how to show a thank you message after a form submission, how to limit word count on text fields and how to block free email addresses from form submissions.

This is part 2 of the advanced Marketo form techniques series. View part 1.

Show a thank you message after form submission

This snippet will show a thank you message after a successful form submission, instead of redirecting to a thank you page.

Add this piece of javascript code to your page:

MktoForms2.whenReady(function (form) {
    form.onSuccess(function(values, followUpUrl) {
        form.getFormElem().hide();
	document.getElementById("successAndErrorMessages").innerHTML="YOUR THANK YOU MESSAGE HERE"; 
        return false;
    });
});

Add this HTML code where you want the thank you message to display on the page:

<div id="successAndErrorMessages"></div>

Limit word count for a textarea & display the # of words left

Limit the number of words a user can input in a text field or textarea with this script.

Add this HTML to the label in your form.

Total word count: <span id="display_count">0</span> words. Words left: <span id="words_left">250</span>

Add this piece of javascript to your landing page. Change #comments to the name of your field and update 250 to the number of words you want to limit the field to.

$(document).ready(function() {
MktoForms2.whenReady(function (form) {
    // Update the ID with the ID of the form field
    $("#comments").keyup(function() {
        var words = this.value.match(/\S+/g).length;
        if (words > 250) { /* update 250 to the # of words you want to limit */
            var trimmed = $(this).val().split(/\s+/, 250).join(" "); /* update 250 to the # of words you want to limit */
             $(this).val(trimmed + " ");
        }
        else {
             $('#display_count).text(words);
             $('#words_left').text(250-words); /* update 250 to the # of words you want to limit */
        }
    });
 }); 
});

Block free email addresses from filling out a form

Block @gmail, @yahoo.com, @hotmail.com, @live.com, @aol.com and @outlook.com email addresses from filing out a form and require a business email address by adding this script to your landing page.

(function (){
  // Please include the email domains you would like to block in this list
  var invalidDomains = ["@gmail.","@yahoo.","@hotmail.","@live.","@aol.","@outlook."];

  MktoForms2.whenReady(function (form){
    form.onValidate(function(){
      var email = form.vals().Email;
      if(email){
        if(!isEmailGood(email)) {
          form.submitable(false);
          var emailElem = form.getFormElem().find("#Email");
          form.showErrorMessage("Must be Business email.", emailElem);
        }else{
          form.submitable(true);
        }
      }
    });
  });
  
  function isEmailGood(email) {
    for(var i=0; i < invalidDomains.length; i++) {
      var domain = invalidDomains[i];
      if (email.indexOf(domain) != -1) {
        return false;
      }
    }
    return true;
  }

})();

Questions?

Email me, send me a tweet @jennamolby, or leave a comment