Early on in formIt’s creation, it became apparent we needed to be able to re-call the plugin to run on dynamically added form elements. No worries, we got that. We also made some recent updates to help out power users – showing which element has focus while tabbing through the form. These were both limiting factors with some of our old form solutions, we were able to bake all this into formIt.
We crafted the plugin strictly for our needs, nothing more, nothing less. We only needed support for checkboxes, radios, file uploads and drop-down selects – not multi-selects. Many libraries have a lot of code to support custom multi-selects, cutting this out helped keep the size of the plugin down.
We also needed to have complete control over the HTML and CSS on these elements. With the limitations in styling native form elements, we had to mock our own elements over the native ones. This allowed us to easily and flexibly customize our new, beautiful form elements. Need a super clean Symbolset icon for that check in your checkbox? No problem. Need a nice CSS gradient on your radios? Just target the HTML created by formIt.
formIt works a bit differently than your other normal jQuery plugin that is built off of its prototype,
$.fn. This plugin is attached directly to the jQuery object,
$.formIt. Boom, custom form elements. The CSS included is very simple to update for your needs. And, if you need more flexibility, you can update the html itself for the mocked elements created by formIt, then style until your heart is content.
We like to use the Symbolset for icons (gorgeous font-icons), and as mentioned above, they happen to have an awesome checkbox icon. For example, you could pass these options into formIt in two ways. Either globally for any calling of
// Set your global formIt defaults
$.formIt.defaults.checkboxHtml = '<span class="ss-icon">✓</span>';
// Initialize formIt
Or while calling
checkboxHtml : '<span class="ss-icon">✓</span>'
I prefer to just set the defaults and not think about it again, this was made to be easy.
We know forms can really be a pain, hopefully formIt can help you as much as it has helped us. Be sure to check back on the formIt Github page for more information, updates and the fresh code. There are also demos (see
demos/index.html) included on the Github page to help get you going. Go forth and formIt. Enjoy!