Is there a way to use masked inputting with elements in BreezingForms?

Go to this site: 

https://github.com/digitalBush/jquery.maskedinput

and download the Masked Input plugin zipfile.

Unzip the zip file. Create a new folder on your server (let's call it "maskedinput") to house the contents. I created mine as follows:

 /includes/js/maskedinput/

Now upload the contents (files and folders) of the unzipped file to the /maskedinput/ folder.

Once you've done that, you need to create your form and connect it to a menu item so you can view it. Open the page that contains the form, and click on View Source. You now need to find the ELEMENT ID for each element that you want to use with the Input Mask script. (In my case, I added three text elements to my form: date, phone, and SSN.)

Here is the HTML code for the date element in my form:

<input class="ff_elem" type="text" name="ff_nm_date[]"value=""id="ff_elem1534"/>

 The ELEMENT ID for the date field is at the end: ff_elem1534 Here is the HTML code for the phone element in my form:

<input class="ff_elem" type="text" name="ff_nm_phone[]" value=""id="ff_elem1535"/>

The element ID for the phone field is: ff_elem1535  Make a note of the ELEMENT ID for each element that you are using masked input for.

Now go back to BreezingForms to your form's properties > Advanced tab > More Options > Form pieces. In the "Before Form" section, click on the CUSTOM button.

A text box will open. In that box, enter the following code:

 

echo '<script src="/includes/js/maskedinput/src/jquery.maskedinput.js" 
type="text/javascript"></script>';
echo '<script>
jQuery(function($){
     $("#ff_elem1176").mask("99/99/9999");
     $("#ff_elem1177").mask("(999) 999-9999");
     $("#ff_elem1178").mask("999-99-9999");
});
</script>';

 

** NOTE: If you upload the maskedinput files and folders to a different directory, then you will need to change the location in the script src above. **

 You can then replace the element IDs from the example above with your own element IDs, setting the mask format as needed. (Refer to the Input Mask documentation to see what formats are available.)

Now click on the SAVE button at the bottom of the screen to save your Form Piece changes. Then click on the SAVE icon in the upper right-hand corner of the screen to save the form itself. Now test your form -- it should work!

 

 

 

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!