The Wufoo Blog

Archive of Tips & Tricks

Using CSS to Maximize Your Form’s Max Quantities

By Kane Stanley · June 2nd, 2016

The Max Quantities feature is one of our more recent releases and we reckon it’s a bit fantastic. It’s a nifty little one that allows you to limit the number of times an option can be picked in a form. If a customer is filling out a field with this applied, they’ll see exactly how many times that option can be picked. It’ll look a little bit like this:

MaxQuant

Not too shabby, eh? However, not everyone would be a fan of showing how many t-shirts they have left. It’s not possible to directly get rid of the text showing this, but being the superhero that it is, CSS is around to save the day. With CSS it’s possible to target that piece of text, shoot it with some laser eyes and send it fleeing from the form. Or to avoid the action scene metaphor, it’s possible to hide it. The CSS is mega simple as well. Check it out:

Wufoo CSS

Not a massive amount to talk about with that. The colour of the text has just been made transparent, which will make it disappear from the form. When applied, it’ll look like this:

Wufoo CSS

Looks like CSS has defeated the villain with one swift and beautiful move. All of those options still have the max quantities applied, but only small shirts, which have run out of stock will show the amount remaining. That way the user isn’t a bit confused when they can’t pick the small shirt they so desperately want. The same fate would be in store for the other shirts, if they were to run out of stock.

What’s that? You want the text for out of stock options to be gone as well and you need CSS to cancel its holiday to help you again? That’s chill. Just add a tiny bit more CSS. Check it out:

Wufoo CSS

You will notice when the option has been disabled and will once again hide the text from the form. When applied, it’ll look like this:

Max Quantities

Another job well done for CSS. Saving lives one character at a time!

Questions for Kane? You know where to go!

Newbie Series: How to Share Your Form (and More!) with LinkedIn

By Laura Grimbergen · May 3rd, 2016

LinkedInHey there, form fans! Have you ever wanted to know about all the ways you can share your Wufoo form? Good, you’re in luck.

There are tons of ways to share your Wufoo form with the world. Today, I’m going to walk you through sharing your form on LinkedIn, because we’re cool and professional like that. The possibilities of using LinkedIn to share your form are endless—-generating leads, collecting customer feedback, polling connections, and more.

Let’s get started, shall we?

Choosing the right form link for you

Before you can share your form on LinkedIn, you’re gonna need a URL to link to your form (crazy, right?). On our Share page, you’ll find 2 types of links you can use to share your form directly. One is the title URL which is based on your form title and WILL change if you tweak your form title, so be careful.

Share page title URL

The other is the permanent URL - this is a unique URL that stays the same even if you change the form title.

Share page permanent URL

We recommend using the permanent URL to give you the most flexibility in case you feel like changing up your title. Any URLs you add to a LinkedIn update get shortened anyway, so we think a permanent URL is the way to go. To use either a permanent or title URL, click on the green Copy link button below the URL, and paste away.

Linking to your form on LinkedIn

Let’s say you’re hiring for a new position and you want to poll your connections for their best interviewing tips n’ tricks. One way to do that is to post a LinkedIn update with your form link. Head over to your LinkedIn homepage and click on Update status in the upper left.

Writing LI status update with instructions

Paste in your form link, add a witty caption, and let those responses come rolling in.

LI status update done

You can also share a form directly from your LinkedIn profile. Under the Summary tab, you can easily add a link to your form by clicking on the square icon in the upper right-hand corner.

Summary LI form with instructions

Paste in your form URL, write a catchy description so people know what they’re looking at and boom—-you’ve got a form on your LinkedIn profile. You can also link to your form directly from one of your job descriptions using the same steps. Cool, eh?

Congrats, Newbies—you now you have one more social media channel in your form-sharing toolkit.

For more social media forms goodness, check out how to share your forms on Facebook and Twitter here. Form on!

Happy Tax Season! How to Keep Track of Your Expenses

By Cody Curry · April 7th, 2016

