{"id":1338,"date":"2018-05-31T09:52:05","date_gmt":"2018-05-31T09:52:05","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=1338"},"modified":"2019-03-24T07:00:20","modified_gmt":"2019-03-24T07:00:20","slug":"easiest-way-to-add-input-masks-to-your-forms","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/freebies\/easiest-way-to-add-input-masks-to-your-forms\/","title":{"rendered":"Easiest Way To Add Input Masks To Your Forms"},"content":{"rendered":"\n

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 it’s super easy to do, especially when using a JS library.<\/p>\n\n\n\n

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<\/a>, it is completely free to use!<\/p>\n\n\n\n

The Template<\/h3>\n\n\n\n

The template is built 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.<\/p>\n\n\n\n

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

\"\"

Registration Form
<\/figcaption><\/figure>\n\n\n\n

How to use<\/h3>\n\n\n\n

To use the template, follow these simple steps:<\/p>\n\n\n\n

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

    Input Masks in Bootstrap Studio<\/h3>\n\n\n\n

    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.<\/p>\n\n\n\n

    Free for Commercial Use<\/h3>\n\n\n\n

    You have all rights to customize and use these templates in both personal and commercial projects. All our freebies<\/a> are 100% royalty free, no attribution required. Enjoy!<\/p>\n\n\n\n

    Download <\/strong>: https:\/\/bootstrapstudio.io\/resources\/input-masks.bsdesign<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

    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 it’s super easy to do, especially when using a JS library. In this article we’ve prepared for you […]<\/p>\n","protected":false},"author":2,"featured_media":1340,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[8,12],"tags":[57,87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2018\/11\/add-input-mask.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-lA","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1338"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=1338"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1338\/revisions"}],"predecessor-version":[{"id":2036,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1338\/revisions\/2036"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/1340"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=1338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=1338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=1338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}