New Screencast: Using Wufoo for Web Forms

* July 24th, 2008 *

by: Chris Coyier

Anytime anyone asks me about forms, I always mention Wufoo. At work and at home, almost every single form I create I just use Wufoo. It makes form creation so easy it’s almost entertaining. In this screencast I walk you through how to get started with Wufoo and start using some of its more advanced features like custom themes, integrating PayPal payment, creating public reports, and user management.

Note: This is not a paid review, I just really like Wufoo. It has saved me countless hours. I have referred a lot of folks to them and I thought it was about time I did an formal introduction =)

Also note: This is the first week I am sending out an .M4V file over the video RSS feed. This file should work even better in iTunes, is even higher quality, and should be AppleTV compatible. The video shown on the web is of lower quality .FLV format, but should be watchable by all. Let me know if there is any problems.

Responses

Niki Brown
July 24, 2008
[ permalink ]

Video stops about halfway through!!!

Great topic though - At my day job we use wufoo for class registrations and payments. Makes my job sooooooo much easier!
Will
July 24, 2008
[ permalink ]

Why would you pay for a service to create web forms when you could save money for you and your client by making them yourself? I mean are web clients really “cool” with paying for a “form” every month? I’m not trying to be sarcastic, but I really dont’ understand the logic in that.
Lisa
July 24, 2008
[ permalink ]

Read the post

“I just really like Wufoo. It has saved me countless hours. ”

That’s why.
Lauri K
July 24, 2008
[ permalink ]

This is a pretty slick service and your screencast’s a pretty nice overview of the features, thanks a bunch.
Dan
July 24, 2008
[ permalink ]

great walk-though! I wouldn’t be surprised if they approached you for advertising it so well! Seems like a pretty cool service..
Justin
July 24, 2008
[ permalink ]

Awesome. Thank you!
David Walsh
July 24, 2008
[ permalink ]

Customer forms are always the biggest time-consumer. That said, I’d rather do them myself so I had control over the entire form submission and registration process.

Nice service though.
Kristy
July 24, 2008
[ permalink ]

Im a web developer and the company i work for forces me to use wufoo.. and i am not a fan because of the iframes.. which shows up with different height in each of the browsers which then sometimes cuts off the submit button.. i find it a hassle.
Flash Animation
July 24, 2008
[ permalink ]

Nice video
Ken
July 24, 2008
[ permalink ]

Nice and informative video.

My question is a “two in one”:

When you build the forms for your clients are you managing them through your account, and if so do you charge your clients a monthly fee or everything is all inclusive on the design/development package price you gave them?

Or do you have your client sign up for their own account and then you build the form for them but ultimately you put them together for them?

Thanks for your answer.
VinnieJT
July 24, 2008
[ permalink ]

Holy crap Chris you’re a savior, between that band website and now this. I was having a problem programming a Paypal payment form then to notice that payment button on Wufoo that allows you to integrate it automatically.

Thanks a million
Ollie
July 24, 2008
[ permalink ]

When I first got to the word “iframe” I immediatelly closed it. Noooooooo iframe please.
Lauri K
July 25, 2008
[ permalink ]

Yeah I’ll have to add to my earlier comment that the iframe implementation does make this a lot less appealing than I thought at first. Semantics aside, a pain to work into an XHTML Strict doc.
Paul
July 25, 2008
[ permalink ]

You don’t necessarily have to use iframes to integrate the form with your web site; wufoo also offers the option of just getting the XHTML+CSS of the form (click). However, according to the documentation, you will have to create your own submit script.

They have a nice (click) POST-API so the script you would have to create just would receive input from the user and forward it to the wufoo API. Then, your script needs to read the return of the API and send the output (error messages, success notifications, etc.) back to the user.

If you are working with heavy+complicated forms, this still could save you some time; especially if you get your submit script dynamically to work with all forms that you are using on your site.
Nina Morena
July 25, 2008
[ permalink ]

