Here at Mindgruve, we do custom everything – and forms are no exception. Many times it can be difficult to choose a JavaScript or jQuery library and just go with it, especially one that will work for any project we take on. We needed something flexible, that we could style with as much CSS as possible. I found myself continually hacking plugins to add HTML or a piece of functionality, but it quickly became unmanageable. This was the moment where we decided to build our own jQuery plugin for custom forms, and formIt was born.
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.
As with anything in development, it’s a work in progress. We add to formIt as needed, but we feel it is solid and production ready – it’s running on most of our sites right now. We host it on Mindgruve’s Github account, so everyone has access (push requests are welcome). And, we use the absolutely awesome Grunt JavaScript Task Runner to help us keep our code in line. If you haven’t used grunt yet, and you build a lot of plugins … go get grunt set up with grunt-init-jquery, it will save you time.
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, $. It is meant to be used rather thoughtlessly, just add the JavaScript, and the CSS, and call $.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 formIt.
// Set your global formIt defaults
$.formIt.defaults.checkboxHtml = '<span class="ss-icon">✓</span>';
// Initialize formIt
$.formIt();
Or while calling formIt.
$.formIt({
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!
