In addition to updating the aesthetic to a more contemporary look (our little login t-rex got a nice upgrade!), the new design gives us a lot more flexibility to experiment with how we visually communicate the value of Wufoo to our newest users and fans. The foundation actually sits on top of a pretty cool responsive grid system that we designed in house, which means it should look pretty good on whatever screen is front of you. And don’t worry, while we did pack it with a ton of HTML5 and CSS3 goodness, we want you to know that increased clarity was our primary objective. Here’s a few of the things we did towards that goal:

• Built a modular slideshow system to communicate news and features much easier on any landing page.
• Designed a sticky table of contents to help users deep link and navigate the content on any landing page.
• We put our new promotional video at center stage on the home and features pages.
• Revamped our Features page away from being checklist oriented and focus on highlighting how our UI benefits users directly in plain English.

Try the Form Builder Demo!

One of the new toys that comes with this redesign is the ability to play with Wufoo’s Form Builder without having to create an account. Now, you can play around with or show off how easy it is to use Wufoo without having to login or fill out a bunch of registration fields. And if you like what you see, you can easily save the work and we’ll guide you into account creation when you’re ready.

Since we’ve always been dedicated to good type design around here (our last design actually featured a font we heavily customized that’s no longer in production and therefore was unique only to our site), we were delighted to be able to use one of our favorite integration parters, Typekit, to help deliver the typographic magic. One of the nice side effects of this change is we’re not communicating text in images anymore, which is going to make it a lot easier for us to finish up our international versions of Wufoo that we’ve been furiously putting the final touches on.

Think of it as a Preview

Currently, the redesign is limited to just the marketing stuff on the site, so you won’t see anything new when you login…yet. But I want you to know that we’re definitely planning to migrate both the feel and a lot of the lessons we learned over to the application side of things in the near future. Until then, we’ll be rolling out this bad boy to our other marketing pages, blog and documentation over the next few weeks. We’re really proud of new look and hope you guys enjoy all the little touches we put into it. Please do look around and let us know what you think.

Note that without a default choice, no answer is still a valid choice by the user unless you specifically mark the field as required. Also note turning on and off defaults works the same way with checkbox fields.

Here’s a quick video demo:

Thanks to Eric Hansen for the idea on this quick tip!

Little Green Light is a web-based software tool built for people who do fundraising from individuals. It helps you with the big picture like managing donor lists and segements, reviewing your progress, and scheduling events. They even handle the smaller details like updating individual donor information and recording the results of a phone call.

Wufoo is all about making collecting information easier, faster, and fun through web forms. Now with the new Little Green Light and Wufoo integration, you can build your forms with Wufoo and send the information they collect over to your Little Green Light account. This works by “mapping” the fields on your Wufoo form over to where you want the data to go to in Little Green Light.

Learn how to set up this integration.

In order to use this integration, you’ll need an account on Little Green Light as well as an account on Wufoo. For the watch and learn types, here’s a video tutorial:

Thanks to Nick Bicknell and his team over at Little Green Light for creating and supporting this integration!

We love to see integrations like this that are built to work seamlessly completely from the the integrating application. In this case, it was all done through use of our Login API, Forms API, Fields API, and WebHook API. Fancy stuff.

1. Click the Entries button underneath the form you want to export from the Form Manager. This will take you to the Entry Manager.
   
   

2. Click the Bulk Actions link to bring up the mass delete and export options.
   
   

3. Click the Export button.
   
   

4. Choose your file format preference: Excel (.xls), Tabs (.txt), or Commas (.csv)
   
   

And that’s it. Here’s a quick video demo showing it all in action:

To install the Wufoo Facebook App and get your Wufoo Form embedded on your Facebook Page, simple click the “Code” button beneath any form from the Form Manger, click the “On Facebook” tab, and click the “Add To Your Page” button. This will bring up a popup window to select which page you’d like to add it to. Select which page and add it, then head back to that page and click the newly-added “Wufoo Form!” tab to select which form you’d like to embed.

Screencast

Here’s a screencast showing how it all goes down:

Requirements

To integrate Wufoo on to your Facebook page, you’ll need the following:

• You’ll need a Facebook account.
• You’ll need a Wufoo account.
• You’ll need to create (or already have) a Facebook Page.
• You’ll need to install the Wufoo App (see above)