I was using JotForm.com for a while and it saved a ton of time and allowed me to use CSS to alter the look and feel for the form. However, the building of the form was a little mundane. I’ll try this out.

Thanks!
Niki Brown
July 25, 2008
[ permalink ]

all you have to do is adjust the iframe height to bigger than you need it so it will work in (retarded) internet exploder.

No more submit button cut off!
Mark
July 27, 2008
[ permalink ]

I would rather recommend Appnitro Machform (www.machform.com). I’ve used it myself and it has no monthly fees and is cheaper. You can also host it yourself on your server. There are no limits and you can make as many forms as you want and plus it has more features than Wufoo.
V1
July 28, 2008
[ permalink ]

Read the post

â€œI just really like Wufoo. It has saved me countless hours. â€

Thatâ€™s why.

I got to disagree with that Lisa… If your a skilled developer u would be able to knock some form up like that within a matter of minutes.

Ill rather deliver quality instead of using services for that.. I mean while your at it.. why not just quit your job and let psd2html do all the coding for u..

IMAGINE all the countless hours u would save with that!
acms
August 3, 2008
[ permalink ]

Thank you for this screencast. I would like to know more about the Advanced CSS options for each field.
kyle
August 5, 2008
[ permalink ]

I’m torn between this and JotForm.

On one hand WuFoo offers a nice, clean looking/clean coded, fully customizable and easy to install form. But on the other hand if you wish to use the XHTML/CSS code only then you have to connect the form to your own database, which is more of an advanced user option. But then again I don’t know how many people choose this option. Also, I’m not a HUGE fan of the iFrame honestly.

With JotForm, even though it produces a table based layout, it uses it’s own server to submit the form. But I think it’s also easy enough to remove the tables and replace them with a div structure.

Overall I like them both. I used WuFoo for my contact form on my website, Kyle Steed Design. But I’ve also used JotForm on some of my other clients websites.
kristarella
August 8, 2008
[ permalink ]

I’ve been meaning to try Wufoo, thanks for the tute.

I was just reading their terms and services and it says

Infinity Box reserves the right at any time and from time to time to modify or discontinue, temporarily or permanently, the Wufoo Site and Service (or any part thereof) with or without notice.

So, they could stop their service, or pause it without telling you… that’s pretty lame. Have you ever received service announcements from them that show that despite this harsh ToS, they provide you with good info anyway?

p.s. There are 2 live previews for the comments here… seems one is associated with the wmd-editor, the other not.
Chris Coyier
August 9, 2008
[ permalink ]

@kristarella: I think almost every web service has a ToS that says something like that. Yeah it does sound a bit harsh… but it’s to protect their company in case of disaster I think. If they absolutely guaranteed service for life, and then got wiped out by a tornado or something, then they could be liable to getting sued for not continuing service on top of that, that would suck.

I fixed the live preview thing… I used to have a plugin that dealt with it, but yeah, now I’m using WMD. I accidentally turned it back on after the 2.6 upgrade. Thanks for noticing!
kristarella
August 9, 2008
[ permalink ]

That’s a good point about unforeseen circumstances preventing service. Thanks for putting that in perspective for me!
Ariyo
August 20, 2008
[ permalink ]

This is a very cool service. However, I had a question!
How do you get rid of the Wufoo logo that comes up when you submit the form? That is SO annoying and not cool looking.
Thanx!
matt
August 23, 2008
[ permalink ]

hey that’s actually a good quastion, how do you customize the wufoo Logo in the submition message?
Chris Coyier
August 23, 2008
[ permalink ]

@Ariyo, @matt: Ya’ll should check out the “themes” section in your account. I believe you can customize that. Normally you don’t see a logo at all. See the contact form on this site, just a form, a message, and that’s it.
Dave Ellis
September 12, 2008
[ permalink ]

I do like the look of this and it seems perfect for me - the problem I have with services like this, is that you’re locked in pretty much forever once you start using it. I’d prefer an option with a single one off payment rather than monthly payments.
Jamie
September 19, 2008
[ permalink ]

