Beautiful. Easy to use. Powerful. Sounds scintillating, doesn’t it? We agree. That’s why we’re excited to bring you our newest integration that brings you all of these things and more in the wonderful world of mobile—woolloo.
woolloo is a dynamo of an iPad app that lets your business deliver a rich and engaging experience using consistent messaging right in the moment when a sales decision opportunity exists. Your brand can now be delivered on a reliable and regular basis with the content you control. Sales receive constantly up to date sales aids and marketing can collect critical analytics needed on their end.
Why is all this so crucial for success? Well, marketing and sales teams should be in constant alignment with one another during every step of the sales process. This integration helps ensure that. Ready to dive into more of the lovely details?
With woolloo + Wufoo, you’ll be able to:
To Use This Integration
- Create an account with Wufoo and with woolloo. You can start your 14-day free trial of woolloo here.
- Create a form in Wufoo with the information that you want to capture.
- Log in to Wufoo directly from woolloo and drag in one or more forms to push to your sales team.
Your team can access and complete forms no matter their connectivity state. Submitted forms are sent directly back into Wufoo. Just like we said. Beautiful. Easy to use. Powerful.
Here’s a peek at the integration in action:
Questions for woolloo on this lovely mobile integration? Let us know in the Comments section below!
Interested in integrating with us? Get started today.
We’re right at the beginning of summer (at least here in the Northern Hemisphere, Southern Hemisphere we see you) and the thing that I think of when someone mentions summer is events. Lots and lots of events. And if you’re running or hosting an event, now’s the best time to use Wufoo. Let’s do a quick run down of the top five most popular events and registration form templates and see which one works for you.
1. Workshop Registration
If your company or organization is hosting a workshop to help employees or even customers learn, this is where your train gets off. The Workshop Registration template is the single most popular event and registration template we’ve got. It’s a perfect starting off point for ensuring you receive the most relevant, accurate and current information from your attendees. It has all the staples like name, contact info and food preferences. Bonus because it’s also fully customizable for whatever your workshop needs are so you can include things like preferred breakout sessions, tracks and other things relevant to your unique event.
2. Event Registration Form
Not surprisingly, our second most popular template is the aptly named Event Registration Form. If your event doesn’t quite fit into the confines of the other templates on this list, start with this one and customize, customize, customize. While the sample event in our form template skews a bit more to the nerdy end of the spectrum than most, you’ll find that it serves as a great starting point for your own event.
3. Retreat Registration
The Retreat Registration is the perfect form if you’re hosting say, a team offsite. Your employees can indicate if they’re planning to attend or not, when they’ll arrive, when they’ll leave and if they’re going to be sharing a room or riding solo. It sure as heck beats coordinating all of this via email with each employee, eh?
4. College Application
Our fourth most popular form template is our College Application form. Pretty self-explanatory, this form allows potential students to submit information needed during the college application process in one place. There’s no need for paper applications and you can even use our file upload feature to allow applicants the ability to attach their personal essay for review. This form is also customizable to allow for applications for college classes and other groups. Super cool.
5. Conference Registration Form
The difference between a workshop and a conference? Scale. Conferences are big, big, BIG and they usually require purchase of an event ticker. Using our Conference Registration Form and coupled with any number of our payments partners like Stripe, PayPal, or Authorize.Net, you’ll be able to sell event tickets for your company’s next conference.
BONUS: Event Planner
This event form template is a bit different than the others but that doesn’t mean it’s any less important and useful. The Event Planner form template helps people who are running events coordinate with coworkers to plan and organize an event before the registration process has even started. It’s the perfect way to make sure everyone participates in the planning process and that no detail goes unnoticed. Planning your next event? You should start here.
Do you use Wufoo for your events? Have some tips? Share below!
Hey hey everyone! Today I’m going to let you in on a trick that allows you to customize a message to customers when you want your form to stop accepting new submissions. By default, the closed form message will read like this: Sorry, but this form is no longer accepting submissions.
So the message is accurate but depending on what you’re looking for, maybe a little blah-sounding. What if you want to share a perkier, more personalized (i.e. not bot-like) message to those who try to access your form after it’s already closed? And what if you need to communicate extra information about the event, like whom to contact, or include a link to your site?
- Add a hidden predefined Date field to always show today’s date
- Use Field Rules to hide/show fields based on this Date field
- Use Form Rules to redirect to your website
I’m going to walk through this with my registration form, for the Disruptive Dinos Summer Coding Camp. Yep, that’s right. Dinos are disruptive. It’s a thing.
1. Hidden Predefined Date
Since registration for the camp will close on a certain date, we need a way for the form to recognize the date it is being filled out. This is possible by using a Date field, entering today in the Predefined Date field, and hide in the CSS Keywords field. Here’s what this looks like in the Form Builder:
Enter both of these key words without the quotation marks. today will always select today’s date in the live form. hide will make this field hidden to the user in the live form. Together, these settings make it so the user can’t modify the Date field. Note: I also added a Multiple Choice field, which lets the registrants know that the official registration period is over and asks if they want to be added to a waiting list.
2. Field Rules
Now we’ll create Field Rules based off this hidden date field. If the date is past the cut-off date of June 11, then we want the registration fields to be hidden, to create the appearance of a closed form. So there will be a “hide” field for every registration field on the form. However, if the cut-off date is past, we need the Multiple Choice field to show. So the structure of the field rules will be as follows:
If Date is after 06/11/2015, HIDE/SHOW [field name].
Great! So what does the live form look after June 11? None of the registration fields show, just the Multiple Choice field indicating that the form is closed.
3. Form Rules
Form Rules carry out certain confirmation actions when the entry is submitted. In this case, we’ll use form rules to give more personalized information to those who missed the cut-off registration date. If users select Yes, they’ll be redirected to the summer camp website. If your event doesn’t have its own website, you could also direct to social media such as Facebook or Twitter, a waiting form, or any other link that would provide helpful information. Here’s what this first form rule looks like:
If users select No, we’ll just show a custom confirmation message:
Once you’ve saved all those rules, you’re done! The form will automatically stop accepting new registrations after the date you specify, but users will have a much more personalized experience; they’ll get a clear and explanatory message about why the form is closed and the next steps to follow.
The steps outlined here aren’t limited to just camp registration forms either. It applies to event registration, conference sign-ups, sports tournament sign-ups, the list goes on—any scenario where you need to close the form after a certain date.
We look forward to hearing your thoughts in the comments section below and be sure to visit our Guides page for even more form how-tos.
Want your customers to order multiple amounts of a product, do you? You won’t be able to take a selection and multiply it by a quantity to come up with a total amount owed, so you have to be a bit clever with how you set everything up.
Well, we love to be clever at Wufoo and we’re here to help you be even more—wait for it—clever too. On the face of it, the solution to quantity pricing is reasonably straight forward. You can add a dropdown menu to your form and have the user pick the quantity from the dropdown. Assign different prices to each quantity and Bob’s your father’s brother, you’re done. When you have multiple products with different prices though, things can start to get weird.
So we love pizza (who doesn’t??), so we’ve created an order form for everyone to order their pizza. However, different sizes mean different prices so we can’t apply the same price to every pizza. If we want to order 5 large pizzas and 5 mediums, the prices of those pies must be different.
The first thing we have to do is create a checkbox field which asks the user exactly what they want. Using a checkbox field will allow them to select more than one option, which they may want to do. Once that’s done, we can create a dropdown field for each product that you have. In our case we have three different sizes, so we’ve created three different dropdowns. Those fields will ask the user how much of that product they want.
Check it out:
That all looks very lovely, but if someone doesn’t want a medium pizza, they probably don’t want to see a dropdown that asks how many medium pizzas they would like. To neaten everything up a bit, we can use field rules to only show the fields that correlate to the selection in the checkbox field. If someone only chooses the “Small” option, we only want them to see the dropdown for small pizzas. Those are easy rules to setup.
In our example, they’ll look like this:
Almost there. All that needs to be done is setting the prices to those dropdown fields. When you head over to your payment settings you’ll be able to assign different prices to each field option in your form. Just assign the relevant prices to each field option and you’ll be good to go.
Now our users can pick exactly what pizza size they’d like and also pick how many of each size they’d like. That will come up with a total price that makes sense. You can check out that form here if you want to give it a try or if you just want to dream of the next pizza you’ll eat. This method should outside of a pizza order form as well, so give it a go on your own form!
Questions for our man, Kane? Let him know in the Comments section below. As always, don’t forget about our splendiferous (yep, that’s right) and spiffy Guides page for even more tips and best practice posts.
Greetings, fantastic form friends! We know your forms should not only be functional but they should look beautiful too—whether it’s being filled out on a laptop, desktop, or a smartphone. That’s why I want to share three things to keep in mind when designing a form to be mobile-ready. These tips will help you optimize both your field settings and custom theme.
1. Instructions for User text
As you may know, the Instructions for User text will only show to the right of the field when your mouse hovers over it in the live form. This is a great way to give the user guidance about filling out a particular field, when necessary. However, Instructions for User text may not pop up on the right sidebar of the form correctly on certain mobile devices.
Let’s fix this by using the altInstruct CSS Keyword.
This changes the formatting to make the Instructions to User text appear below the field, rather than as a pop-up— we want to make sure users filling out the form on their phones get those additional instructions.
2. Side by side fields
CSS Keywords allow you to modify other aspects of field layouts as well. One of the more popular uses is to place fields side by side in the form—this gives you more control over the formatting by letting you visually organize certain fields into more distinct categories. Depending on how many side-by-side fields you have, this setting can actually have the opposite effect when viewing the form on mobile devices. Check out how jumbled and messy these fields look in my Exercise Training log on an iPhone. All the fields are still contained within the form width, but it’s not a clean look:
For the most orderly form design on your phone, avoid using the side by side CSS Keywords—leave them for forms primarily viewed from a computer or a device with a larger screen. They’re not necessary to make a phone look great on your phone.
3. Logo size
The default width of a Wufoo form is 640px, but the average width of a mobile phone is much less than that. What does this mean for your form’s custom theme? If you’ve configured the logo to fill the full width of the form, it will get cut off in the live form when viewed on a mobile device. As you can see in the first iteration of my Exercise Training log, only a small portion of the logo image is visible:
First, you’ll need to either choose a smaller image or resize it in an image editing platform like Paint for PCs. When the image is the size you want it, you’ll need to host it publically somewhere on the web. If you don’t already have a file/image hosting account, such as with Dropbox or Google Drive, a go-to/free secure hosting site is httpsimage.com
Once you have uploaded the image to the hosting site, go ahead and grab that URL to use it as your own logo in your theme. But this theme isn’t ready to go just yet—I have one more tip to make this theme completely mobile-ready. In the Background property of the Theme Designer, you can match the header color with the form color. Here you can see I made both the form and header’s background white.
This way, if the logo happens to not take up the full width of your phone’s screen, it won’t look out of place. This looks much better:
And there you have it—hopefully these tips will help alleviate any headaches about how to optimize your forms for mobile. As always, don’t hesitate to reach out to our support team for questions!
As many of you already know (if not, read on!)—when paired with one of our payment integrations, Wufoo is a great way to quickly and simply build a payment form. Let’s look at some of the different types of emails that are tied to your forms and payments, figure out how you can reduce confusion for your customers related to payments and of course, get accurate information to them as well.
First, it’s important to know how your Wufoo form and payment integration work together. When you pair your form with a payment processor, a 4-step flow happens. Behold:
- The customer (let’s call her Jane) completes the form. This includes all of the fields she added to the form in our Form Builder.
- Jane hits Submit. This sends all of the information from the form to our database where it can be reviewed in the Entry Manager. This also triggers the Confirmation and Notification emails.
- She gets to the payment page. Since the payment information is only handled by the integration, this is a separate part of the process.
- Jane submits the payment information. It’s processed by the payment integration. A transaction ID is sent from the payment integration to the Entry Manager. Boom—payment receipt is sent out.
Even though Jane experiences all of this as though it’s a single form, you can see there are a number of steps. Emails can be sent out at two different points in this process, so it’s important to make sure the right information gets included in each type of email.
Confirmation Emails – The confirmation email can be set up in Form Settings or Form Rules. It’s the customizable message you can include to be sent to an email address collected on the form. Your form will need to have an email field on it for this to work. The confirmation email is sent out when the form is completed but before payments are submitted.
Since it’s possible for Jane to complete her form and then navigate away from the payment page (thus leaving things unpaid!) it’s usually a good idea to avoid any mention in this email of Jane (the customer) having completed payment. It may even be a good idea to mention that the email doesn’t represent a completed payment, just in case she sees the confirmation before the payment is completed.
Payment Receipt – The receipt is set up in the Payment Settings for your form and is only sent to the customer after a payment is completed. This makes it the email of choice for confirming that payment has been received. Like the confirmation email, the receipt can be sent to an email address collected on the form and you can customize the body of the email to say what you’d like. It also includes the transaction ID and price for that particular payment.
You can even set up your Payment Settings so that a copy of this email is sent to you, too, so you can have an additional record of payment.
Keeping the differences between these two emails in mind should help you and your customers avoid any confusion regarding these emails. As always, thanks for reading and happy form building!
Don’t forget to check out our many diverse (and awesome) integrations to see what serves your business needs best and our helpful (and gorgeous) Guides page.
One of the most popular uses we’ve seen for Wufoo has been as a lead generation form on a business website, like setting up a Contact Us form or a Mailing List sign up form to allow users and potential customers the ability to indicate that they’d like to receive more information about your product or service.
It’s a great way for customers to show that they have some interest in your business and it’s a great way for Wufoo users to automate the process instead of handling everything manually. Remember, Wufoo is here to make your life easier. Today, I’m going to outline some steps you should take to make your lead gen forms even better and more effective.
1. Only Ask For Pertinent Info On Your Lead Gen Form
This is one of those rules that everyone knows about but in practice, very few people follow. Everyone is super busy and if a potential customer sees a form that has a ton of fields to fill out, chances are they aren’t going to fill it out.
So the first order of business is to take a step back and figure out what information you really need your potential customer to fill out for you to do your job (e.g. follow up with them). And if you really, really, think about it, the list is pretty short. And I bet it looks something like this:
- Name (First and Last since that helps make your form look professional).
- Email Address (so, you know, you can email them).
And that’s it. Yes really. Okay, so maybe your company is different and you need other information like a phone number, how much of your product the person is interested in, etc. But I’d caution you to really think through each and every additional field you add to your form since it’s been shown that each additional field on your form decreases your conversion rate. And since we’re talking about a lead gen form here, you want as many people as possible to fill out your form. So, keep it simple and keep it pertinent.
2. Send Your Potential Customer A Confirmation Email
The next thing you’ll want to do is to send your potential customer a confirmation email letting them know that you received their inquiry and that you’ll be reaching out in person shortly. The main reason to send a confirmation email is to make sure that your customer feels like they received a quick response from you and that you’re on top of things. The last thing you want your customer to feel is that you’re slow to respond to their needs. And the best thing about using Wufoo to send a confirmation email is that it’s done automatically for you, so its another thing you don’t need to worry about.
You can find out how to setup a confirmation email in our Help Documentation, as well as some other tips on how to customize your confirmation email based on rules and a quick overview of emails Wufoo sends.
3. Integrate Your Form With MailChimp, Campaign Monitor, Or Another Email Service
Finally, the last thing you want to make sure you do is integrate your lead gen form with MailChimp, Campaign Monitor, or some other email list service. By directly integrating with MailChimp or Campaign Monitor or using a service like Zapier to integrate with your email list service of choice, you’re really doing two things here.
First, instead of manually aggregating all of your potential leads via email or a spreadsheet, you’re automatically collecting it in these services which makes it infinity easier to manage at a later date. Second, you’re building a mailing list of users who indicated they were interested in your product and services so whenever you decide to expand your product offering or service, you have a built in distribution list to notify and let them know about your new developments. You don’t need to build the list from scratch each time and manage all of the unsubscribe functionality for you. Just another thing you don’t have to worry about and another way to automate your business using Wufoo.
These small tweaks to your lead gen forms all add up to a form that a) is easier to complete, increasing conversions, b) shows your customers that you’re responsive and on the ball, and c) helps you build up a mailing list of interested customers to help your business grow. And best of all, it cuts down on manual work since Wufoo does all the heavy lifting to automate the work for you.
Hi Form-Friends! We all know how important it can to be to break down your data and get more specific insights from your forms. Our filtering tool in the Report Builder enables you to visualize how a specific group of respondents answered fields in your form. Additionally, it makes it easy for you to grab data lists and export to Google Sheets, Excel or CSV files.
Filtering data can come in handy for many different Wufoo use-cases, but a couple of more common ones that that come to mind for me are:
To get started with filters, you’ll want to head over to the Report Manager by clicking the Reports tab at the top of your account. From there you can click to create New Report! in the top right.
Once you’re inside the builder. you can name and give your report a description in the Report Settings tab at the top. if you’d like to be able to grab easy exports from your report at any time, you’ll want to tick that box next to Allow User to Export Data as well.
Here’s where we get to the fun part. Once you’ve named your report click on the Select Data tab in yellow at the top. Here’s what the default looks like:
From the second drop-down, select the form that you want to filter. From the first drop-down, click on Selected Entries. This will expand out and allow you to create filters galore.
Say you want to gain insight about how newer customers feel about your product. You could generate a filer that reads something like “Use Selected Entries from Customer Satisfaction Survey that match all of the following conditions: How long have you used our Product/Service is equal to Less than a month”.
When setting up your filter you’re able to use any of the fields in your form design with the following conditions:
• Contains • Does not contain • Begins with • Ends with • Is equal to • Is not equal to
Don’t forget that when entering your answer option into the filter you’ll always want to type out exactly what you have listed on the form design or else the filter won’t work or come out the way you want it to.
There are also a couple of situations that may not be as intuitive when setting up your filter:
1) If you’d like to use multiple conditions in your filter, you can definitely do so! To add another condition just click that green + button next to the first condition on the right.
Keep in mind, though, that our filters can’t get too complex. You can set them up so that the filter applies to every condition by selecting “ALL” in the third drop down (as if AND appeared between each of the conditions) and you can also choose to set them up so that the filter applies to Any condition (as if OR appeared between any of the conditions). Having said that, we don’t have a way to combine these two attributes. In other words you couldn’t create a filter that reads something like this. “If field 1 equals 1 AND field 2 equals 2 OR if field 3 equals 3.”
2) If you’re filtering by number of stars provided in a rating field, you’ll need to use a numeral to represent the stars
3) If you’re filtering by a checkbox option, you’ll need to use the label of the checkbox to filter. For example: the filter should appear something like “Bachelor’s degree is equal to Bachelor’s degree. In other words, it can be a bit redundant because the label will appear the same as the answer option.
Note: your filters will not apply to number widgets.
Once you’ve created a filter, you can go ahead and move onto the Add Widgets tab to select the widgets of your choice. You can then define the field for each of the widgets that you add in the final Widget Settings tab at the top. After saving your form, you’ll have a beautiful filtered set of data to take a look at. You can check out my example here.
Keep in mind—If you don’t need the visualizations that the report builder’s charts and graphs offer, then it may be worth simply filtering your results in the Entry Manager and exporting the data to list form from there. Our friend Zachary walks us through that here.
That’s all there is to it, friends! Of course, if you do have questions let us know below.
Back again for another installment in our CSS Tips ‘n Tricks how-to series! In the last CSS tutorial we changed the images on our form with the :hover selector, and today we’re going to focus on a few other really simple tricks to make your form look that much nicer using CSS.
First, we’ll go through the Error messages. If your users are filling out your form and they do something wrong like forget to fill out a required field, then we’ll throw them an error that tells them that they’ve run into errors and shows them where those errors are. While it’s not possible to change what the error messages actually say, you can change how they look. If we go back to our lovely form that we’ve been building so far and forget to fill out the required field, we’ll get an error that looks like this:
There’s absolutely nothing wrong with that. It definitely draws attention to the errors that have been made and where they have been made. What if you want to change it around a bit though? Custom CSS would be the way to go. If you inspect the element of that page and view the error messages, you can find the selectors needed.
We’re going to change the Top message so there’s no border and it’s a tad bit smaller. To do that, we’ll see that the top error message uses the ID: “errorLi”, so we’ll need to use #errorLi in the CSS rule. Since I’m a big fan of rounded corners, we’ll also put a rounded corner on the border around the word “highlighted.” That will be done with form li.error. In addition, we’re going to put a border around the highlighted field and change the colour. This will change the colour of the background around “highlighted” as well to keep things consistent. Sounds like a lot, but there’s not much CSS needed.
Here it is:
Not too much going on here. We’ve wiped our hands of the border and taken out the padding for good measure. If you notice we’ve also added !important to the background colour of the error message. This is because the original also uses !important and would override our CSS if we didn’t add that in there.
Now, I don’t want a logo in my form, but if I choose not to have one the charcoal header is still there in place. I’d like it to all be the same colour of my background, which is white. Sticking with some simple background-color changes, I can do that by targeting the Logo with #logo a.
That will just change the background colour of your logo to white. This is also nifty if you have a smaller logo in your form and you want to erase that charcoal background that takes up the rest of the header.
Finally, I want to center the title of my form. It’s all well and good over in the left like it is right now, but I think it would be a bit cooler if it was centered. This is some of the easiest CSS you can use, but centering things makes everything look fantastic. The title will use the ID: “header”, so we’ll want to use #header.
Now let’s have a look at what those changes have done to our form:
Lovely jubbily. We’ve still hit an error for not filling out that field, but that border at the top of the page has been removed, the colors have changed as well as the nice rounding of the borders in the bottom error. There’s no charcoal at the top of the page and the title of the form is centered to make everything look wonderful. This form is really coming along!
If you’d like to take a moment to get to know Dave, please read this post by our SurveyMonkey family. We appreciate your kind words and continued support during this difficult time.