How to Add Input Masks to Form Fields in Bootstrap Studio

Input masks are a way to constrain data that users enter into form fields and enforce specific formatting. This is suitable for things like phone and credit card numbers, dates and more.

In this tutorial we will show you how to create input masks in Bootstrap Studio. We will use the jQuery Mask Plugin, and write a bit of JS to make it work.

You can download the complete example as a bsdesign file. Download Example

First, you need to create a form with some input fields by dragging and dropping a form, form groups and inputs from the component panel. For this tutorial we made a simple registration form with 4 input fields and a button. We've added IDs to the form fields using the attributes panel.

Here is what the relevant code looks like:

<!-- Our form fields -->
<div class="form-group">
    <input type="text" class="form-control item" id="email" placeholder="Email">
</div>
<div class="form-group">
    <input type="text" class="form-control item" id="phone-number" placeholder="Phone Number">
</div>
<div class="form-group">
    <input type="text" class="form-control item" id="birth-date" placeholder="Birth Date">
</div>   
<!-- The rest of the form code -->

After this, you need to import the library in your design. Go to the Design Panel and right-click on the JavaScript group and select Link External JS. Paste the CDN URL of the library (in this case https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js).

Then create a new JavaScript file, and add the following code that will initialize the input masks:

$(document).ready(function(){
  $('#birth-date').mask('00/00/0000');
  $('#phone-number').mask('0000-0000');
});

The mask method is defined by the plugin that you included. It supports a great variety of mask formats. For more information and examples you can check the documentation.

You can test these input masks when turning on the browser preview or when exporting your design.

Note: JS files are included in every page of your design. Make sure that you're using unique IDs for your inputs, so that masks are added only to the intended elements.