Tax TipsHey there, fellow dinosaurs. If you’re like me, you probably have a little too much money on your hands this time of year. But don’t worry at all: the IRS is here to help.

It’s open season on taxes here in the states, and Wufoo can help you keep track of all those expenses and receipts like a pro.

Oftentimes, we think of forms when we think of collecting information from someone else. Sometimes though, we can turn the lens around and use Wufoo to collect and organize details about ourselves!

If you’re a small business owner or independent contractor, you might want to keep your business expenses separate from your personal expenses. If you like to keep a personal budget, you can do that too. Here’s how we’ll do it.

First we’re going to want to make a form to collect all of those juicy details about our budget and personal spending.

The best way to do this is to consider this question: What do I buy? Everyone’s answer to this is going to be a bit different. Here’s what I came up with:

image2

As you can see, I have all the important categories nailed down. Now let’s go build it! Head over to Wufoo, and create a new form. The most important bits of information I wanted to track are:

  • Type of expense
  • Price
  • Date of transaction

I’m going to use our Price field to track the cost of each expense. This will let me enter any amount I want, and track that number in the Entry Manager. To track each category of expense, I’ve used a Dropdown field. That way, I can come back later and add new Categories if I find they’re a bit lacking.

For those pesky paper receipts, you can use our File Upload field to upload a picture as soon as you get them by using your phone’s camera. In fact, I keep a bookmark to this form on my own personal device so I can log all of those expenses as soon as I make the purchase. Yes, I enjoy things like this.

phone

If you’re eager to take this one step further, take a look at our Dropbox integration. With this integration, all of those receipts will end up in one folder in Dropbox. They’ll make for a very intriguing slideshow too, so be sure to share that folder with everyone you know! (Don’t actually do that, for friendship’s sake.)

Once you have all of your expenses tracked in Wufoo, it’s easy to use our Report Builder to visualize all of the purchases you’ve made. If you like, you can even export all of your data into your favorite spreadsheet program to sum everything up! Or…

For some spreadsheet-packed dinosaur-themed master-level formjitsu, you can save all of your entries in Wufoo directly into Google Sheets using Zapier. WHAT. Yep, it’s the truth. You can learn a bit more about Zapier’s connection between Wufoo and Google Sheets right over here.

Once you have this connection created, you’ll have a beautiful list of all your expenses saved directly in Google Sheets. This means you can use that information to do calculations, create pivot tables, and learn all sorts of fascinating things about your spending habits. But if you ask me, some things may be better left unseen.

Questions, comments for Cody? Let him know below and yep, he’ll answer!

How to Close Down Your Forms With Class

By Kane Stanley · April 1st, 2016

It can be rather satisfying when you no longer need your form.

Maybe you’ve received all the entries you need and you’re ready to start digging through your data with a report or you’re done with a major project and you can finally put your form to bed.

Whatever the reason, when you do close your form, there is always a chance a straggler will still attempt to view it. When this happens, they’ll see a little message telling them the form isn’t accepting entries. Depending on if you made the form private or if it hit the entry limit, the message will be different:

Private Message

Those do the job. They let your user know the form isn’t accepting entries, which may be all you really need to tell them. What if you want to change the message though? Perhaps you want to tell your users the form is closed, but they can get check out your website or you just want to show them a picture of a dinosaur eating pizza.

There’s not a setting that will let you change that message on your form, but as with most things Wufoo, where there’s a will there’s a way. We can keep the form “live” and hide the submit button and all the fields in the form so that the only thing left is a section break with your personal message.

First off, we need to make sure the form is active again. So if the form has hit an entry limit, make sure to reset that or make the form public once again.

After that, we need to make all fields in the form admin only. That way, you hide the fields on your form from everyone but yourself.

Here’s how you do it:

  • Click the Forms tab at the top of your page.
  • Click Edit on your form.
  • Now click on your field and change the Show Field to to Everyone.

Job’s a good’un. Now add a section break field to the form and add your custom message in there. Your form should be looking a bit like this:

Admin only Fields

