The Wufoo Blog

Archive of Tips & Tricks

How to Set Up an Out of Office System at Work (Your Colleagues Will Thank You)

By Michael Lim · February 25th, 2015

Guess what? We’re all human. Yep, and we working humans need to sometimes take sick days or need a personal day or even (gasp) take a vacation! And since it’s important to be a team player at work, letting your colleagues and the boss know when you’re out is key.

Say hello to your Out of Office email notification. Even better news? Wufoo can help you create a powerful and communicative Out of Office system so you can keep everyone informed of when you’ll be out and your coworkers too. So let’s walk through some of the basics, and maybe even cover a few more advanced options.

Ready? Let’s get started.

The first thing to do is consider what sort of information you’ll need to collect. At a bare minimum you’ll want to record who is going to be out, and when they’ll be back. You can go further and ask for some additional details like why they’ll be out (Vacation, Sick day, etc), but the specifics will depend on your particular situation. For now, we’ll keep it simple:

Now that we’ve got that all set, let’s move on to Notifications. Having an Out of Office calendar doesn’t do much good if no one knows about the requests, so we’ll want to add a Notification email to let the requestor’s supervisor and team know that they’re going to be gone. This is done through the Notification Settings menu, by clicking the aptly named “Notifications” button under your form:

In this example, we’re just dealing with a small team, so we can list out everyone’s email address separately, but if you’re dealing with a larger group you might want up to set up a mailing list alias for your team. That way you can just add the single address, and have your mail system automatically send a copy to each individual. This has the added benefit of not requiring any modifications if your team changes personnel. Just update the mailing list and you’re good to go, no need to edit your Notification Settings.

And there you have it! A simple, easy Out of Office system for keeping everyone on your team on the same page. That’s really all you need, but hey, since we’re on a roll, let’s go over a few optional improvements.

Alert! Alert! Bonus How-tos Ahead

Google Calendar: If you want to track all your Out of Office requests in a single online calendar, you might be interested in our integration with Zapier. Zapier connects Wufoo to dozens of other apps, including things like Google Calendar, and can allow you to do things like create new events on a calendar.

Sound cool to you? Check these out:

Zapier Integration and Wufoo and Google Calendar

Dynamic form: The form we built above is pretty basic, but with a few more minutes we can take things to the next level. Using Field Rules to dynamically hide and show fields only when they’re necessary will allow you to have to have the benefits of a longer, more complex form, while still keeping things as simple as possible. For example, maybe you only need to collect an emergency contact email if the user will be gone for more than a week

or you want to allow users to upload a copy of a doctor’s note if they’re taking a sick day

You can even use Field Rules to set up some basic restrictions on dates, such as requiring all requests to be at least a week in the future:

This is done similar to setting up an “age gate,” that you can see here.

You can find more examples of how you can use Field Rules here and in this Back to Basics blog.

And there you go, intrepid humans! We hope this how-to on setting up an Out of Office system makes you beloved even more than you already are amongst your coworkers and colleagues.

Questions for Michael? Let him know below!

CSS Tips ‘n Tricks Series: The Sequel

By Kane Stanley · February 6th, 2015

A few weeks ago, we started a brand new CSS series by teaching you how to create your own CSS stylesheet and add that to your Wufoo form. Today we’re going to stay simple and learn how to change parts of your form when you hover over them. This is done through a really easy selector:


The :hover selector is an absolutely simple and brilliant way to liven up your form. The most common use for the :hover selector is on hyperlinks. You know when you hover over a link and suddenly it’s a different color and underlined? That’s the :hover selector at work. We’re going to use the form and stylesheet from our previous post to show a couple of examples of the :hover selector at work. Let’s get started.

Remember the simple CSS we used last time to change the border color, width and radius through CSS? Let’s use that same image and change the border color when the user hovers over the image. Here’s what it’ll look like with the CSS from last time with it:

Where you see img:hover is where we change the border color. Now, if you hover over an image in your form the border color will change #261E1E. That’s black to you and me. Let’s check out a before and after shot:

