Input mask for Breezing Forms

Breezing Forms Lite is a free Joomla extension that can be downloaded from Crosstec. It is amazing tool, one can create multifunctional form in 20 min, store results in database, have it e-mailed, etc. What it is missing are input masks allowing you apply automatic formatting of certain fields, e.g. phone number, ss number, zip code, etc. But developers "missed" this feature deliberately allowing  user use his own approach in form fine tuning. Breezing Forms can be loaded with custom scripts giving additional functionality.

The missing feature in Breezing Forms is input mask, e.g. ss #, phone number, zip code, etc. This simple tutorial will show you how to obtain that extra functionality.

1. Download Maskedinput plugin for the jQuery JavaScript library.

  • http://digitalbush.com/projects/masked-input-plugin
  • https://github.com/digitalBush/jquery.maskedinput

2. Unzip, read "ReadMe" and put it in some directory e.g.

/includes/js/maskedinput

3. Then go to your form: Advanced, More Options, Form Pieces, Before Form, Custom and enter the following code:

 

echo '<script src="/includes/js/maskedinput/src/jquery.maskedinput.js" type="text/javascript"></script>';

			echo '<script>

			JQuery(function($){

			$("#ff_elem73").mask("(999) 999-9999");

			$("#ff_elem78").mask("(999) 999-9999");

			$("#ff_elem55").mask("99999");

			});

			</script>';

 

5. Be aware of your field ID: ff_elem[some number] and the mask that you want to enter, all is nicely documented.

6. If your masks are not working as expected try to fix the problem with two additional options in Advanced tab: Disable JQuery at conflicts, Use Joomla tooltips for hints