All the fields are admin only, which means they won’t show up in the form, but you keep all the data you received from those fields. However, if you view the form, you can still see the submit tab, which looks a bit…rubbish.

Pizza Cake

We can add some simple custom CSS to get rid of that title, the grey line below it, and the submit button.

CSS Example

That CSS will use “display: none;” to essentially hide the submit button, title and grey line from the form. All that’s left is to apply the finishing touch by enlarging the size of the section break text via the Theme Designer. Put it all together and the final piece should look a bit like this:

You’ve got yourself a custom message for a closed form and a T-Rex with a full belly. Beautiful.

End

And behold, another post with the most(est) from our expert, Kane. Questions for him? You know where to go!

A is for Activity Log: Get an A+ in Using this Awesome Feature

By Kane Stanley · March 28th, 2016

When there are loads of users in your account, you may want to keep an eye on all the changes happening to your forms. Wufoo’s got you covered.

With the activity log, you can dig in to everything that’s been going on. From when each user’s logged in down to when you last upgraded the account—you can use the activity log to keep a keen eye on all those exciting forms of yours!

Here’s a quick run-through for you.

How to Choose the Right Form Field for You

By Nicola Plate · March 4th, 2016

Wufoo Form Field TipsHey there form fans! We all know it—forms are super fun to make. But once you start collecting entries, STEP BACK. You don’t want to make too many changes once that form is collecting data.

The best forms are the ones that are created with all the right fields form the get-go. Wufoo’s got a lot of fields—some regular, some Fancy Pants—and though they seem similar, each field has its own specific function.

Today, we’ll go over a three of our most common fields (Checkboxes, Multiple Choice and Dropdown) and give you some examples and tips to help you pick the field that’s right for you! This might be review for you experienced Wufoo-ians, but stick around anyway—you just might learn something.

Let’s review…

  • Checkbox Fields: A question with a group of answer choices that the user can select. They can select any combination of answers. Best used when there are multiple “correct” answers.
  • Multiple Choice Fields: A question with a group of answers choices that lets the user select one choice only.
  • Dropdown Menus: A question with an answer fields that expands into a list of options that lets the user select one choice.

I’m thinking of hosting a little event the whole Wufoo team for St. Patrick’s Day. This year’s event is a Leprechaun Fun Run to raise money for charity, and I’m going to create a registration form with all three of these fields!

Now how to pick—just ask yourself: “Do I want the user to be able to select more than one option?”

If the Answer is YES the choice is clear—CHECKBOX.

Checkbox Example

I’ll need a little help (one dinosaur can only do so much!) for my event, so I’ll provide them with a set of options to pick from. I don’t want to limit people who want to help, which makes a checkbox the perfect field — They can select as many of the answer choices as they want.

Field tip: Because you can select multiple checkboxes, each answer choice appears as a separate column in the Entry Manager’s Datagrid.

Wufoo Checkbox Field

Moving on…let’s say the answer is NO to the question. Maybe you only want to user to have ONE choice. You’ve got a few options: Multiple Choice Fields or Dropdown Menus.

Multiple Choice Example

I’m going to make event t-shirts (obviously) so I’m asking the other Wufoo peeps to help me pick the design. But I want only ONE design, so I’m going to force them to pick their favorite. This is where multiple choice fields come in. Unlike checkboxes, multiple choice fields only allow the user to select one choice.

Field tip: The Multiple Choice field lets you add in an “Other” option that can be selected.

Wufoo Multiple Choice Field

Lastly dropdown menus—-They also only let you select one option, but with the added bonus of not taking up unnecessary space.

Drop Down Example

I want to collect the t-shirt size, and people all pretty much have an idea of what sizes are available. I don’t need to take up precious space on the form listing them out a multiple choice field, so a Dropdown menu is the better choice. Dropdown fields are designed to let the use only select one option, but with as little space as possible.

These generally come in handy when you have some answer choices that the user doesn’t need to necessarily see all of in the beginning. Chances are, each person knows what size shirt they wear.

Field tip: If you a list of the items you want to include in a Dropdown menu (or even a multiple choice menu!) you can import directly by clicking Import Predefined Choices button.