As you can see when you hover over that image, it changes from burgundy to black. That’s about as sweet as the shark tattoo in the image! It’s a subtle, but great way to make your form interactive and a bit more fun to fill out. Ready for another example?

Let’s say you have a multiple choice field and you have images as your options in the field. You could make those images appear transparent at first and become more visible when you hover over the image. It’s also very simple to do. The class for the multiple choice selections is .choice. All you need to do is make those images transparent by default and then pull them into full view when one selection is picked. That can be done with opacity.

We want to make the images to be at least slightly visible at first so an opacity of 0.5 should suffice. We’ve then added :hover to that class to show the full image when the user hovers over the choice. How will the finished product look?

Want to see the form in action? Well, naturally. Check out our video snack below and stay tuned for more ways to improve your form through CSS!

Have more CSS questions? Leave them for Kane our CSS guru down below—we check daily!

Tweet! Tweet! How to Tweet Your Form with Wufoo

By Zachary Ralson · January 29th, 2015

Hey there, Form Builders and lovers of all things social—media that is! Recently we revamped (and re-revamped) our Share Page, our one-stop page where you can explore all of the different ways to distribute your forms—including embedding it into that fancy pants website of yours. And don’t worry, we’re keeping this tip short ‘n sweet—all the more time you’ll get to spend on form-building.

So, let’s get social. Behold the “Share On Twitter” section of this mighty Share Page of ours:

With a single click on the “Tweet” button, you’ll be able to share your form out into the Twittersphere via hyperlink. Clicking the Tweet button will then open Twitter in a new window where you can log in and tweet the populated form link:

The first time you send a tweet from one of your forms, you’ll be prompted to enter your email or username and password. Once you’ve logged in you’ll be able to tweet all the tweets.

When you think about it, Twitter and Wufoo make a great match—it’s a simple and effective way to get those forms out to a fresh audience quickly and easily. One quick click and you can be collecting information, from demographics to sales leads and whatever else you can dream up from your followers.

And…wait for it—here are a few more examples of that sweet Tweet button in action (cuz why not?):

And there you have it, form fans. With this nifty feature in your form-building toolbox, your potential for reaching out to current and future customers is that much greater.

Have more burning questions? Don’t forget to check out our Guides page and get ready to get enlightened on all things form-building and more!

3 Tips for Optimizing Your Wufoo-CRM Integration

By Mike McNulty · January 23rd, 2015

Heads-up, form fans! Give a warm welcome to our honored guest blogger, Mr. Mike McNulty of Solve CRM. Sound familiar? Good, because we’ve blogged about these CRM all-stars before and when Mike asked if he could share some pro tips with all of you on how to maximize that sweet CRM potential of yours? Well, what do you think we said?

Get ready for some CRM wisdom, people. Take it away, Mike.

If you’re running a business website, you’ve probably got an online contact form embedded into your site so visitors can submit inquiries, sign up for your newsletter, request a demo, or get in touch with you for just about anything else.

And it’s likely that you use a CRM (Customer Relationship Management) system to store the customer (and potential customer) data you collect. But how do you get the customer info you’re collecting via your website forms and the data you’re collecting from other landing pages and marketing efforts all into one place?

It’s easy! Your website visitor data can be automatically transferred into your CRM using a Wufoo-CRM integration. (Check out all available integrations here!) And once you’re all integ-ready, there are 3 things you can do to optimize your Wufoo-CRM powerhouse. Ready to learn? Of course you are.

1. Capture & Categorize

The #1 rule for optimizing your Wufoo-CRM integration? Be flexible. The more choices you include in your forms, the more comfortable your visitors will feel giving you their information. Plus, it’ll be easier to personalize how you follow up with them. So make sure any form on your website is set up to include the right fields.

A good place to start is with a dropdown menu. For example, sort your contacts by asking site visitors, “Why are you contacting us today?” And when you ask for email and phone number, ask them to tell you which method of communication they prefer. You can even include a file upload field so existing customers (and potential clients) can submit photos or other documents. That way you’ll contact them, ready to offer feedback, tips, or price estimates.

