How to use Wufoo for HTML “E-vites”
Wufoo is a wonderfully capable “form management” app, that’s been re-enforced and revised over the last couple of years. It basically handles form creation, data collection, payment processing, and reporting of all collected data. Exceptionally easy to work with – not only for designers – but for no-tech savvy site editors.
One of the beauty’s of using Wufoo on your site, is that, while it can be utilized through a built-in API (for serious power and fliexibility), it is not required. The standard embed code associated with each form you create – using JS or iFrame – is all you need to place it on your site.
The way to do it through Wufoo, is pretty straightforward.
Create the HTML email in Dreamweaver/Textedit/whatever you use. Add any images, links, etc. you need. Make sure to only take what is between the tags, as the other markup will kill the rendering. And remember to keep it 90s era code…no divs, or external/detailed styles. For all the HTML5 Standardistas…you need to swallow your pride and deal. I know…I know…
Set up a form in Wufoo, making sure you add “your email” and “your friends email” fields, as well as naming the form in a friendly manner…“You’ve Been Invited to…blah, blah, blah” is a good one for me. This is important, as the Form Name will be the Subject Line of the evite, as well.
Select “Field Settings” for that form, then check “Send Confirmation Email to User”. The, under that (in the Send To area), select the drop-down and choose “Friend’s Email”.
Click the “Customize Confirmation Email” button under those fields, and paste in the HTML email content.
Tweak that code for the form, to add the form field info at the top (or wherever you want it to fall in the email). This is my code for a “Met at the Met” evite: “You have been invited by {entry:Field1}” …followed by the HTML code.
To get the “{entry}” variable information for the form, click “Forms (to go to the Form Manager) > go down to the Evite you created > Select “Code” > then on the Form Code Manager, select “API Information (upper right of that page). The “{entry} codes are listed for that form. Field1 is for the First name field.
Some nice benefits of using Wufoo, in this way:
- All data is captured and easily reportable: view report here
- You can have an email sent to staff every time an evite is sent out. Helps track usage (and abuses).
- No need to get into the code (other than the HTML for the email). Easier and more user-friendly for most.
Some not-nice downsides of using Wufoo, in this way:
- Unless you’re comfortable diving into the API for Wufoo (if you are comfortable working with PHP/JS, you’d do fine), you are limited to one recipient at a time. This comes into play, when you need a way to batch-invite a group of friends.
- Subject line can not be dynamic. It is hard-coded in Wufoo. You can specify the subject line, in the form admin itself, but you can not use the {entry:Field#} technique. This is just how Wufoo handles confirmation emails.
Note: This is NOT for uber-geeks or programmers. Because, as we all know, they actually get a twisted thrill out of doing this all from the ground up
.

If you are interested in hiring me on for a project, please contact me from my Forrst.me page. I'm a sushi-eating, 40-yr. old, conservative who enjoys listening to a bit a good music while he works.
Thanks for this interesting post. I will be sure to get the word out about this site
Excellent post. Can’t wait to see the next article.
Thank you so much Marine.