Wufoo Dropdown Field

And there you go, form fans. A perfect form that’s going to collect all the correct data in all the right places. Now aren’t you happy we got that all sorted out? Forms can be fun, but they’re the most fun when you make them correct right from the beginning.

Let Nicola know below if you have questions! And don’t forget to check out Guides for even more info and tips.

5 Ways to Clean Up Your Form

By Michael Lim · March 2nd, 2016

Wufoo Form Tips

It’s easy to let clutter accumulate during the year and all that junk can really make life more difficult. Likewise, forms often end up with incorrect or unnecessary design elements that will frustrate users. So roll up your sleeves because we’re going to get started on some spring cleaning!

Know your audience and design to their expectations

An inventory checklist for your co-workers will differ greatly from a public newsletter signup, for example. This one is more general, and not a specific action to take, but it’s important to keep in mind for the rest of the tips. The following suggestions won’t apply identically to every form, and the best form design will depend on your specific goals and users.

Use the best field for the job

With Wufoo, we provide a bunch of different fields to ensure you have the right tools available while building your form. However, sometimes forms use a less than ideal field and that can cause that range of choices to backfire.

Our fancy pants fields like Address, Email or Website are pretty easy to use correctly, but the standard field types can be a bit more tricky. Dropdown, Multiple Choice and Checkbox fields are the usual troublemakers. In general, here’s where each field is best suited for the job:

  • Multiple Choice: Use when you have 5-7 options and a user can/should only pick one. These fields are perfect for Yes/No or similar “binary” questions.

SpringCleaning1

  • Dropdown: Like Multiple Choice, but better when you have more than 7 options, of if you’re trying to save vertical space (embedded forms can benefit greatly from this).

SpringCleaning2

  • Checkbox: The only field of the three that allows for more than one option to be selected. If a user should be able to select multiple choices, Checkbox fields are the way to go. They can also be great for situations that only allow a single choice (like an opt-in or confirmation field).SpringCleaning3

    #2: Adjust field size to match desired input

    We’ve discussed some of the advantages to changing field size before, but another great use for the field size is to signal your expectations. Since you can adjust each field’s size separately, don’t hesitate to experiment a bit and observe how the entry data you receive changes accordingly. Our built-in Address field uses this approach by keeping some fields full-width and setting others to be shorter. SpringCleaning4

    #3: Only show fields when they’re needed

    One of the great advantages of online forms over paper is that you can add and remove fields in response to user input. While a paper form needs to include every possible field, online forms like Wufoo can adapt to the individual user. To keep things clean and simple, consider using Field Rules to hide optional or conditional fields when they aren’t relevant to the particular entry. We’ve got even more info using Field Rules to adjust your fields here. SpringCleaning5 SpringCleaning6

    #4: Give users a clear path

    To maximize the available space, paper forms often rely on a multi-column format. With online forms, multiple columns can be a useful tool for replicating a familiar layout (Address fields are a great example again), but overuse of columns can make things more difficult for the user. Having to scan back and forth to find the next field is tiresome and the increased width can often interfere with a mobile-friendly design, so keeping things simple with a single column can be a significant improvement. SpringCleaning7 SpringCleaning8

    #5: Customize button labels to provide context

    While the standard “Next Page” and “Previous” labels will get the job done, tailoring the text to fit your specific form can be an easy way to improve the user’s experience. Giving users an idea of what’s coming up, or what they just left, can make moving between pages pain-free. This can be especially important when you have more than a few pages, since a user may not be able to remember where they are in the process. If you’re feeling particularly bold you can customize the “Submit” button as well, for another opportunity to delight your users. SpringCleaning9 Questions for Michael? Let him know below!

How to Collect Payments Using More Than Luck

By Kane Stanley · February 18th, 2016

St. Patrick’s day is looming and nobody is finding the dosh at the end of the rainbow. Rather than exploring the Irish hills for gold, try making some money through your form. The payment settings section lets you set up your form to collect money for anything from a donation form for your next holiday to Dublin, to order forms for your business.

