Here at Wufoo central, we subscribe to Kathy Sierra’s school of thought on making our documentation and manuals just as great for our existing users as the marketing materials we create for our potential users. And so in our never-ending quest to create some of the best documentation out there, we’d like to show off some great improvements and additions to the organization and structure of our support docs since our last major update last year.

Main Support Page

The new support page features clearly defined action items for getting help and a collection of the most frequently asked questions about Wufoo organized by application category.

Improved Organization

The individual documentation pages now present an individualized table of contents and a mini FAQ about features and actions for that aspect of Wufoo. These pages have also been designed to be more scannable with more illustrations, screenshots and even movies where necessary.

New Support Request Form

It was time to upgrade our old bug tracker and provide a more structured support request system so we can better track and assign your inquiries internally. And yes, that’s just a good ol’ Wufoo form.

Improved Search

Sometimes the best way to help our users is to provide the tools needed to help themselves. With a little help from Google Custom Search, you can now get better and faster search results from information contained in our support documentation and forums.

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.

In addition to the new payment features, we are very excited to release a new version of Wufoo’s Entry Manager. It’s a complete rewrite from the ground up and we think it’s a winner. We always felt the old interface was more of a rough draft of how we wanted to have Wufoo help users explore and browse their collected data. We’ve been working on it for weeks bringing it in line programatically with our revised form builder. It’s brand new and with a lot of nice goodies, so please give it a run through and let us know if anything seems off. A complete list of upgrades and features can be found after the pic.

• Read Only View - While forms are great for entering data, they’re hardly the best for viewing it. The new entry manager now allows you to toggle between the old school editing mode and a new easier-on-the-eyes read only mode. All smart fields are displayed in a more convenient format and the underlying structures even use Microformats where appropriate (like names, addresses, links and files).

• Bulk Actions - In the Entry Manager you can now delete or export all entries in your form with a single click. Thanks to Bulk Actions in our new datagrid, you no longer need to create a separate report every time you need a custom set of data for Excel. Since it’s integrated into the revised datagrid, bulk actions can even be applied to just the filtered search results.

• Email and Print Entries - Thanks to the new Email and Print actions, you can now resend an entry to yourself (or anyone else) via email. This data comes in a new, styled email format that takes it’s cue from the new read-only view to help make things easier to process. Tested in all your favorite email programs (Hotmail, Gmail, Yahoo Mail, Apple Mail, Outlook), we think they look great. We’ve also adapted these styles for print, so you can now get your data out and styled in a similar, but printer-friendly analog format.

• Quicker Navigation - While you can still page through the grid and click on an entry to select it, we’ve also added a previous and next arrow for individual entries which will allow you to keep the mouse in one spot and just click to incrementally scan through your entries.

• Quick Search and Better Advanced Search - While the filter method was nice in the old Entry Manager, sometimes you just wanted to search things quickly and so we’ve added an easy no brainer search bar at the top of the grid that will search all fields for a matching term. If you click on the magnifier / up arrow, you’ll pull up an improved advanced search bar that will help you narrow search conditions at a more granular level. Filtering works the same as before, except now smart filters are applied based on the field type. For example, if you filter a number field, you can now select “Greater than,” “Less than,” or “Equals” as your conditions.

• Unique URL per Entry - Each entry now has a bookmarkable URL associated with it. This will allow you to save entries for later and jump straight to them without having to hunt for them in the grid.

• Improved File Handling - In the old Entry Manager, the file upload interface stored all attached entries in a module in the sidebar. It was sort of terrible and not intuitive. Thankfully, we’ve put the files where you’d probably expect them right there with the rest of the data, so you can properly associate which field the file belongs to. We’ve also added some nice new icons and additional data about each file when you view them.

• A More Intuitive Interface - For the most part, our primary goal for the Entry Manager redesign was to organize tasks and information into appropriate and relevant groups in the UI. The most common actions that you can perform when editing an entry are presented right there at the top. When you’re creating a new entry, everything is cleared out except for the task at hand and comments now have a more prominent role and position in the interface so discussions aren’t hidden from view. A lot of little touches went into this page and we hope you’ll have as much fun using it as we had building it.