In short, your CRM should enable you to capture data using varying form fields—and tag contact records as they arrive, so that your data are given the right context. Websites that collect different information from different types of visitors should consider using separate Wufoo forms with unique fields and tags. With better data and more context, your staff can qualify leads more accurately and make faster decisions.

2. Automate Next Steps

Staff love when you make their lives easier, and you love it when there are no cracks for things to fall through. So when you capture a visitor’s data from your website, make sure they get assigned to someone automatically, and that their record is shared with the right people. Any series of tasks that need to be performed should be created and assigned immediately. Perhaps future emails should be scheduled or “Welcome!” phone calls planned. And if there are help desk tickets or emails related to this person, those should all get linked to the contact record as well.

Many teams need contacts, tasks, and events synced to particular member’s Google Apps accounts. You can also help your clients automatically maintain their profile with you by having your CRM simply update their record as they fill out your Wufoo forms. This helps centralize your client data and prevent duplicate records from weighing you down. With all the meticulous and repetitive work automated your team can focus time and energy on clients.

3. Take Action

Here’s where the fun really starts because your team can now begin to leverage your setup, and use your CRM to demonstrate value to your new leads.

Scheduled emails are being received. Follow up phone calls are being made. Prospects  are being added to marketing campaigns. Projects are being set up and shared while draft invoices are being prepared. Your existing customers and potential clients will think you have an army of staff dedicated to them.

Every step of the way, updates are being made and shared centrally in your CRM. So when a prospect calls you, you know exactly what they are talking about. Or if the client emails you, you can see their entire history in Gmail, so you’ll know how to respond appropriately, without even jumping back into the CRM.

Your business should seem like a surprise party for your prospects. Your team should seem like a well choreographed group of friends, welcoming them with a shower of personalized service, delivered with effortless efficiency. Wufoo helps trigger such a party when it’s integrated with a CRM that leverages other best of breed apps: email apps like Google Apps, accounting apps like Xero & Freshbooks, campaign apps like MailChimp & Constant Contact as well as Zendesk for helpdesk and RingCentral for incoming phone calls.

Remember, online forms and CRMs are helpful on their own, and once they’re connected, they can turn your business into an automated powerhouse.

For more information on how you can get started with Solve CRM or if you just want to give a “Hey there!” to Mike, click!

Say Hello to CSS: Introducing New Tips ‘n Tricks Series

By Kane Stanley · January 7th, 2015

We all know that you can use the Theme Designer to make your form look absolutely wonderful, attractive, lovely, beautiful, brilliant…and we’ll stop now before we get too carried away. (Too late.) It may be a little less well known, however, that it’s possible to use your own CSS in a theme to fully customize the look and feel of your forms.

So we’ve already whipped up a nifty blog post that gives details on how to use custom CSS in a Wufoo form. This post is ace and can really help you add custom CSS to a form.

But for those of you wanting to get down into the real nitty gritty on creating your own CSS style sheet from scratch—this post shall reveal all. Even better, we’re not stopping at just one post either: Say hello to our CSS Tips ‘n Tricks kickoff Series! We’ll be sharing cool CSS how-tos designed to make your form look even more attractive than say, a stunning beach sunset (really).

In our first installment, we’ll walk you through the steps you need to create a CSS style sheet through Notepad, upload that to Dropbox or Google Drive, and apply it to your form.

Ready steady? Let’s go.

1. Create that CSS on Notepad

Let’s start by creating our actual CSS. Generally when Notepad is mentioned, you might hear people asking why the heck you don’t use Word instead. Well, Notepad, we’re on your side for this one. Open up Notepad and add your CSS. For our first CSS trick, we’re going to keep it really simple. We’ll put some nice curves on all our images in the form and give them a reddish border. That’s going to make all your pictures look mega-cool:

