The Wufoo Blog

How to Send a Confirmation Email
with a File Attachment Using WebHooks

By Chris Coyier · March 31st, 2011

When someone fills out your Wufoo form, we make it really easy to send a confirmation email to them to say,”Hey! Thanks for the data! We totally got it and we think you’re great.” This is a built-in Wufoo feature you can activate in our Form Builder under the Form Settings tab. In the Confirmation Options area, you’ll just need to check the Send Confirmation Email to User checkbox and then you can customize this message in lots of ways including who it comes from, what the reply-to email setting is, and the message it contains, which can include values from the entry itself using our templating features.

One thing Wufoo confirmation emails cannot do is send an email with a file attachment. We often tell users that if you wish to send people a file with their confirmation email, include a link to download the file in the customized message. Often times, that works great and is nearly the same experience. But sometimes you just want to send a real file attachment on an email. Like where the file is part of the email message itself. This is not a feature that Wufoo offers directly, but in this tutorial we’ll show you how you can accomplish this on your own by using Wufoo’s WebHooks.

The Big Idea

Sending whitepapers to people after they fill out a form is a pretty frequently asked question here at Wufoo, so let’s use that as an example. This is what we’re going to be doing.

Send Whitepaper

  1. Create a form that contains at least one email address field.
  2. Create an email script on your website to send the emails with the files.
  3. Set up a WebHook notification on your Wufoo form to hit that email script.
  4. Test and Deploy.

Some of this sounds a bit tricky, but we’ll walk everyone through it each step of the way and even include the code you need to send out your emails with attachments. It’s going to be fun!

1. Creating a Form with Email Field

You all are probably old pros making Wufoo forms (else, see the Form Builder docs). The important part of this process though will be knowing the Field ID’s for each of the fields you create. To find that out, after creating your form head back to the Form Manager, click the Code button beneath the form then click the API information button.

API ID's

We’ll need these numbers for our email script…

2. Setting up the Email Script

