FormBakery – Quick, Semantic Web Forms

If you’re a web developer, you probably spend a lot of time building forms. Unfortunately, no matter how much the process is abstracted, you’ll wind up repeating the same steps over and over again. Writing semantic markup, validating the input client-side, sanitizing it server-side… even with a form library, this is a time sink.

Enter Formbakery. Built singlehandedly by designer/developer Kumail Hunaid, Formbakery is a drag-and-drop interface for building semantic, standards-compliant HTML forms that send results to email. In its creator’s own words:

FormBakery solves a real problem. It helps you make web forms that are not just instantly deployable but also semantically coded, human readable, extensible and best of all – yours to keep.

My main problem with most form builders is that they’re bloated and overcomplicated. Not so with Formbakery. The user interface is simple, giving you just enough control to build your form — nothing more, nothing less. There are no color pickers or style choosers. No extraneous options. This is a product clearly designed for people who are comfortable with front-end code, and it shows more respect for our abilities than the typical WYSIWYG form builder.

FormBakery Editor

I usually take issue with the code produced by products like this, since they tend to rely on nested divs and unpredictable classes (looking at you, Gravity Forms), but FormBakery’s HTML is nice and lean. There are a few changes I would make — no need for the IE-specific classes, for instance, and I prefer to nest inputs inside of their labels — but this code is meant to be edited later.

Similarly, the resultant CSS isn’t the leanest out there, but it’s not meant to be used in its raw form. It includes some default pixel values (so, not responsive at all), but functions mostly as a placeholder until you’ve written your own styles.

The real advantage to FormBakery comes from its robust validation code. It includes client-side validation via JavaScript (dependent on jQuery, unfortunately), and server-side via PHP. As an added bonus, as long as the user has JavaScript enabled, the entire process will take place via AJAX, enabling a smoother user experience. The resulting form data is sent to the email of your choice, making it perfect for contact forms. With a little bit of tweaking, you could make the form populate a database, but this goes beyond the product’s original intention.

One of my favorite things about FormBakery is the independence of the resulting forms. The exported code doesn’t make use of any assets from the FormBakery server, ensuring it’s completely self-contained (with the exception of jQuery, pulled from the Google repository, as is common). To quote Hunaid:

A gripe I have with many of the form creators out there is that they keep part of your code on their servers. I don’t like the idea of relying on a third party for the forms on all my websites to work. With FormBakery I decided to provide every bit of code that makes your form sing.

FormBakery Export Code

The Verdict

FormBakery is simple, beautiful, and quite useful. With a simple pricing model — $5 per form — and a one-week money-back guarantee, it’s well worth your time to try it out.

Check out FormBakery here, and let us know what you think in the comments!

Fashion and Tech

Designer as Architect

Good Design is Thorough Down to the Last Detail

What I Would Wear on My Wrist

Metis NYC Product Design Bootcamp: Acquire Skills, Build a Career

Good Design is Long-Lasting (Part 7)

Good Design is Honest (Part 6)