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.

Related post:  WordPress and Open Source CMS on Sabah Government Websites 2012

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.

Spread the love

Check out my other posts: « / »

Posted on 18 May, 2010 under Life at work, Web traversing and tagged with , , , ,

5 comments

  1. twapt says:

    Thanks for sharing , yes jotform is greet, also i use
    webformfactory com, wufoo, twapt.net – form builder

  2. i checked jotform, its great advice, i too dont like designing forms, whenever i do it comes out ugly ๐Ÿ™‚

  3. It looks complicated but I’m sure it’ll get more easier when I started using it. Thanks =)

  4. rosario says:

    thanks for sharing the free AJAXpowered ๐Ÿ™‚

  5. As far as hassle-free deploying of forms I prefer Contact Form 7 for simple ones or Gravity Forms for advanced workflows and data validation. I just don?t feel like handing all of my data to third party provider (like JotForms). For workflow mapping I often use mind mapping software like MindJet or bubbl dot us which is free and have several nice bells and whistles, but it always good to have hand-drawn sketch of the future project to look at when you?re not online.

    Thanks for sharing

    Dmitry

Comments are closed.