How to combine Wufoo and WordPress for easy custom web forms

Ed: This article is part of the 21 Days of WordPress Tips

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.

Comments

comments