Please note that you can only have one Wufoo App installed per Facebook Page, which means you can only associate one form with your Facebook Page.

After you install the Wufoo App to your Facebook page, you’ll see a prompt to login to your Wufoo account to access the forms you’ve created on Wufoo. If you’re already logged into Wufoo, you’ll just go straight to a list of your forms. One of the really cool things about this integration is that from Facebook, you’ll be able to access a mini Form Manager that’ll make you feel right at home to those familiar with our interface.

One thing some of you will notice is that the embedded forms on Facebook do not show the Form Title or Form Description from your Wufoo form. This is because Facebook already provides a place for a header for the tab. To change that tab’s name, just follow these instructions for renaming the Wufoo App’s tab title. If you need provide a description or instruction to your users at the top of the form, just use a Section Break at the top of the form in the Form Builder.

Thanks a lot for everyone’s patience and testing while we worked out all the kinks. We’re really happy with how everything turned out and hope you all will enjoy collecting data from your favorite social circles!

Basic Features

This software (“wufoo_quizzes”) is able to extend the functionality of Wufoo by turning survey-like forms you build with Wufoo into quizzes that are graded. The user completing the quiz gets an email of their results or a certificate if they “pass” and the admin can get an email of the complete results of the quiz as a CSV file.

Dependencies

1. Server running Python
2. The Wufoo API Wrapper for Python : pyfoo
3. python-dateutil - pip install python-dateutil
4. django - pip install django

Step 1) Have a Wufoo Account & Create a Quiz

First, you’ll need a Wufoo account and a survey to use. The example I have tested this module with is about WWII history. Each quiz you use with this module will need a Name and Email field. Quiz questions are multiple choice fields, so they have one correct answer.

Go ahead. Make your Wufoo quiz. I’ll wait. If you just want to follow along with this tutorial exactly, we put this exact quiz into the Wufoo Template Gallery.

Just click the Add to Wufoo button and it will be added to your Wufoo account.

Step 2) Environment Setup

Now you need to prep a place to run the quiz grader from. Let’s make a virtualenv for that. Why, you ask? David Fischer makes it clear:

If you develop a Python module and you don’t test it with virtualenv, don’t make your next release until you do.

Virtualenv creates a Python environment that is segregated from your system wide Python installation. In this way, you can test your module without any external packages mucking up the result, add different versions of dependency packages and generally verify the exact set of requirements for your package.

If you don’t have virtualenv:

pip install virtualenv

Environment setup:

virtualenv --no-site-packages grader
source ./grader/bin/activate
pip install python-dateutils
pip install django

This prepares a Python environment that does not connect to your local root site-packages for dependencies and installs two of the three dependencies for this project into it. Now, download the code for wufoo_quizzes if you have not already. Unzip that in your choice location. Finally, we download our last dependency, pyfoo, which allows us to talk to the Wufoo API from Python. Unzip the .zip file you download from GitHub, then place pyfoo.py and the scripts folder into the same directory that contains quizgrader.py from wufoo_quizzes.

Step 3) Quiz Answers and Settings

Edit the answers.txt file in the wufoo_quizzes folder to contain the name of your quiz followed by new lines in a question: answer format.

Example:

WWII History Quiz
Which country or countries benefitted from the Lend Lease Pact?: Both
Which is a German field commander who fought a brilliant campaign on the Eastern front?: Manstein
When did the Allies break out of Normandy?: August 1944

You can place more quizzes in this answers file like so:

WWII History Quiz
Which country or countries benefitted from the Lend Lease Pact?: Both
Which is a German field commander who fought a brilliant campaign on the Eastern front?: Manstein
When did the Allies break out of Normandy?: August 1944

Other Quiz Name
Question 1: True
Question 2: False
Question 3: Honey Badger
Question 4: Vegas, Baby!

Make sure the question and answer text exactly matches what is on your Wufoo form. I copied and pasted mine directly from Wufoo after finishing the form.

You will also need to configure settings by creating a file named ‘locals.py’ in the same directory as quizgrader.py from wufoo_quizzes. You can copy and paste what you’ll need from quizgrader.py or the example setup below:

