Laserfiche Forms is a great tool to help make your outdated paper-forms disappear and instead, provide users with simple and easy to use online electronic forms. With that, many clients reach out to us asking for ways to customize the fields on their forms. The most popular requests are how to format the phone number as (xxx) xxx-xxxx, and how to format the Social Security Number (SSN) as 000-00-0000. This formatting is known as masking.
The following article includes step-by-step instructions on how to set up phone number or SSN masking on your forms.
The Form
1. Login to Laserfiche Forms, then navigate to the Manage tab. Here you will select the process that contains the phone number field.
2. Double-click the process name or click Edit next to the process name to open the Process. In our example, we have a process called _Field Formatting Process that contains our form.
3. With the Process open in Design mode, select the form that contains the phone number field. In our example, we have a form called Field Formatting Form where we will edit the field and the JavaScript.
4. At the top of the Designer click on the CSS and JavaScript tab
5. In the JavaScript section in the bottom window of the split-windows view, paste the code into the empty box.
6. Press Save at the top-right corner.
The Phone Mask Code
/* Mask single line input to autoformat for phone number (_)_-__ */
$(document).ready(function () {
//Download the script and apply the masks
$.getScript("https://forms.citiesdigital.com/Forms/js/libs/jqueryextra/jquery.mask.js", function () {
ApplyMask();
});
//Re-apply masks when the "Add" link is clicked * ONLY IF IN A COLLECTION*
$("<Collection ID>").click(ApplyMask);
});
function ApplyMask() {
//Loop through each input element with a parent containing the "phone" css class
$(".phone input").each(function () {
//Get the element and apply the mask
var el = $(this);
el.mask("(000) 000-0000", { placeholder: "(_) _-__" });
//Get the parent and remove the class
//This prevents the same elements from being found in future calls to this method
var parent = el.parent('.phone');
parent.removeClass("phone");
});
}
Note: If you already have pre-existing code in the JavaScript box, you'll want to copy the phone masking code but remove the first line of code, the "$(document).ready(function () { “ line. Or you can put // at the beginning of the line to comment it out so that it doesn't run that line of code. You may also need a second } at the bottom of the code.
The SSN Mask Code
/* Mask single line input to autoformat for Social Security Number --__ */
$(document).ready(function () {
//Download the script and apply the masks
$.getScript("https://web.citiesdigital.com/Forms/js/libs/jqueryextra/jquery.mask.js", function () {
ApplySSNMask();
});
//Re-apply masks when the "Add" link is clicked * ONLY IF IN A COLLECTION*
$("<Collection ID>").click(ApplySSNMask);
});
function ApplySSNMask() {
//Loop through each input element with a parent containing the "SSN" css class
$(".SSN input").each(function () {
//Get the element and apply the mask
var el = $(this);
el.mask("000-00-0000", { placeholder: "_-_-___" });
//Get the parent and remove the class
//This prevents the same elements from being found in future calls to this method
var parent = el.parent('.SSN');
parent.removeClass("SSN");
});