⚠️ This code does not work in any version of Internet Explorer, as it relies on
NodeList#forEach. It could be adapted for IE with a few more lines of JS.
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){
const arrayify = getSelection.call.bind([].slice);
let formEl = mktoForm.getFormElem()[0];
mktoForm.onSubmit(function(mktoForm){
let currentValues = mktoForm.getValues();
let emailEls = formEl.querySelectorAll("input[type='email']");
let mktoFields = {};
arrayify(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 webhook could do the trick!)
.png)