email_password = 'pw'
api_key = 'APIKEY'
wufoo_account = 'account' # this is the 'youraccount' part of youraccount.wufoo.com
smtp_host = 'smtp.gmail.com'
email_user = 'you@example.com'
templates = ('/your/path/to/this/project/', '/your/path/to/the/template/dir')
admin_email = 'admin@example.com'
admin_email_subject = 'Quiz Results'
success_message_text_alt = "This is an text only alternative message for those users pass the quiz"
required_score = 80.0 # 80% to pass
send_user_emails = False
send_admin_email = True

• Please note that the email_password is the password for your email_user on your smtp_host.

• api_key is the Wufoo API key from your Wufoo account’s API page.

• wufoo_account is the subdomain piece in ‘wufoo_account.wufoo.com’ which you can see when logged into Wufoo.

• The templates setting tells quizgrader.py where to find the template files that are included in the template directory. You can move those around if you like, but I had to give the directory of wufoo_quizzes and the templates directory to make sure Django could find the templates.

• admin_email is the email address that will receive the results from the grading in a CSV with the subject line of admin_email_subject.

• success_message_text_alt allows you to specify a text only message for user emails that pass the quiz. The default template for success is an HTML email which may not work in all email clients.

• required_score is the score threshold for pass/fail on your quizzes.

• send_user_emails and send_admin_email lets you specify if you want the system to send emails at all. All results are printed to stdout if not.

Step 4) Time to Take Over the World

Run the grader, receive emails, change your life! (Make sure you activate the virtualenv as above first.)

python path/to/quizgrader.py

You should see something akin to:

GreenEyedDevil:rgraham-wufoo-quizzes-tip rgraham$ python quizgrader.py 
WWII History Quiz Scores:
guy@example.com scored 0.00 percent on WWII History Quiz.
rgraham@example.com scored 100.00 percent on WWII History Quiz.
Sending failure message to: guy@example.com
Sending certificate to: rgraham@example.com

Users who fail the quiz will get a text email from the template failure.txt like this:

Users who pass the quiz will get an HTML email from the template certificate.html like this:

The admin will get a text email from the template weekly-email.txt like this:

The templates used to send emails are examples that you are welcome to use, but you may wish to include your own information in them. These templates use the Django template system and are easily modified to suit your purposes. Large changes, like what data is dynamically included in the templates will require you to modify the code, but any static changes can be made as easily as changing any text file.

Step 5) Extra Credit

Setup this script to run using cron. If you’d like to get results only from the last week, you can make some small changes to quizgrader.py to make that happen. Uncomment the if statement where you see (2 locations):

# FIXME make the date specifiable
#if datetime.datetime.strptime(entry[date_created.ID], "%Y-%m-%d %H:%M:%S") > (datetime.datetime.now() + relativedelta(weeks=-1)):

Changes weeks=-1 to whatever date range you have in mind. weeks=-2 for the last two weeks of results. days=-1 for the last 24 hours of results. You will probably connect this interval to your cron interval.

Disclaimer

This is a pretty light weight solution that is not suitable for extremely high traffic forms, but it might be just right for you or give you a starting point for building something more robust.

Questions?

You can also email me with requests or issues. I’ll do all I can to help. Thanks for following along and good luck quizzing!

Robert Graham is a developer, software entrepreneur, and consultant who maintains a blog about the experience. Robert has been working in software since 2005. He is a Ph.D. dropout who spent time working for Google. Someday he’d like to work for himself.

Let’s say you’d like to use data that you’ve collected through your Wufoo forms somewhere else on the web. Maybe you need to take some patient information you’ve already collected and move it into another system. Or maybe you have a recipe blog and you use a Wufoo form to collect submissions from the public - and you want to be able to easily move the best submissions into WordPress to publish. Automato might be just the tool for you! It is a browser extension for Google Chrome that connects to your Wufoo account and allows you to visually map data to form fields. No programming required!

Let’s let them show you exactly how it works:

So essentially you visually “map” fields from your Wufoo form fields on another form. If you can see that form on the Internet, you can get your Wufoo data into it.

Getting started with Automato only takes a few seconds. Head over to the main Automato site (must be using Google Chrome) and click the button to install the browser extension. After installation, you’ll see a tomato icon in your browser toolbar:

Click on it, then click on “Add Data Source” in the upper right. You’ll be taken to a page where you can add your Wufoo information (subdomain and API, which it helps you get) and then you’ll be able to select any of your Wufoo forms as a “data source”.

