Bootstrap Studio

# Input Masks

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 (opens new window), and write a bit of JS to make it work.

You can download the complete example as a bsdesign file.

Download Example

Input Masks 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 via the Link External JS option in the Design Panel. Paste the CDN URL of the library:

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 (opens new window).

You can test these input masks with 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.

← Contact Form →