How to combine Wufoo and WordPress for easy custom web forms

Friday, January 2nd, 2009 | 21 Days of WordPress Tips, Code, Tips, WordPress

This post originally appeared by Tim Grahl in our blog at Out:think Group, if Tim is referenced in the comments, that's why.

Allowing clients to create and edit their own web forms is a problem I’m constantly running into. For some businesses, your standard contact form is enough, but I’m getting more requests to manage web forms on their own. Obviously this is no small task and there isn’t any easy way to do it currently in WordPress.

There are a couple plugin options but each is lacking:

cformsII – This is a very popular plugin. It’s been downloaded over 350,000 times, however I believe it is because it’s pretty much the only option available. I’ve used it myself on several WordPress sites because it was the best available option. However it’s very buggy, conflicts with a lot of other plugins and the user interface is atrocious.
Contact Form 7 – This is also a pretty popular plugin at over 130,00 downloads. However building a custom form and having it email the right elements to the right people is extremely complicated. You have to be pretty technical to do anything but the default contact form it comes with.

There are a few other options other than the above, but those are the two most popular and still don’t get the job done.

Recently I put together a much better solution…

Wufoo.com is a web based service that makes creating forms “easy + fast + fun”. After using the service for well over a year, I would have to agree! I’ve had people that are extremely computer illiterate sit down with Wufoo and start creating forms with almost no help. The interface is extremely intuitive and is actually fun to use. Not to mention, they have a great set of features.

One of our recent clients does a lot of email campaigns on her own in which she sends readers to a unique landing page. She loves the ability to create a new page easily with WordPress but wanted to be able to create her own lead generation forms to drop on the page. So in a few simple steps, I combined WordPress and Wufoo for the perfect solution.

The first half of the process is setting up Wufoo and showing the client how to use it:

1. Create a Wufoo.com account for the client.

wufoo-acct

2. Walk the client through creating a form with Wufoo. Seriously, it’ll take five minutes.

wufoo2

3. Show the client how to copy/paste the embed code.

wufoo3

wufoo4

The second half of the process is setting up WordPress to show the Wufoo form:

1. Create an empty file in your WordPress theme called page-lead-gen.php

2. Copy all the code from the current page.php and paste it into the new page-lead-gen.php

3. Add this code to the top of page-lead-gen.php:

<?php /* Template Name: Lead Generation Page */ ?>

wufoo5

4. Add this code to page-lead-gen.php underneath the “the_content()” function:

<?php echo get_post_meta($post->ID,'wufoo-embed',true); ?>

wufoo6

5. Create a custom field for the client to paste the Wufoo embed code in. Make sure you name the custom field exactly “wufoo-embed”. This is the keyword that is used in step #4. (P.S. Have the client delete the last line of code with the <small> tag so it doesn’t show a Wufoo link)

wufoo7

6. While on the page Write screen, under the Attributes on the right sidebar, in the Template drop down, select “Lead Generation Page” so you will use the new template page you created in steps 1-4. (This is an UPDATE thanks to Jerad Hill pointing out my omission in the comments!)

And that’s about it!

Now all the client has to do to add a new web form is create it in the Wufoo and copy/paste the embed code.

Special bonus: To update a form on the website, all they have to do is change it in Wufoo and save it.

Filed Under: 21 Days of WordPress Tips, Code, Tips, WordPress

Discussion

January 6, 2009

Adding custom Wufoo web forms to your WordPress blog — WPCandy — WordPress Themes, Plugins, Tips, and Tricks says:

[...] Neat if you want to add, say, a contact form, without having to rely on plugins. [Links] [...]
January 6, 2009

Wesley says:

Great thinking, love it Plus, the wufoo forms are really nice to look at
January 6, 2009

mkjones says:

Hm, the pricing for Wofoo seems a little bit high. And the iframe embed seems a little bit Web-one-point-oh to me.

You can get very similar features using Google Forms (part of Google Docs) for free.
January 6, 2009

Jerad Hill says:

I love Wufoo and use them for my sites and all of my clients. Web 1.0 you say? No way. I never get spam through these forms, they are amazing. Yes you could write your own forms to work as smooth but why? I pay $24.99 a month for their service. I never have to worry about an email not coming through. The emails that the form sends are formatted oh so nicely. My clients really appreciate how nice the forms look and the nice email they get with the data. It’s an added value I offer my clients.
January 6, 2009

Jerad Hill says:

You did leave out one important note. You have to go to the page you created in WP and change the Page Attributes to point to your new Lead Generation Page.
January 6, 2009

