Hey form lovers, we’ve got something really special for you today. One of the great visions we’ve always had for Wufoo is that it would be one of the best resources for helping web developers and designers create beautiful HTML form interfaces. We think everyone is entitled to this, even if they don’t use Wufoo to power their backend. And so it’s with great joy that the Wufoo Team unleashes upon the world the Wufoo Form Gallery.

The Gallery provides HTML templates and CSS themes created by the Wufoo Team with our innovative Form Builder and Theme Designer. We’re launching with over 40 templates and over 40 themes and have plans to add a whole lot more. The templates and themes are compatible so you can use them with each other to mix and match as you please.

HTML Template Gallery


CSS Theme Gallery

From the front page of the gallery, you’ll notice that we’ve divided it into two sections: HTML templates and CSS themes. The HTML template section is organized into 7 types (forms, surveys, invitations, etc.) and 5 categories (business, personal, education, etc.). All of the templates are tagged and so some of them overlap into different areas, but that should make it easier to browse and discover some interesting ideas to use with Wufoo. We’ve also implemented a quick search that should help as we add more and more templates.

In regards to the CSS theme section of the gallery, everything is pretty straightforward. See a swatch that you like and it’ll show you a live preview on the right. The current crop of CSS themes only differ by colors—thanks kuler and COLOURlovers!—but we do have some sweet ideas in the works to showcase some fancy stuff over the coming months.

Now, there’s two ways to use this gallery. You can either download a zip of the HTML markup and CSS files if you’re hardcore (you’ll still need to do all the leg work to connect it to your own database) or, if you have a Wufoo account, you can install them with a single click to use and customize right way to collect data and pretty up your existing forms. All themes and templates from the Wufoo Form Gallery are provided under a Creative Commons Attribution License, so feel free to copy, distribute and adapt the themes and templates with abandon.

Regardless of how you use the Wufoo Form Gallery, we think it’ll be a great source of inspiration and a time saver for any developer or designer in need of putting something together quick. What’s exciting to us is that this is just the beginning. We have a lot of great ideas to make this one of the best resources out there and if you have any you’d like to share, please let us know.

For our designers out there yearning for more layout flexibility in their forms, Team Wufoo is happy to announce two exciting features we’ve added to the Form Builder that should put a smile on your silly designer faces.

Label Alignment

Under the Form Settings tab, you’ll find a new drop down setting that will allow you to align your labels on top of your fields (Wufoo’s default) or to the left of them with left or right justified text. It’s a great way to save on vertical space and depending on how fast you want your users to process the fields (remember top aligned labels are the fastest), you can control the rate at which your users process those interface chunks. For more information about the ideas and rationale between the different label alignments in forms, check out Luke Wroblewski’s excellent article on Web Application Form Design.

This feature is made possible thanks to the results of some experiments we’ve conducted on Wufoo’s form markup and primary CSS for styling forms. This alignment change is actually being accomplished through a single classname change. That’s right, the markup stays exactly the same for all three label alignments, which is great for accessibility and our designers out there using Wufoo just for the XHTML/CSS markup. Man, isn’t CSS great?

Advanced CSS Layout Options

While this is a feature that’s been labeled “Advanced,” it’s really very easy to use and can be a potentially powerful tool in your Wufoo design arsenal. This field setting basically adds the classnames you specify to the parent element surrounding the label/field chunk you’ve selected. Obviously, classnames by themselves don’t do very much, but we’ve added some built in stylings into the Wufoo Form CSS that when called will provide some nice alternatives to the defaults we provide within Wufoo.

For example, if you wanted to have a field sit next to each other before we added this feature, it was a pretty complicated process that required a bit of CSS web design knowledge and usage of our advanced properties in the Theme Designer. Now, you can just add “leftHalf” and “rightHalf” to the appropriate fields that you want to sit next to each other and the Wufoo Form CSS will do all the rest.

Other useful classnames you can play with are “hide”, which makes that label and field hidden (useful for pre-populating information you already know about your users) and “altInstruct”, which makes the instructions for that field show beneath the field rather than as a pop up box on the side. We’ll be experimenting with and releasing more CSS alternatives as time goes on. Paired with the bring your own CSS feature in the Theme Designer, Advanced CSS Layout Options provides a lot of room to play for our web designers wanting more granular control over the look and feel of their Wufoo forms.

Note: This feature does NOT update live in the Form Builder. After you specify your classnames, just save the form and you’ll see the classes being applied to your live form and the form in the Entry Manager.