After integrating PayPal into Wufoo, we got an overwhelming number of responses asking for more functionality and additional payment processors to be integrated into our platform. Based on this feedback, we’re happy to announce the addition of Google Checkout and Authorize.net to Wufoo’s payment systems. We’ve also jazzed up our current PayPal integration by adding the ability to create recurring subscriptions.

Google Checkout Integration

This was hands down the most highly requested feature addition to our payment system, and you’ll find that it’s probably the easiest way to hook up a form your Google Checkout account. To learn more about how to integrate your forms with Google Checkout, please check out our Google Checkout Documentation.

Authorize.net Integration

Authorize.net is a great alternative for those of you who need to process payments through your merchant account and cannot use services like Google Checkout or PayPal. This one tends to be for our non-profits and university institutions. It is a bit trickier to set up than the other two, but everything you need to know can be found in our Authorize.net Documentation.

PayPal Recurring Subscriptions

With our new recurring payment settings through PayPal, you can now charge subscriptions fees that automatically bill your users on a periodic basis. This is great for monthly and yearly services that you’ve processed with Wufoo. Just check off the “Recurring Billing” box in your payment settings and then choose how often you’d like your customers to be billed. To learn more about payment integration in general, a tutorial video and documentation can be found at http://wufoo.com/docs/payment-settings/.

Last night we went through a scheduled downtime that did not go as smoothly as planned. On Tuesday morning we received notice of the downtime from our datacenter and we sent out notification emails that day in order to provide as much notice as we could to our users. The maintenance was completely out of our hands, which is why we weren’t able to do this on a weekend. The third party insisted critical work was being performed, so we were given no say in the matter. The work was related to power outages, and they completed it in approximately an hour as they had predicted.

An issue occured, however, when Wufoo went back up with the way subdomains are resolved. Approximately an hour and a half after we came back up, we were notified that some accounts were not functioning properly because fo the subdomain issues. We were able to resolve the issue immediately and the servers became fully functional around 6am PST.

It seems that single points of failure continue to plague us when we experience downtime. As we did the last time we had an outage, we have scheduled time to sit down with our third party providers and figure out what steps need to be taken to avoid potential issues in the future. Our thanks go out to you for your understanding and patience as we continue to grow. We know many of you trust important parts of your businesses with us and we don’t take this responsibility lightly.

Two months ago we rallied up beta testers for our new form builder, and thanks to all of our testers we are proud to see it go live today. All around the builder should feel more solid and responsive. Approximately 90% of the code has been rewritten from scratch. While all show stopping bugs should be gone, please let us know if something looks amiss. A list of all improvements are below, and we encourage suggestions for the future.

Interface Consistency

• Fields use the same markup as live forms, and render special text (such as HTML) accurately.
• Field Instructions now show in the builder.
• Color coordination and functional consistency have been added to the form and field properties.
• Improved Tooltips and smarter / dynamic help messages.

Drag & Drop Improvements

• Drag to add. You can now add a field anywhere to your form by dragging and dropping it into the preview.
• Drag and scroll. As you drag, the page will scroll with you if you have a longer form. This works for both adding and reordering.

Speed Improvements

• The page load time for editing forms with a large number of fields (over 20) has been cut down dramatically.
• The browser no longer chugs when working with 25+ choices for checkbox multiple choice fields.
• Drag and drop and field editing speed has been improved.

Other Improvements

• Warning prompt if you try to leave the builder without saving.
• Drop down fields can now be made required.
• Bulk add for drop down choices.
• Predefined values now show up as you edit in the form preview
• Smarter default naming (so adding a phone or address field automatically starts the label as Phone or Address in the Field’s title)
• Additional languages and a quick preview link to your Translate pages.
• Field title now allows for more text.
• Delete key no longer deletes choices.

