Displaying and storing form-entered email addresses in lowercase

Sanford Whiteman -

You probably know that email addresses are teeeeeechnically case-sensitive but, like most sensible creatures, you treat them as if they’re case-insensitive. (As Marketo Smart Lists obviously do!)

Wouldn’t it be even better if they were stored in lowercase from any form fill? So even if  someone’s browser autofills timroberts@EXAMPLE.COM from an accidental caps lock long ago, or they typed TimRoberts@example.com out of habit (it definitely happens!) you get timroberts@example.com in Marketo.

Easily done. There are 2 parts:

  1. Using CSS to display the field as lowercase, regardless of how it’s autofilled or typed. CSS is cosmetic-only: the underlying field value doesn’t change.
  2. Using JS to make sure the value is truly stored as lowercase. This happens under the hood on submit, and the end user doesn’t notice because you’ve already made sure it looks like it’s in lowercase.

The CSS:

.mktoForm input[type="email"] {
   text-transform: lowercase;
}

The JS:

MktoForms2.whenReady(function(mktoForm){  
   let formEl = mktoForm.getFormElem()[0];
   
   mktoForm.onSubmit(function(mktoForm){
      let currentValues = mktoForm.getValues();
      let emailEls = formEl.querySelectorAll("input[type='email']");
      let mktoFields = {};
       
      emailEls.forEach(function(field){
        mktoFields[field.name] = currentValues[field.name].toLowerCase();
      });
      
      mktoForm.setValues(mktoFields);      
      
   });        
});

That’s it!

Forms aren’t all

Remember, forms aren’t the only way email addresses get into your database. You’ll also have to deal with list imports, API calls, and SFDC sync. (A FlowBoost webhook would do the trick!)