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 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:
- Grab the zip archive from the Download button near the top of the page and extract it.
- Paste the HTML into your project. Make sure you have Bootstrap 4 on that page.
- The styles are located in a separate CSS file. Link to the file or copy its contents and add them to your styles.
- 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
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
The revolutionary web design tool for creating responsive websites and apps.Learn more