Foundation for Improvement

While the powerhouse features aren’t in yet (mind you, the new rendering and performance improvements were no quick fix), the backend is now ready for them. Here are some of the ideas in the works.

• Min/Max ranges for numbers, characters, and words.
• Automated Start/End dates for publishing active forms.
• Encryption on certain fields.
• Hidden fields on public forms.
• Multiple label alignments
• New fields: likert, rich text, page break, and a few more surprises.

Since we introduced foreign language support in April, we’ve been working hard to make sure that Wufoo provides the best experience for our international users who like to publish their forms in a language other than English. More importantly, we’re committed to making these forms just as good as the English equivalent and not just some sub-par transformation. To help the cause, we’ve created an interface to make it easier to submit and manage translations in Wufoo.

We encourage everyone to take a look at our new translation preview to see the steps we’ve taken to make submitting and reviewing additional languages in Wufoo more efficient. At a glance, you can now see which languages we have, don’t have, and kinda-sorta have. New languages, corrections, and suggestions are easy to submit, and will be actively maintained by our team. Additionally, this page allows you to preview the error messages and labels your users will see if you decide to change the language setting of your form.

During our last update, all error messages were put up for translation. With this update, all subtitled text is now ready to be translated. This will allow you to have a field like “Name” now show with the appropriate foreign language equivalents for the “First” and “Last” labels that show beneath the field (pending translation, of course). With this conversion made to all smart fields, our public forms will be fully translatable.

Now that public facing forms are complete, the goal is to add more languages (we’d love to get Hindi and Japanese in there) and move on to providing additional hooks to other public areas of Wufoo, like reports. Thanks again to everyone who has submitted languages in the past, and to those of you who will add and make corrections in the future.

Hello PayPal!

It’s no secret that our users want to attach the checkout process to their Wufoo form submissions. Hands down, with over 10,000 views, the most popular feature request to our team has been PayPal integration. The implementation challenge for us was a little tricky seeing that we wanted to implement it in a way that was both simple to understand and flexible for future upgrades. After months of development, we’ve come up with a solution that we’re quite proud of and are delighted to announce that you all can start making money today.

For those of you looking to jump right in, here’s what you need to know:

• PayPal integration is available for ($24) Bona Fide plans and higher.
• Just click on “Payment” in the Form Manager to get started.
• We’ve created a couple of Video Screencasts so you guys can see her in action—Thanks Mom! Intro to Payment Settings, Entry and Report Integration
• And we’ve provided some written documentation in case you need to study.

Once your form is payment enabled, all submissions will have the appropriate payment data associated with them. In the entry manager and in reports, you can view, filter, and graph the payment totals and easily see which payments are pending, paid and unpaid. You can even cross reference your PayPal account using the appropriate confirmation numbers. We’ve done our best to make the process as simple and seamless as we could imagine. We’re really excited about this feature and we can’t wait to develop it in the future. Please do try it out and tell us what you think.

The topic of IP addresses has been highly debated in the Wufoo headquarters. We have always collected them per submission for statistics and to limit one entry per user, but we have kept them away from your eyes so that they do not get abused. While not a huge security risk (since someone has to voluntarily fill out your form) we were leaning towards playing it safe. And then users began explaining their workflow, and how an IP address works similar to a digital signature by offering a way to locate where an entry came from. We’ve been working out a compromise to satisfy both thoughts.

IP addresses are currently tracked on public submissions. They are now available in the entry manager, reports, and exports, but come along with a few precautions. In the entry manager, you can see the address in the datagrid, and in a new section just underneath the datagrid. You can also filter by IP address. For reports, functionality is just the same except that the IP address is not a column that can be added/removed via the “+” in the top right hand of the datagrid. It has to be one of the columns showing on load to show in the report. This is to prevent users from unknowingly sharing every IP address on every public report.

Thanks for all of the feedback on the topic. We’re excited about the implementation, and about the new changes to the entry manager. Enjoy.