We’ll check out how that looks later, but for now let’s Save this so we don’t lose it. Click File and Save As. This bit is important so pay attention! You’ll want to save the file with .css at the end of the name. That will make sure your file is saved as a CSS style sheet rather than just a Notepad file. It should look a bit like this:

Congratulations. You’ve just created your first CSS style sheet. In order to apply that to a theme in Wufoo, you have to host that sheet on the internet somewhere. This can be hosted on your own website or any hosting site that will host your files using https. We’re big Dropbox fans, so let’s go that route first.

1. Upload your CSS to Dropbox

Uploading a CSS file to Dropbox is simple. Head over to and log in to your account. Once you’ve done that, click the Upload tab as shown here:

Once you’ve uploaded the file, find it in your list and hover your mouse over it. A SHARE button should show up. Just give that a click and you should see this:

We’re really close to having the finished link but there’s just one more thing. If you were to share the link as is, you’d quickly discover that the CSS doesn’t work. That’s because the link ends in dl=0. The details behind that not working are a bit boring so we’ll spare you. Just change the end of your link to dl=1. Once you’ve done that, you’re all sorted. Add that link to the custom CSS section within your theme designer and your CSS will show up in the form.

3. Upload your CSS to Google Drive

Some people prefer to use Google Drive over Dropbox and that’s completely cool. There are a few more steps needed with Google Drive, but it’s still pretty easy to upload your CSS to Google Drive. First you’ll want to log in to Google Drive and create a public folder. Once you’ve done that, click in your folder and upload your CSS file to the folder.

Just like with Dropbox, you still have to get the correct link to use with Wufoo. To do that, click the Information button in the top right corner of your page. Make sure that you click Details and that your sharing is set to Public on the web. Once you’ve done all of that, you should see the Hosting link. That’s the link you need to add to your theme. Here’s a visible step-by-step:

4. Add the link to your theme and enjoy

This is the easy bit. Just add that link to your theme via the Theme Designer and apply your theme to your form from the Form Manager. Let’s have a look at our finished product.

Check out those sweet curved edges and cool reddish border, eh?

So we wanted to take you through how to create the CSS from the ground up this time and we hope it was insightful. Stay tuned for more CSS tricks to make your form look (and feel) fantastic.

Questions, comments for our Hails-from-Leeds expert, Kane? Let him know below!

Your Top 3 Support Questions Answered

By Emilie Sanchez · January 5th, 2015

Happy New Year, Wu-friends, Emilie from Support here! It’s a new year which means you get a new start. But 2014 isn’t too far behind us just yet. And so in the spirit of bringing what we’ve learned from the past into our form future—we’re here to share the top 3 support questions that you, dear customers and form ninjas, have asked us about in the last year.

If you take these 3 tips—along with Michael’s handy 3 common pitfalls to avoid blog—into the new year with you as you create those fab forms of yours? Well, then we guarantee you’ll be set for genuine form success in 2015.

Let’s get it going, shall we?

1. Help! How do I reset entry IDs?

Since you’re a savvy form builder, you know to submit a few test entries to your Contact Me forms before it goes live. The form performs just how you want it to, so now you can delete those five test entries. After you do, the first entry in the Entry Manager is numbered 6, not 1—even though it’s currently the first entry in the list.

No matter which entries are deleted from your account (and when) the entry ID associated with each entry in the form will remain the same. This ID number is hard-coded into our database, so there isn’t any way to update it. Being aware of this will help you keep track of all the submissions your forms have historically received.

What’s the work-around if you need to start numbering entries from scratch again? Duplicate the form and collect real entries through the duplicate. When you duplicate a form, none of the entries are carried over, so any new entries collected there will start at 1 again.

2. Argh! Having SSL issues. What can I do?

We’ve enabled SSL security by default for all forms free and paid. So this means that the data submitted will always be secure, whether you’re sending out the direct form links or embedding them in your site with the code we provide you.

However, SSL encryption can cause a conflict with CSS-hosted themes, which many of you have written in to us about. If you’re hosting your form theme with a custom CSS file, make sure that the CSS file is loading over SSL as well. There are several great sites that generate SSL URLS for free, like Dropbox or Google Drive.

