One of the major challenges when collecting data on a landing page is the potential risk of data being submitted in inconsistent formats. It’s not uncommon for form fields to be filled out in a variety of different ways (think phone numbers without dashes). To complicate things further, if you’re integrating your form with external systems, this can lead to integration errors caused by bad lead data.
Thankfully, we've got a solution for this. By using Form Field Masking, you can ensure your page visitors are submitting standardized, valid, and consistent data on your landing pages in a usable and straightforward way. And what’s more, this masking is completely customizable for any unique use-case.
See Form Field Masking in action!
Update: Some issues with Android devices have been found. See here: https://github.com/digitalBush/jquery.maskedinput/issues/382
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
Pro tip: This is a truncated version of the entire script, if you only copy and paste the script that you see here, your code will be incomplete.
Update #phone_number_north_america , for example, with the ID of your own form field.
Update .mask("(999) 999-9999") for your own use-case, or create a brand new one from scratch! A quick guide to creating your own custom mask:
a - Represents an alpha character (A-Z,a-z)
9 - Represents a numeric character (0-9)
*- Represents an alphanumeric character (A-Z,a-z,0-9)
Repeat step 4 for any other fields in your form.
For more detail on the plugin used in this solution, there’s some handy documentation here.
Now let’s test this puppy out! Like any other feature that you implement onto your page, you’ll want to see what effect it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page, just to be safe. Documentation on A/B testing can be found here.
Now that we’ve given you the tools, you’re officially one step closer to being a marketing extraordinaire (if you weren’t already). Once you’ve implemented this feature on your own pages, let us know what kind of impact this has on your conversions, or if you have any suggestions related to the Form Field Masking feature, we want to hear ‘em!
Did you find this tip useful? Did you test this on your landing page? Let us know in the comments below!