The major problem with Wufoo is that you have to use a stinky iframe, which means there is barely any chance to customize the layout of the form. Try squeezing one of their forms into a sidebar for instance. At least with jotform you can edit the code base and html surrounding the inputs and buttons.

Niki Brown
July 24, 2008
[ permalink ]

Video stops about halfway through!!!

Great topic though - At my day job we use wufoo for class registrations and payments. Makes my job sooooooo much easier!

Will
July 24, 2008
[ permalink ]

Why would you pay for a service to create web forms when you could save money for you and your client by making them yourself? I mean are web clients really “cool” with paying for a “form” every month? I’m not trying to be sarcastic, but I really dont’ understand the logic in that.

Lisa
July 24, 2008
[ permalink ]

Read the post

“I just really like Wufoo. It has saved me countless hours. ”

That’s why.

Lauri K
July 24, 2008
[ permalink ]

This is a pretty slick service and your screencast’s a pretty nice overview of the features, thanks a bunch.

Dan
July 24, 2008
[ permalink ]

great walk-though! I wouldn’t be surprised if they approached you for advertising it so well! Seems like a pretty cool service..

Justin
July 24, 2008
[ permalink ]

Awesome. Thank you!

David Walsh
July 24, 2008
[ permalink ]

Customer forms are always the biggest time-consumer. That said, I’d rather do them myself so I had control over the entire form submission and registration process.

Nice service though.

Kristy
July 24, 2008
[ permalink ]

Im a web developer and the company i work for forces me to use wufoo.. and i am not a fan because of the iframes.. which shows up with different height in each of the browsers which then sometimes cuts off the submit button.. i find it a hassle.

Flash Animation
July 24, 2008
[ permalink ]

Nice video

Ken
July 24, 2008
[ permalink ]

Nice and informative video.

My question is a “two in one”:

When you build the forms for your clients are you managing them through your account, and if so do you charge your clients a monthly fee or everything is all inclusive on the design/development package price you gave them?

Or do you have your client sign up for their own account and then you build the form for them but ultimately you put them together for them?

Thanks for your answer.

VinnieJT
July 24, 2008
[ permalink ]

Holy crap Chris you’re a savior, between that band website and now this. I was having a problem programming a Paypal payment form then to notice that payment button on Wufoo that allows you to integrate it automatically.

Thanks a million

Ollie
July 24, 2008
[ permalink ]

When I first got to the word “iframe” I immediatelly closed it. Noooooooo iframe please.

Lauri K
July 25, 2008
[ permalink ]

Yeah I’ll have to add to my earlier comment that the iframe implementation does make this a lot less appealing than I thought at first. Semantics aside, a pain to work into an XHTML Strict doc.

Paul
July 25, 2008
[ permalink ]

You don’t necessarily have to use iframes to integrate the form with your web site; wufoo also offers the option of just getting the XHTML+CSS of the form (click). However, according to the documentation, you will have to create your own submit script.

They have a nice (click) POST-API so the script you would have to create just would receive input from the user and forward it to the wufoo API. Then, your script needs to read the return of the API and send the output (error messages, success notifications, etc.) back to the user.

If you are working with heavy+complicated forms, this still could save you some time; especially if you get your submit script dynamically to work with all forms that you are using on your site.

Nina Morena
July 25, 2008
[ permalink ]

I was using JotForm.com for a while and it saved a ton of time and allowed me to use CSS to alter the look and feel for the form. However, the building of the form was a little mundane. I’ll try this out.

Thanks!

Niki Brown
July 25, 2008
[ permalink ]

all you have to do is adjust the iframe height to bigger than you need it so it will work in (retarded) internet exploder.

No more submit button cut off!

Mark
July 27, 2008
[ permalink ]

