[Tips and Scripts] Form Field Masking

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 the demo page built in Unbounce here:
http://landingpage.noahmatsell.ca/form-field-masking/

:warning: Update: Some issues with Android devices have been found. See here: https://github.com/digitalBush/jquery.maskedinput/issues/382


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Instructions

First, go grab the latest scripts here:
https://gist.github.com/noahub/a92323a6173546e18396a23be8fa58d0

  1. Copy and paste the mask_plugin.js Javascript code in the Javascript section with placement ‘Head’.

  2. Copy and paste the add_mask.js Javascript code in the Javascript section with placement ‘Before Body End Tag’. This is the code that will be used to apply masks to your fields.

  3. Update #phone_number_north_america , for example, with the ID of your own form field.

  4. 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)

  5. 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.


Testing

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.

Conclusion

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!


Can’t see the instructions? Log-in or Join the Community to get access immediately. :rocket:


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

3 Likes

This is :heart_eyes:

1 Like

Perfect! Thanks a ton. Any ideas on how to make this work as a domain-wide script? (tried and no dice)

1 Like

When testing this script in a form on my phone (Chrome browser in Android) I’m having issues. I’m using format (XXX) XXX-XXXX but when I enter digits into the field, they get all jumbled and appear out of order. Is anyone else experiencing this? Any ideas how to fix? Thanks.

Hey @Andy2, it looks like this may be a known bug with this plugin :neutral_face: https://github.com/digitalBush/jquery.maskedinput/issues/382.

I’ll keep an eye on that issue and post an update if a fix comes along.

2 Likes

Hello,
I have a field that needs to acept 3 letters or 4 letters.
How can I do that?

Thank you

Hi @toniomorais,

First you’ll need to write a custom validation rule with some RegEx that would validate the field based on your rules (3 or 4 letters).

Here is an old community post that gives a bit more details on how to approach custom validation.

Best,
Hristian

Hello Hristian,

Thank you for the guidance. It’s not yet working but….

I’m tryng to have a field that only should acept 3 letters or 4 letters.
If less than 3 letters should give error and if more than 4 letters should give error.
What is missing?
var valid = ( /[a-zA-Z]{3}|[a-zA-Z]{4}/.test(value) );
Thank you

Com os melhores cumprimentos,

António Morais

[logo-200]http://www.audicaoactiva.pt/

t: (+351) 253 775 303
www.AudicaoActiva.pthttp://www.audicaoactiva.pt/

This tip keeps working? I tried but for me don’t works.

Yes, it works for me.

Hello @Noah, recently, (maybe with the change of javascript), this script has been having a problem.
It requires to hit the submit button twice in order to see the confirmation message.

PS: do not use pre-fill functions of chrome, or you won’t be able to see the same bug.

EDIT: Nevermind, I was able to make it work by unchecking the box “jQuery(1.4.2)”.

I’m unable to view the instruction. Actually all posts from Noah. While logged in it asks “Can’t see the instructions? Log-in”. I’m logged in. I’ve tried logging out and different browsers. I can see this error in the console and wonder if it’s the problem or I need a higher level of access?

Uncaught Error: Syntax error, unrecognized expression: Convertables™.
at Function.t.error (_ember_jquery-d430881a3fb1403871256e5a02423c4b20a78793685e92088613ca9a701baf88.js:1574)
at t.tokenize (_ember_jquery-d430881a3fb1403871256e5a02423c4b20a78793685e92088613ca9a701baf88.js:2230)
at t.select (_ember_jquery-d430881a3fb1403871256e5a02423c4b20a78793685e92088613ca9a701baf88.js:2657)
at Function.t [as find] (_ember_jquery-d430881a3fb1403871256e5a02423c4b20a78793685e92088613ca9a701baf88.js:876)
at Te.fn.init.find (_ember_jquery-d430881a3fb1403871256e5a02423c4b20a78793685e92088613ca9a701baf88.js:2910)
at new Te.fn.init (_ember_jquery-d430881a3fb1403871256e5a02423c4b20a78793685e92088613ca9a701baf88.js:3020)
at Te (_ember_jquery-d430881a3fb1403871256e5a02423c4b20a78793685e92088613ca9a701baf88.js:166)
at Te.fn.init.Te.fn. [as insertAfter] (_ember_jquery-d430881a3fb1403871256e5a02423c4b20a78793685e92088613ca9a701baf88.js:6223)
at 8ec62bdb64ea35082d358cd6b9a2697c4ed20ece.js:2

Hello there,

Has anyone succeed in making this script works with the multistep form 2.0 ?
When combined, i get an error when trying to go to the next field “This field is required”.

I have a question. In our country, the phone number could either be 9 digits or 10 digits. The problem is, when I set it to 10 digits, those with 9 digit phone numbers aren’t able to submit the form. Can I just provide the first 2 digits? Is there a way around this? Thanks.