Check out our video to learn how to apply payments to your form. Then buy yourself a Guinness to celebrate.

Questions for Kane? Let him know and he just may toss you some of that dosh!

Newbie Series is Back: Troubleshooting Your Forms

By Cody Curry · February 4th, 2016

Wufoo QuestionsHey there, everyone! Cody here and newest kid on the Wufoo block of product experts. So just like you, I was new to Wufoo once. With a little practice and the good company of our Newbie series, you should be a pro in no time. Sometimes, you just want to get your logo on your form—is that too much to ask? We don’t think so, and I’m going to show you how!

The first thing you’ll need is your logo. “I already have that, Cody.” you’re probably saying. Well, great! Grab that logo, and let’s get it up on the internet. In order to display your logo in Wufoo, you’ll need to host your logo somewhere. Hosting just means you’re uploading that image somewhere that can be viewed by Wufoo whenever it needs it.

Upload your favorite Logo: We suggest hosting your logo using a service like Dropbox.com, HTTPSImage.com, or SSLpic.com. Whatever you decide, you’ll need to find your direct link.

Dropbox

Dropbox is an amazing solution. If you decide to use Dropbox, getting your direct link is easy. Once you’re logged into Dropbox, click on the New Upload button up at the top of the page.

Wufoo Logos blog

You’ll then be able to select your logo and upload it to Dropbox. When the upload is finished, click on Share just to the right of your fresh newly-hosted logo and copy the link that’s provided. Once you have it copied, you’ll need to make one small change. At the end of that link you’ll find a 0, change it to a 1, and you’re all set.

Wufoo Logos blog

It will look like this when you’re done: https://www.dropbox.com/t/4sb2h8crnrm9e3n/bestlogoever.png?dl=1 *And hey, don’t try and click on that link of course, cuz it’s not real.

SSLpic.com

SSLpic.com is great. They’ll email you a copy of your direct link that you can use to get your logo up on Wufoo! They do have a strict no-robot policy when it comes to hosting logos, so you’ll have to make sure you’re not one of those before you use their service.

sslpicupload

If you’re not a robot, then you should be good to go. The direct link you get from them will look something like this: https://static.e-junkie.com/sslpic/65357.518de12jwk29m20ee85b2339.jpg *Same story with this link—it’s not real.

HTTPSimage.com

HTTPSimage.com is another gooder. Your direct link will be provided straight away once you’ve clicked that Upload button. It appears that while they do not allow illegal content to be uploaded, they’ll allow robots here, which is very kind of them.

Host it using SSL

What do all of these hosting options have in common? No one? They all begin with https:// and that’s very important! Who would have thought that one little s could cause so much trouble. Here’s what’s up: In order to view your logo on a secure form, you’ll need to have that s at the end. Logos that are hosted without the s might just not show up, which would be terrible! Only some hosting services allow you to use https. Luckily, all of the options above are nice like that. Make sure your link starts with https:// and you’ll be all set.

Create a Theme

Once you have that fresh new direct link, log into Wufoo and we can get down to business. The first order of business is making a new theme. Themes let you breath life into a stale form by adding all sorts of wonderful patterns and colors. Really great stuff! But don’t let me get side-tracked, we’re here to talk about logos.

Click on Themes up at the top of the page. Create a new theme by selecting Create New from the Theme dropdown. Select Logo from the Properties Menu, and Your Logo from the Logo menu. This will reveal a beautiful field that was custom made to accept your fresh new direct link. Notice the warning above, “Make sure you host your image on SSL to avoid warnings!” As I mentioned earlier, this is serious business, but we’ve done our homework. Our tickets are already paid for, and they’re waiting for us at the box-office of new logos, so pat that warning on the head, tell it to hush, and let’s press forward.

Wufoo Logos blog