I would rather recommend Appnitro Machform (www.machform.com). I’ve used it myself and it has no monthly fees and is cheaper. You can also host it yourself on your server. There are no limits and you can make as many forms as you want and plus it has more features than Wufoo.

V1
July 28, 2008
[ permalink ]

â€œI just really like Wufoo. It has saved me countless hours. â€

Thatâ€™s why.

I got to disagree with that Lisa… If your a skilled developer u would be able to knock some form up like that within a matter of minutes.

Ill rather deliver quality instead of using services for that.. I mean while your at it.. why not just quit your job and let psd2html do all the coding for u..

IMAGINE all the countless hours u would save with that!

acms
August 3, 2008
[ permalink ]

Thank you for this screencast. I would like to know more about the Advanced CSS options for each field.

kyle
August 5, 2008
[ permalink ]

I’m torn between this and JotForm.

On one hand WuFoo offers a nice, clean looking/clean coded, fully customizable and easy to install form. But on the other hand if you wish to use the XHTML/CSS code only then you have to connect the form to your own database, which is more of an advanced user option. But then again I don’t know how many people choose this option. Also, I’m not a HUGE fan of the iFrame honestly.

With JotForm, even though it produces a table based layout, it uses it’s own server to submit the form. But I think it’s also easy enough to remove the tables and replace them with a div structure.

Overall I like them both. I used WuFoo for my contact form on my website, Kyle Steed Design. But I’ve also used JotForm on some of my other clients websites.

kristarella
August 8, 2008
[ permalink ]

I’ve been meaning to try Wufoo, thanks for the tute.

I was just reading their terms and services and it says

Infinity Box reserves the right at any time and from time to time to modify or discontinue, temporarily or permanently, the Wufoo Site and Service (or any part thereof) with or without notice.

So, they could stop their service, or pause it without telling you… that’s pretty lame. Have you ever received service announcements from them that show that despite this harsh ToS, they provide you with good info anyway?

p.s. There are 2 live previews for the comments here… seems one is associated with the wmd-editor, the other not.

Chris Coyier
August 9, 2008
[ permalink ]

@kristarella: I think almost every web service has a ToS that says something like that. Yeah it does sound a bit harsh… but it’s to protect their company in case of disaster I think. If they absolutely guaranteed service for life, and then got wiped out by a tornado or something, then they could be liable to getting sued for not continuing service on top of that, that would suck.

I fixed the live preview thing… I used to have a plugin that dealt with it, but yeah, now I’m using WMD. I accidentally turned it back on after the 2.6 upgrade. Thanks for noticing!

kristarella
August 9, 2008
[ permalink ]

That’s a good point about unforeseen circumstances preventing service. Thanks for putting that in perspective for me!

Ariyo
August 20, 2008
[ permalink ]

This is a very cool service. However, I had a question!
How do you get rid of the Wufoo logo that comes up when you submit the form? That is SO annoying and not cool looking.
Thanx!

matt
August 23, 2008
[ permalink ]

hey that’s actually a good quastion, how do you customize the wufoo Logo in the submition message?

Chris Coyier
August 23, 2008
[ permalink ]

@Ariyo, @matt: Ya’ll should check out the “themes” section in your account. I believe you can customize that. Normally you don’t see a logo at all. See the contact form on this site, just a form, a message, and that’s it.

Dave Ellis
September 12, 2008
[ permalink ]

I do like the look of this and it seems perfect for me - the problem I have with services like this, is that you’re locked in pretty much forever once you start using it. I’d prefer an option with a single one off payment rather than monthly payments.

Jamie
September 19, 2008
[ permalink ]

The major problem with Wufoo is that you have to use a stinky iframe, which means there is barely any chance to customize the layout of the form. Try squeezing one of their forms into a sidebar for instance. At least with jotform you can edit the code base and html surrounding the inputs and buttons.

CSS-Tricks

New Screencast: Using Wufoo for Web Forms

Responses

Leave a Comment

How do you keep track of design inspiration?

Friends

Projects

History

About the Author