Tuesday, May 4, 2010
Wufoo is a service much like EditMe, but it lets regular people build web forms, not web sites. Put Wufoo and EditMe together, and you have a powerful combination of web publishing with forms. And these aren't just basic forms... Wufoo has a crazy number of cool features. The best part: you can put your Wufoo forms on your EditMe site with a little copy and paste.
First, go to http://wufoo.com and click Sign Up for Free!
Once you've logged in, click the New Form! button to create your first form.
This brings you to the screen pictured below. You can set the title of the form and introductory text.
Click one of the buttons in the Add a Field tab on the left to add fields to your form. There are tons of different kinds of fields you can add, including text, number, multiple choice, dropdown, date, time, web site, price, phone and file upload.
When you're done, click the Save Form button. That will bring you to a screen where you can tell Wufoo what to do when somebody submits a form. Click Setup email notifications to continue.
The Notification Settings screen lets you do some cool things with your form data when its submitted. You can have it emailed to you, sent in an SMS message, added to an RSS feed or posted to a number of web services like Twitter.
When you're done, your form will be listed on your Wufoo home screen. Each form has a number of buttons underneath it, including a Code button. This is how you'll get the code snippet to paste into your EditMe site.
When you click the Code button above, you get this screen. Again, there are just a ton of options here. The easiest way to include the form in your EditMe site is to use the Embed Form Code tab. Click the JavaScript Version and use Ctrl+C (or Command-C on a Mac) to copy it to the clipboard.
In EditMe, you'll want to create a text-only page to house your Wufoo form embed code. Just click New Page, enter a title and click Submit.
On the editing screen, click the Text Editor button beneath the editor. This replaces your rich text editor with a plain text field.
Then paste in your Wufoo embed code using Ctrl+V (or Command-V on a Mac) and click Save & Close.
Once you save, you'll see your form displayed on your site. You can either add this page to your site's navigation using the Organize tab of the editing screen, or include it in some other page of your site as we've done below using an include tag. I named the page WufooForm, so I entered the following:
[[include:WufooForm]]
And here's what that looks like:
Feel free to submit the form and give it a try!