We can tell the example theme below is SSL-encrypted, due to the https:// in the hosted file URL:

Is your CSS styling not showing in the live form? Here’s how to resolve the issue:

  • Host the CSS file somewhere else, where it is encrypted.
  • If you prefer to avoid all SSL browser conflicts, you can remove SSL from both the hosted CSS file, and your form. Click here for instructions on how to disable SSL on your form.

3. Show me the way of templating, please!

Aaah, Templating. One of the most powerful and useful tools in the Wufoo bag o’ tricks can sometimes be tricky to get the hang of. And for those of you out there not already familiar, this feature lets you pull form data into the confirmation message and email, and notification email. Translation: The people who submit an entry will receive a personalized confirmation email/message including their name, email address, or any other information they inputted to specific fields! Or simply—when new entries come in, your colleagues can see the Entry ID, date it was submitted, or even the total amount paid, all at a glance in the subject line of the notification email.

Templating has two components:

→The Template tag →The Parameter

The template tag is what tells the system to pull either field or entry data. The parameter tells the system specifically where to pull that data from. Let’s see how this works using my Contact Me form as an example: I want the Confirmation Message to show the date the user selected.

First, navigate to the Confirmation Options section of the Form Settings tab. Below the confirmation message text box, click Templating Options.

The API Information page will open. Take the ID number of the field that you want to draw data from, and note that this doesn’t always correspond with the order that fields appear in the form. In this case it does: The Date field is also API ID 1.

