Conditional input masks on Marketo Forms

As some have rightly complained, once you set a Mask Input pattern on a Forms 2.0 field, the Form Editor doesn't let you switch the pattern based on other fields' values — for example, country-specific phone numbers.

(File this under “Things I've never needed, but know how to do.” Not a fan of input masks on web forms in general!)

Here's how. First, in Form Editor, give the field a default Mask:

Then the rest is done with a little Forms 2.0 JS:

For the learners

Very quick code walkthrough this time.

The only part you need to maintain: set up the different masks (metadata), then bind together the primary (master) field name, the dependent (secondary) field name, and the masks.

   // dictionary of phone formats
   // there can be multiple dictionaries in use for different fields
   var countryPhoneMetadata = {
      India: {
         mask: "999-99999999",
         error: "Required: use format 999-99999999."
      },
      Macedonia: {
         mask: "9 999 9999",
         error: "Totes required: 9 999 9999."
      },
      "United States": {
         mask: "(999) 999-9999",
         error: "This field is required. Use format (555) 123-4567."
      }
   };

   // bind primary & dependent fields
   // dependencies is an array, so you can add other inter-field relationships too
   var dependencies = [
      {
         primaryField: "Country",
         dependentField: "Phone",
         metadata: countryPhoneMetadata
      }
   ];

This can be made more robust, creating one-to-many dependencies and all kinds of stuff. In my more complex form deployments there's way crazier metadata setup, but here it's focused on the Mask Input task.

Then (you shouldn't change any other code, mind you) loop over the dependencies…

dependencies.forEach(function(depSet) {

…get an HTML element handle for each primary field…

      formEl
          .querySelector(nameSelector(depSet.primaryField))

…add a value change listener to the <SELECT>…

         .addEventListener("change", function(e) {

…on change, get the current value, dependent HTML element, and the relevant metadata for the current value…

            var primaryValue = form.getValues()[depSet.primaryField],
               dependentField = formEl.querySelector(nameSelector(depSet.dependentField)),
               metadata = depSet.metadata[primaryValue];

…then set the new mask and error messages accordingly. Easyish!