The Easiest Way To Add Input Masks To Your Forms

Input masks make it much easier for users to figure out the required format for filling out emails, phone numbers, credit cards and other data. Adding masks to your form inputs makes them so much better and its super easy to do, especially when using a JS library.

In this article we've prepared for you a Bootstrap 4 form template with ready-to-use input masks out of the box. Just like all our freebies, it is completely free to use!

The Template

The template is build completely with Bootstrap 4 components. It has clean and modern design, the HTML is fully compliant with the framework and the CSS is self contained, so when you use it, it won't break the rest of your styles.

We have used jQuery Mask Plugin to create the input masks for the form fields. It is really easy to use and implement, and has a lot of customization options.

How to use

To use the template, follow these simple steps:

1. Grab the zip archive from the Download button near the top of the page and extract it.
2. Paste the HTML into your project. Make sure you have Bootstrap 4 on that page.
3. The styles are located in a separate CSS file. Link to the file or copy its contents and add them to your styles.
4. Add the jQuery Mask Plugin CSS and JS files, and initialize it in a script tag - $('#birth-date').mask('00/00/0000'); Make sure you include the Mask Plugin after jQuery.

Input Masks in Bootstrap Studio

Another quick way to set up input masks is by using Bootstrap Studio. The app makes it super easy to create the right HTML, include the JavaScript library, and configure the masks to your liking.

We've prepared a simple step-by-step tutorial that covers everything you need to do. You can check it out in the Bootstrap Studio tutorials section.

Free for Commercial Use

You have all rights to customize and use these templates in both personal and commercial projects. All our freebies are 100% royalty free, no attribution required (our license page). Enjoy!