Head back to the Form Settings tab. The template tag for pulling field data is: {entry:Field#}

Combine this with the parameter: The API ID number. Replace # with 1, and place this tag where you want the date to appear in the message. So when you’re all finished, this is what the Confirmation Message will look like from your end:

But after submitting an entry, the users get the personalized message:

Awesome, right? For those of you who’d like a more detailed Templating walk-through, check out Aubri’s great blog.

Thanks for reading and as always, please feel free to leave any comments, questions, or suggestions below. Form on, friends!

3 Common Error Messages & How to Fix ‘Em

By Joss Unzicker · December 5th, 2014

Season’s Greetings, dear Wufoo-ers! It’s the perfect time of year to heat up a mug of hot cocoa, grab your softest blanket, and snuggle up at your desk for a cozy day of form-building. But don’t get too comfy just yet. Today, we’re going to dive deep into three common error messages that users occasionally run into when getting down to form business. While the following three errors may throw off your form-building groove at first, we’ve got in-under-a-second changes for each one that’ll get you back to building in no time.

Let’s jump right in, shall we?

1. Required Drop Down fields and Default Answer Options

Scenario: You’ve just completed building your form and so far things look great. The time has come to run a test through. When you click the Submit button you’re looped back around with a big red !error! around your required drop down field. “But there’s a legitimate answer there,” you protest.

Chances are that your legitimate answer choice is the default answer option for your field.

Why am I getting this error?! Well, when you make a Drop Down field required, the user must select a choice other than the default answer. When a user selects the default option (the one that is selected when the page loads), Wufoo will consider that as not making a choice and will display the dreaded error.

Fix - You have a couple of options here to clear this up. You can:

    Remove the Required validation from the field settings, since it will submit a choice anyway OR

Add a blank answer first

Add a choice with Choose One as the default answer. That way, the user has to select something other than blank or Choose One to complete the submission.

2. HTML errors and “NaN” in the form builder

Scenario: You’re making the final edits to your form in the form builder and suddenly you realize that you can’t use Wufoo’s awesome drag and drop functionality to rearrange fields on your form. You also see this cryptic NaN message in place of the field number when looking at some of the field settings.

Why am I getting this error?! Both of these “symptoms” indicate that you have an HTML error in the content of one of your field labels. Even the tiniest of errors can make the form builder go a bit loopy. Typically our users run into this when an HTML tag isn’t closed all the way.

Fix: To resolve this, you’ll want to first locate the error in question. You can easily do this by taking the following steps:

  • Open up your Form Builder
  • Click on each of your fields in the form design to open up their field settings. Find the first field with NaN. displayed instead of the field number.
  • Click on the the field directly above that one in the builder. This is likely the field with the HTML error. As mentioned above, typically the issue is the HTML tag being left open.
  • Make edits to the HTML as needed
  • Save Form
  • Once you save you’ll be able to use the drag and drop and those pesky NaN messages will be replaced with the field numbers again.

    3. Exclamation Points in the Rule Builder

    Scenario: You’re getting fancy with a registration form and have decided to use field rules to dynamically SHOW fields depending on the number of registrants the user has. Here is your vision: If the user would like to register 4 people, 4 name fields will display. If you a user would like to register 1 person, 1 name field will display. When you go to save your fabulous rules you get a bunch of glaring yellow exclamation points!

    Why am I getting this error?! Our rule builder can’t SHOW or HIDE the same field in multiple different rules.

    Fix: To patch this up, you’ll want to add multiple conditions to a single rule, by using that grey plus sign next to the first condition.

    Instead of a separate rule for each registration, you’ll want to set it up so that a single rule reads:

    “If how many campers would you like to register?” is 1 OR “If how many campers would you like to register?” is 2 OR “If how many campers would you like to register?” is 3 OR
    “If how many campers would you like to register?” is 4 SHOW 1.) Camper Name

    Whenever you see those exclamation points in the rule builder, you’ll want to ask yourself, “How can I consolidate multiple rules into a single rule with conditions so that there aren’t any conflicts?”

    Using multiple conditions will ensure that your form rules work as intended and will eliminate those big exclamation points when saving/editing in the rule builder.

    There you have it! Hopefully these tricks make some of Wufoo’s more daunting errors more approachable. Of course, if you run into any error messages that you’re unfamiliar with and can’t find info in our docs, feel free to reach out to our support team at any time.

    Two Quick Tips to Optimize Your Time with Wufoo

    By Johan Lieu · December 2nd, 2014

    If you’re anything like us here at Wufoo, as the end of the year approaches, it seems like you’re getting busier and busier and there’s less and less time to get things done. Luckily, you run your business on Wufoo and we’ve got you back. Here’s two quick tips you should do now to save time each and every day.

    Setup Email Notifications

    This is the most important Wufoo tip you’ll ever read. Turn on email notifications and you’ll automatically get an email notification whenever someone submits an entry to your form. I can’t stress this enough and how important it is to help you save time.

    Now instead of worrying whether or not you’re getting any submissions to your form, you can instead rest easy knowing that when a potential customer fills out your form, you’ll instantly know about it and act on it. The email we send you also includes all of the form data so you can easily view the info and decide if you need to act on it right then and there or if it can wait. If you’re using Wufoo to run your business, you know that the slightest delay could cost you a customer and sales. So, please, for me, turn on email notifications for your most important forms. You won’t regret it.

    Integrate Your Form with Other Apps & Websites

    The second best way to save yourself some time and effort is to simply integrate your form with any one of our numerous integrations. Tons and tons of apps and web sites have integrations with Wufoo and help save our customers tons of time every day.

    Have users or customers uploading files (say photos for a quote on painting a room)? You should definitely integrate with Dropbox and have your files automatically sent to Dropbox where they will sync to all of your devices.

    Using a Wufoo form on your web site to receive leads from customers or clients? Make sure you read our blog post about the most popular CRM’s that Wufoo integrates with. Coupled with email notifications, you’ll automatically know when a lead comes in and your CRM will track your entire lifecycle with that customer.

    Have you setup a mailing list sign up form so that your users and customers can get more information about your services or receive updates about deals or sales you’re having? It’s time to integrate that form with any of our email integrations like MailChimp, Campaign Monitor, ActiveCampaign, Sendloop, or INinbox. New email address comes in? It’ll automatically show up at your email integration of choice, ready to be acted on.

    The possibilities are endless. You can combine any number of our integrations with your forms to help you create a powerful and time saving workflow (like a sales lead form that sends your lead information to Salesforce, sends the lead’s email address to MailChimp, and sends any uploaded files to Dropbox). And you’ll also instantly receive an email notification (because you set that up already, right?) when the lead comes in which includes their phone number so you can call them right away.

    By using email notifications and any number of Wufoo’s great and easy to use integrations, you’ll be saving time in, uh, no time. And you can get back to running your business and living your life. Got a tip on how you use Wufoo to save yourself time? Share it below, we’d love to hear about it!

    How to Use Wufoo in the Field: Kiosk Mode

    By Zachary Ralson · November 7th, 2014

    Hey there, Form Builders! Get ready to be enlightened on one of the most frequently asked questions from you, dear customers—“How do I create a form where people can take it over and over again?” Sound familiar? Picture it. Say you’re at a live event like a conference or a concert or even if you’re at a business meeting and need to let people fill out your form repeatedly. If this is you, you’re in luck! By making a few quick changes to your form settings, you can have this sort of “kiosk” set-up using any of your Wufoo forms.

    In short, what we’re going to do here is link the form back to itself to create an endless loop of that form. This is possible on any of our paid plans.

    1. Once you’ve created the form you want to use, navigate over to the Code Manager to find the link to that form. We always recommend using the Short Link URL in case you want to change the name of that form.

    2. Copy that URL and head back to the Edit screen for your form.

    3. Place the URL in the Redirect to Website field in the Form Settings. This will link the form back onto itself. Every time a person hits the Submit button at the end of the form it will reset and load up a blank form ready to receive another entry.

    Pretty nifty, eh? This will even let you utilize any other features you want on the form, so it won’t interfere with confirmation and notification emails. You can send a confirmation email to anyone who submits the form. Check out this example.

    Now, suppose you want to set up something like this on a tablet and you’re sending someone out to collect signatures or take inventory of something in the field where they won’t have access to a wifi connection. In that case, you can use an integration created by Device Magic to save information on the device and upload to the Wufoo database later.

    We’ve got tons more information on our integration with Device Magic here.

    Let us know if you have questions of course and Happy Repeat Form Building to you!

    Use Wufoo & sendwithus to Track Your Net Promoter Score

    By Wesley Yu · October 17th, 2014

    Sendwithus lets you easily and painlessly create transactional emails for all of your applications. Wesley Yu from walks us thought their recently released collection of free open source email survey templates and how you can use them as a free & easy way to measure your Net Promoter® Score with Wufoo. Take it away Wesley!

    Here’s a Net Promoter® Score (NPS) program that you can launch today to grow your product or service. It’s easy to implement on a limited budget, and it’s a great place to start when you don’t have a lot of resources to invest.

    Wait, What’s a Net Promoter Score?

    The Net Promoter Score is one of the most recognized ways to measure customer loyalty. It’s used figure out the lowest cost of keeping current customers and the best way to acquire new ones. To measure your NPS, all you need to do is ask one simple question:

    “How likely is it that would you recommend our company to a colleague or friend?”

    email_survey_likert_scale copy

    One question.

    That’s it. And, calculating your Net Promoter Score is easy:

      nps_explainer Net Promoter Scores allow you to:

    • Predict where your customer behaviour is headed down the road
    • Engage & learn from the customers that really care about your product
    • Stop customer churn

    For more info on NPS and how it works, watch this video.

    The Problem with NPS

    The trouble with NPS programs is that gathering and storing Net Promoter Scores can be difficult (and/or expensive). Luckily, we have a free hack that you can implement in about 20 minutes to start gathering and storing your NPS data.

    The Solution

    In this tutorial we will:

    • Gather NPS responses using an open source email template
    • Store and track the results using Wufoo’s online form management.

    Customers Receive an NPS survey -> They provide feedback -> You get data BOOM! Let’s get started!

    Step One: Download a Responsive NPS Survey Template

    • Head to the’s Open Source Email Project
    • Choose a theme
    • Download an NPS survey template You’ll use these HTML email templates to gather your NPS data. You can edit the template directly or you can import it into your email template manager to brand the email for you own company.* *If you don’t have an email template manager, try – it’s free!

    Step Two: Create a Wufoo Form for your NPS data

    We’ll be using Wufoo manage our NPS data. If you don’t have an account, sign up for free at When you get to the Wufoo dashboard, hit “Create a New Form,” under the “Forms” tab. That should bring you to the form builder. Create a form with these 4 elements:

    • Title Message
    • Paragraph Box for Additional Feedback
    • 0 – 10 Multiple Choice Field
    • Email Address Field

    Step Three: Create Custom URLs to Pre-populate your Wufoo Form

    In order to connect click data from your NPS survey to Wufoo’s database, you’ll need a way to pre-populate your Wufoo form. You can do this using custom URLs. The basic URL of a Wufoo form looks like this:

    If you click that URL, you’ll go to a form with no predefined values. But, if you add some custom values to the end of the URL, then the form will pre-populate with the assigned values. Like this:

    Wufoo allows you to populate forms with whatever data you like. In the example above we’ve passed in an email address variable, but it will accept any variable you throw at it – name, date, location, marital status, whatever. To write your custom URLs for you own Wufoo form:

    • Head to the “Forms” tab
    • Find the form you would like to pre-populate
    • Click “Code”

    Then, Click “API Information” (in the top right corner)

    Each Field Title has a corresponding API ID. The API ID is the number you use to reference a field. So, a field with an API ID of 5 will become:


    The custom URL for a pre-populated form that includes a customer’s email and an NPS response of 5 might look like this:{{ customer_email }}&field1=5

    Step Four: ****Create Custom URLs for each NPS Survey Response

    That might look something like this:

    0 ={{ customer_email }}&field2=0
    1 ={{ customer_email }}&field2=1

    Etc. Etc. You get the idea…

    Step Five: Map your Custom Wufoo URLs to the NPS Email Template

    Okay, time to dive into the HTML of your NPS email template* that you downloaded in step one. Each response (from 0 – 10) is a separate image, so enter the corresponding Wufoo URL as a link in the HTML.

    Now, when customers click their response in the email they get a pre-populated Wufoo form, like this:

    *Template management can be pain. For a simple and intuitive email template management system, try – it’s free!

    Step Six: Hide the Pre-Populated NPS Fields in your Form

    Because we’ve pre-populated the multiple-choice and email fields with the data gathered through our NPS email, let’s hide those two fields. To hide a Wufoo field:

    • Click “Field Settings”
    • Select the field you would like to hide
    • Type the word “hide” in the “Add CSS Layout Keywords” field.

    Now, after a customer clicks a response they get this:


    Now you have fully functional NPS Email that takes advantage of Wufoo’s analytics and reports.

    Step Seven: Sending your NPS Survey

    NPS surveys tell you how customers feel about your company. They’ll tell you which leads to nurture and where to improve your product to reduce churn. But, when should you gather NPS data? Mass emailing customers with NPS surveys once or twice a year will give you an annual or biannual Net Promoter health check, but NPS surveys are most effective right after a customer has had a meaningful interaction with your company. Important points to gather NPS data are:

    • After a Purchase
    • After a Free Trail
    • After a Blog Signup

    Gathering data at these points will give you a constant measure of your Net Promoter Score as customers interact with key parts of your product. To automatically send an NPS survey after a customer has taken an action, head to and start a Drip Campaign. You can trigger a survey email after your customers have received an email or after they’ve triggered an API call.

    That’s it - now go and measure your Net Promoter Score for free. Export the .CSV (or if you want to send it straight to sendwithus, using Zapier let us know manage your customers, and make sense of your data!

    PS - We’d love to hear how this works out for you. Leave us a comment, shoot us an email at, or hit us up on Twitter.

    • Search

    • About

      The Wufoo Blog is the official online publication written by the developers of Wufoo about their online form builder, form-related technologies, and whatever else may fit their fancy—like robots.

    • Archives