Paste your direct link into the field just below that pleasant warning, and click Apply. If your logo appears to be chopped in half, don’t despair. Immediately to the left of that Apply button, you’ll see a field labeled Height. This field will let you adjust how tall you want the space where your logo is displayed. Match this up with the size of your logo through trial-and-error. If you know how tall your logo is, then you’re a smarter human than I am.

Wufoo Logos blog

Wufoo Logos blog

I’m going to change the background of my header to white to match the rest of my theme. Once the preview is looking good, take a sip of water, then click on the big green Save Theme button up in the top-right corner. Specify a Name for your theme—I’m calling mine Henry—then click Submit. Your theme is now saved and ready to be applied to your form!

Applying your Theme

Click on Forms Up at the top of the page, and find an unsuspecting form in your account to test out your new logo-clad theme.

Wufoo Logos blog

View your Form

Hover your mouse over your unsuspecting form and click View. That’s all there is to it!

Wufoo Logos blog

How do I center my logo?

Glad you asked that question. While Wufoo doesn’t have a built-in way to center your logo, we are smarter than Wufoo gives us credit. To get your logo to appear in the center, you’ll need to create an image with a bit of space on each side. The default width of our forms is 640 pixels. This means that if you create an image that is 640 pixels wide with your logo right in the center, you will have your logo centered like a pro.

Wufoo Logos blog

You can also use this technique to adjust the position and padding around your logo without fiddling with any code or scripting.

That’s all I have for you today, folks. You’re well on your way to learning the secrets of Wufoo.

Have tips of your own? Share them with us in the Comments!

Your Burning Questions Answered!

By Joss Unzicker · February 2nd, 2016

Wufoo QuestionsHi Form Friends! Hope your 2016 form building resolutions are off to an auspicious start. For me this year is going to be all about efficiency and making sure that I use my time wisely. With that in mind, I’ll answer two of our most common customer questions with the hope that you can absorb all that important info here and never have to worry about contacting us and waiting a few tantalizing hours for a response. So let’s get to it.

> Dear Support,

> Why isn’t all my data showing in report/excel export/datagrid?!

> Help me, Obi Wan Kenobi!

> Sincerely, > Worried User

My Dear Padawan,

Not to worry—the force is with you! When you set up a datagrid on a report, that grid is set by default not to show all of the fields from your form. In order to make sure that all of the fields or the fields you want are showing properly, you will need to make changes to the widget settings for that datagrid The steps for making this change are as follow:

  1. Login
  2. Click on the Reports tab at the top of the page
  3. Click on the Edit button for your report
  4. Click on the Datagrid in the preview section of the report builder
  5. The field checkboxes to display will open in the tab above
  6. Select all fields or select individual fields to show
  7. Save Report

ReportBuilderblog

You can learn more here.

Alternatively, you can click the “Allow User to View Columns Not Checked” button in the report settings — this will not add any more fields to the default datagrid, but anyone viewing the datagrid will be able to add them using the green plus sign attached to the grid within the report itself. Additionally, they will be included in an export of that report.

Wufoo Forms

Cheers, Joss Wufoo Support

> Wufoo Gurus,

> Why am I not receiving my notification emails?

> Namaste, > Wufoo Yogi

Hi there,

Sorry to hear you’re not receiving Notification emails! Without having a link to the form, I have three guesses as to what could be happening here.

Check your notifications page to make sure that notifications are set to trigger. On the notifications page, the entries box should be ticked.

Wufoo Forms

Know that any form rules will override the notification settings. If you want the email addresses on the notification page to receive all notification emails, then you’ll want to add them to each of the form rules as well. If all the above seem right, it is likely that a firewall is placing our email in a spam folder or blocking the notification entirely. We strongly recommend adding no-reply@wufoo.com and apache@wufoo.com to an email whitelist or “safe senders” list on your email server or account.

Additionally, we recommend trying the notifications with another email address not associated with your domain (such as a Gmail or Yahoo account) just to test if the problem is isolated to that particular email address or domain. If that works, you could set up an email forward from that address to the original address on your domain.

Hope this helps!

Best, Joss Wufoo Support

Even more questions for our wonderful Joss? Let her know below!

  • 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