For this part, we’ll be using the popular and ubiquitous PHP server-side language, but just about any server-side language could be used so long as it’s capable of sending email. The following example PHP script (based on this one) should be:

  1. Copied
  2. Placed onto a server you control (e.g. http://yourwebsite.com/sendemail.php)
  3. Customized

Toward the bottom of the script you’ll see a section of code that is meant to be customized. To use this for your own needs, you’ll be changing the file name, file path, “from” name and email, subject, and message. These are static values that remain hard-coded in the script.

A few parts of this script are dynamic values that will come from the values from the form entry itself. The most important of which is the email address of the person requesting the file. In the script, we pull this value by using the POST values the WebHook will be sending over:

$to_email = $_POST['Field103'];

Remember those Field ID’s we saw after creating the form? This is exactly why we need to know them. If the email field on your form is “103”, the POST value will be “Field103”.

Every single value from your form will be accessible to this script when we set up the WebHook. You could get as fancy as you want to be in customizing the final email sent. In our example script, as fancy as we get is adding the first name of the requester in the opening line of the email.

WebHook Setup

3. Setting up the WebHook Notification

Now that our form is ready and our script is in place, we’ll tell Wufoo to hit our script every time the form is successfully submitted. That’s the whole concept of a WebHook! We do this under the form’s Notification Settings (click ** Notifications** underneath the form from the Form Manager).

From the “Another Application” dropdown menu, select WebHook and click the “Add Integration” button. Then enter the URL of where you placed the script. In the “HandShake Key” input, enter a unique and secret value. This will add security to your script. Without this value being POSTed to the script, it will not run, so no other application can hit the script and send email, nor can the URL just be visited in a web browser. Make sure the test logic for the HandshakeKey in the script matches the value you enter here.

if ($_POST['HandshakeKey'] != 'milk-and-cookies') {
    echo "<h1>You are not who you say you are, mister man.</h1>";
    die();
}

With your WebHook notification saved and script altered to match your HandshakeKey, you’re all set to start testing things out.

4. Test!

As with anything you build, make sure to try it out a few times and make sure it’s working before deploying. Fill out your own form using your own email address and see if you get the email and file attachments. If you run into any trouble, try these troubleshooting steps:

  • Go back to the Notification Settings area in Wufoo and see if there are any errors. If there are, there will be a big red popup telling you what your server response was. You’ll need to make sure your server doesn’t return an error when Wufoo hit’s that URL. Common ones being 404 (you got the URL wrong) or 500 (possibly a permissions error).

  • Set up a Postbin URL and add an additional WebHook pointing to that. After submitting a form, the WebHook data should be viewable there, so you can ensure the correct data is being sent by Wufoo.

  • Give it a few minutes for the email to arrive. Wufoo WebHooks are pretty instantaneous, but your server and email service may not be quite that fast.

What else could you use this for?

Sending a file with a confirmation email could be used for cases where you want to offer a

  • Simple File Request: Product interest survey which sends whitepapers on relevant products
  • Rewards: Sign up for newsletter and get free eBook
  • Next Steps: Make a camping reservation and get a PDF map of area
  • Surprise: Contact form for a band automatically sends free MP3

Check out an example of this a file-sendin’ Wufoo form in action!

This entry was posted 3 years ago and was filed under News & Updates. Comments are currently closed.

Comments

  1. It works! I love it.

    Fellow form admins: note that Field101 in the above code is intended for the first name of the form submitter.

    Posted 3 years ago by Andrew Benkard.
  2. Cool…but how hard would it be to make this more user(stupid) friendly?

    Posted 3 years ago by Jorge Morales.
  3. It’s not working for me :( I followed the instructions step by step and get no error messages …but the email with the attachment is not arriving.

    Posted 3 years ago by Blanca.
  4. Too cumbersome to even think about for me.

    Will continue to use my current solution: write an URL from where they can download the document.

    Posted 3 years ago by Gustav.
  5. (nods head in agreement with above posters)

    We need a more technically inclined guy to make this easier for us stupid people.

    If you can make this process easier please do! (wufoo or wufoo contributor)

    With this functionality you could almost eliminate porting the email over into an email marketing service if the primary goal is just getting the initial contact info an exchange for the ‘carrot’ the report/ebook/whitepaper etc.

    Great to know that this capability exists!

    Posted 3 years ago by Justin.
  6. Does anyone know any known issues with Rackspace? I know rackspace used to be sticky with their php(mail) sends …

    I have my form all set and functioning, … getting post data in my notifiactions just fine, Posting to Postbin ok as well … but nothing back from my sendmail.php on the server … . Have checked and double checked hook url and security in script… even get the message “You are not who you say you are, mister man. ” when I hit the url directly … so i know its running the script … but no success. Even added the -f infront of my reply to email to try to push it through … no success.

    Any suggestions from others or Wufoo staff would be appreciated???

    http://www.expertcleanup.com/partners/sendemail.php

    Posted 3 years ago by Brian.
  7. Anyone need help with this?

    I’ll do everything to your specifications and charge you for one hour of work ($75), payable after the work is done, and you’re completely happy. Secure credit card payments via Google Checkout.

    Submit a quick Web development help request.

    Posted 3 years ago by Gabriel.
  8. I get the web form to work, however I believe there is an issue re: setting mime-type and/or character set for certain files (like PDFs).

    Posted 3 years ago by Christopher.
  9. Hi… I’d like to make a form where the submitter posts a file(s) and those files are emailed to the recipient of the form. Example… a web request form, where the submitter can attach a screenshot of an error. That error would be uploaded and then emailed along with the submission to the recipient (internal person) If not emailed as an attachment, than a link to download it from where it’s stored is acceptable. Anyone ever do this?

    Posted 3 years ago by Jason.
  10. I am so disappointed. I have been using MailChimp and gotten spoiled with how user-friendly their newsletter-related forms etc are. Now I need to create some forms outside of that platform, e.g. to register to download a white paper from a website and expected to find similar helpful directions here. What I really wanted was, in fact, for users to be able to choose from several downloads, and not to have to register separately for each one. :-(

    I’m also upset that there doesn’t seem to be a way to change sub-headings within a form entry area e.g. the first and last name entry areas under the Name area to another language.

    Posted 3 years ago by Karen.
  • Search

  • About

    The Wufoo Blog is the official online publication written by the developers of Wufoo about their online form builder, form-related technologies, and whatever else may fit their fancy—like robots.

  • Archives