An easy way to encourage accurate phone number entry is to automatically format phone numbers as they are typed in. This is called a masked input, and is very easy to implement in Infusionsoft web forms, order forms, and the shopping cart. To see an example, check out the order page for our Easy API product.
We’re going to be using the jQuery Masked Input plugin. We’ve thrown a copy up on our server that you can use, or you can download it and save it to your own server.
The code is the same for both order forms and the shopping cart:
<script src="https://s3.amazonaws.com/novaksolutions/free/jquery.maskedinput.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#phoneNumber").mask("(999) 999-9999");
});
</script>
To use this code, simply paste into your Custom Header for your order form or shopping cart.
It is a little different for web forms:
<script src="https://s3.amazonaws.com/novaksolutions/free/jquery.maskedinput.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#inf_field_Phone1").mask("(999) 999-9999");
});
</script>
To use the code for a web form, you’ll need to add an HTML snippet. Copy and paste the above code into the HTML snippet.
There is a caveat: With the way the code is written above, the user won’t be able to enter more than 10 digits. If you need more than 10 digits or want the phone number formatted for different countries, you’ll need to use a different mask. Check the jQuery Masked Input plugin page for instructions on how to do this.
You can also easily modify this code to work for other fields that you may be collecting, such as social security numbers and dates.
