Free online form builder & website mockup tool: JotForm & Mockingbird

Since I am currently working on several (count eight) web development projects at the same time, life has been hectic but very productive. With my improved energy levels, I’m better motivated to learn and do more things at one go, but I felt that I needed to use more new arsenals in the form of web development tools that I hope can speed up the development process and the project as a whole. Preferably those arsenals are free and goes hand-in-hand with my prototyping methods of finishing my projects.

Wireframe Sketch clipped on my notebook One of the things I don’t really enjoy doing is designing forms. I have to think about client-side validation, and making the fields more appealing and user-friendly with tooltips and whatnot. However, since forms are an integral part of data entry in a web application, I can’t get away without it. And then, there’s the wireframing for layout and functional visualization, very important for documentation. I prefer pencil-sketching. It’s easier to control where everything goes, rather than using my mouse to navigate the precise location of a certain text within Adobe Photoshop or Fireworks. I have wireframing sheets printed out and hand drawn, and I would clip them into my handy-dandy notebook, which, at some point will be overflowing with stuff that it just won’t be practical to drag about.

I’ve just discovered and worked with at least two spiffy apps these past week that made project visualization and forms development much faster and easier for me.

Form created with JotForm JotForm is not only a form builder, but it also hosts the forms and data for you. I personally like the smooth design that comes with the form. It has the ability to not only get those validation and tooltips in, but it highlights the section of the form you are selecting. Once I’m done, I can either just use the embed code, or if I want to integrate the form with my database, I just copy the whole HTML layout with its CSS and JavaScript codes intact into my app, and voila, pretty form. Happy days.

Mockingbird screenshot And wireframing using a computer isn’t as bad as I thought after all. Or maybe it’s just Mockingbird making it easy for me. The widgets and forms that are available for me to use are just enough for me to design a nice website wireframe, and I particularly like the align grids that shows automatically every time I insert a new object in. Once I’m done, I can share the file with anyone I want without having to generate the file as another format and upload it elsewhere. Mockingbird is fast for a web application, most probably because it’s programmed with Cappucino / Cocoa, a relatively new open-source programming framework that runs on a client, giving itself the feel that you’re running a software that’s installed in your computer. Very impressive and very nice.

Evolus’s Pencil and Appnitro’s pForm deserve a special mention here; both look promising and worth a try when I have the time to spare. Pencil is a free prototyping/wireframing tool that to me looks even more powerful and richer than Mockingbird, and runs either as a Firefox addon or standalone app. The free AJAX-powered version of pForm provides a simple click-and-drag way to create forms from a variant of design sets available in the site; the commercial version, in the meantime, has MySQL, e-mail and autoresponder integration for unlimited amount of sites.

Comments are closed.