Tim Grahl says:

mkjones: In my experience, in much better to focus on delivering the best product to the client instead of worrying whether it’s the hottest Web 2.0 gadget. Wufoo is, by far, the easiest, most useful way to let a client create and manage web forms on the fly so that’s what I offer.

Jerad Hill: Thanks for that catch! I added it and gave you the credit.
January 7, 2009

Jeff Mackey says:

Hi guys–just found your blog. Nice!

Regarding this tutorial: awesome. I can’t believe I didn’t think of this before. I’m a case example of setting up multiple client sites with WordPress and cforms, and having to wade through “redesigning” the form to match the client site.

Nothing against cforms, like you said it’s a nice plug-in, but the drop-dead ease-of-use of Wufoo is great.

The whole form-in-an-iframe did make me a little squeamish (comment about “web 1.0″), but I can see how the ease of set up outweighs any sort of web 2.0 unofficial rule.

Thanks again,
Jeff
January 10, 2009

Kate says:

Great tips, can we add wufoo code with WordPress build-in HTML editor, instead with post meta (custom field)?
February 6, 2009

Jonathan says:

The only problem I’ve run into is that if submitters don’t fill out required fields, and attempt to submit, the “There was a problem with your submission. Errors have been highlighted below.” message, along with all of the individual “This field is required. Please enter a value.” messages, make the form longer than the original iframe, making the bottom of the form (with the all-important ‘submit’ button) disappear from view. Any ideas?
February 6, 2009

Jonathan says:

Never mind – I manually extended the iframe vertically, which fixes the problem.
March 6, 2009

Eric Hall says:

Nice article. Never thought of this.

While I wouldn’t complain about an iFrame being web 1.0, I do agree that using iFrames make me nervous. Too many browsers with too many stupid bugs.

But, I think I totally agree that the benefit and ease of use far outweigh any downsides.

It’s not the wufoo is web 1.0 (old fashioned) – it’s that iFrames are.

They break too easily, etc.

But, the benefit here might be great.

Nice article.

Am tweeting it.

@ehdesign
October 22, 2009

Marcus says:

It’s been a few months since the last comment, but Wufoo now allows you to insert forms via javascript. Not so “1.0″ anymore. Again the ease of use outweighs any issues with javascript turned off. Who turns their javascript off anyways….
February 28, 2011

Kyle Professional Website says:

One of our recommended designers uses Wufoo with almost everyone of his clients for forms up to an including multi-page school registration. Great product, great review.
June 27, 2011

andi says:

hey, if anyone is researching to make a case for the $200 Gravity Forms license, here’s a tip. It’s not compatible with Go Daddy. After several hours of researching, testing, setting up SMTP crap on wordpress, and CALLING GO DADDY, I was still unable to get gravity forms to send email responses. I sent an admittedly frustrated note to the support email (that’s all you get) and I was kicked out. Literally. They refunded me, took away my APIs and I lost everything. Be warned. Gravity is not what you think it is.
August 26, 2011

rog says:

Nice, but is there anyway of pulling WP user data into the Wufoo form (like name?) if they’re logged in?

I’ve done similar with Mailchimp, using the custom fields functionality in the edit profile screen, however I haven’t yet found a way of doing it with forms inside of WP (apart from the CF7 Dynamic Text Extension plugin) which, like Jose say’s, is a trifle scary even to hardened WP addicts.
September 15, 2011

Richard says:

I found your tutorial informative as it certainly increased my knowledge and understanding of WordPress. I felt that parts could have done with a bit more of an explanation as I feel the level of this tutorial assumes a certain understanding.

I actually had to use another site fill those gaps in WP knowledge, things like “WordPress how to add a custom field”

Overall 8/10

Thanks,
Richard
September 28, 2011

Covitz says:

This is very long man. JotForm has the same integration and you are done in 1 min with it. Well people like the flashy designs of the site but don’t worry about the usability. Don’t be fooled of these things guys.
September 28, 2011

Joseph says:

@covitz,

I’ve never used JotForm, it does seem very cool though. I have used Wufoo though, and would recommend it to just about anyone. I’m not sure what you mean about the flashy designs, wufoo is pretty simple, and the usability it provides is incredible, not to mention the integration with mailing list providers. I think you’ll be hard pressed to find many negative things to say about it.
November 30, 2011

Solai Luke says:

This is a interesting submit! Appreciate your the idea! Along with best wishes Luke aka couchgool.