Now when you’re on any page on the Internet with a form on it, you can select a Wufoo form as the data source, and drag the red squares underneath the fields to the red squares attached to the form fields to map them. Then you’re all set. Clicking on any entry in the Automato window will prefill those fields with the correct data.

Thanks to Adam Varga, James Saadi, and the whole Automato team for building this very cool integration!

One of the most powerful ways to integrate with Wufoo is through our WebHook notifications. This allows the data that is collected from a Wufoo form to be sent anywhere else on the web instantly. But in order to use WebHooks, you need a a domain name, web server and a bit of programming skill.

Sound complicated? Don’t want to deal with it? Enter itDuzzit, a web service that is specifically designed to be the middleman in situations like this. You can set up itDuzzit to accept incoming WebHook notifications and then pass that data along to other places. All without doing any programming. Here’s some examples of things you could do with itDuzzit:

• Perform calculations on form data. For example, grade a quiz. One user created a Wufoo form to log every time he rides his bike. Then that data is sent to itDuzzit which calculates the Carbon emission savings, and then that is posted to Twitter automatically.

• Save up data for later. One user sends Wufoo data to itDuzzit, which then saves the data for a week and then sends him a summary of data collected each Monday.

• Create a brand new integration. You could send contact form details to a CRM (e.g. Contant Contact) that Wufoo doesn’t yet have an integration with. Or you could send that data to Twilio and create an instant-callback system.

• Extend a current integration. Wufoo does integrate with Highrise, but through itDuzzit, you could have a form update a current contact in Highrise, rather than automatically create a new one.

• Update a Google Doc with new data. This one already exists!

In order to use this integration you need both a Wufoo account and an itDuzzit account (both have free versions). You can then follow their in-depth guide: “Integrating Your Apps with Wufoo using WebHooks”. Once that’s set up, check out their documentation on Duzzits (the fun part!) where you send off the data to other places. You can build these yourself or choose from their ever-growing library of pre-created ones.

Thanks very much to the itDuzzit team for creating this integration. We hope you have fun with it! Please share any cool connections you build with it in the comments.

If you are a user of the email marketing service ActiveCampaign, commence the rejoicing! Their new Wufoo integration allows you to add people to your mailing lists directly from your Wufoo forms.

Now you get all the great stuff you automatically get with a Wufoo form (validation, notifications, stunning good looks, etc) and have it work with your favorite email marketing service.

To use this, you’ll need an account on both Wufoo and ActiveCampaign. Then follow their documentation on how to set it up. You’ll be growing your email subscriber list in no time!

This integration uses our WebHook notification system, which can send real-time data from form submissions to anywhere on the web. Cool huh?

1. Build a Payment-enabled Form with an Address Field

You’re all probably old pro’s at this, but just in case, you can learn about building your own forms here and making them payment enabled here. Just make sure your form is collecting an address that’s collecting the Country your user is from—a very easy thing to do with our fancy pants “Address” field.

2. Add a Checkbox for International Shipping

Don’t worry, your users won’t see it. We just need it there because we are going to attach our fee to this particular checkbox and control it programatically from the back end.

Create a multiple-choice field with 1) only one option labeled “International Shipping” 2) No title 3) Pre-checked (click the checkbox next to where you label it) and 4) has the CSS Keyword “cloak” (this will keep it invisible).

3. Add a Field Rule

To make this international shipping charge conditional based on the country they select, we need to add a Field Rule. Back at the Form Manager, click the Rules button beneath that form and click the New Rule button to add a new Rule.

What we want to do is HIDE our international shipping checkbox (so it won’t be a part of the payment calculation) in the event that the country dropdown be either blank or our home country.

4. Attach a Payment Amount to the Checkbox

The logic is now in place. If a country is selected that isn’t the home country, the checkbox for international shipping is “shown” (still visually hidden, but now can participate in payment calculation). We just need to make sure there is a value attached to it. Head back to the Form Manager and click the Payments button beneath the form.

This screen is where you set up all your payment settings, including assigning prices. In this simple example, there is a base price of $15.00. We then selected the checkbox from the “Assign Prices to Field” dropdown and applied the $5.00 fee.

5. And You’re Done

That’s all there is to it! If you want to see it in action, see our live example here. You can see it work in the Running Total area of the form. And if you submit the form, you’ll be redirected to PayPal where you can see the correct total passes along.