How to Send a Confirmation Email With a File Attachment Using Webhooks

Find out how to attach an uploaded file attachment to a confirmation email.

Not already signed up for Wufoo? Let's get started!

By: Chris Coyier

When someone fills in your Wufoo form, we make it really easy to send a confirmation email to them to say ”Hi. Thanks for the data. We’ve received it safely and we think you’re great!” This is a built-in Wufoo feature that you can activate in our Form Builder under the Form Settings tab. In the Confirmation Options area, you’ll just need to tick the Send Confirmation Email to User checkbox and then you can customise 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 that Wufoo confirmation emails can’t do is send an email with a file attachment. We often tell users that if they want to send people a file with their confirmation email, they should include a link to download the file in the customised message. That often works really well and results in almost the same experience. However, sometimes users just want to send a real file attachment in 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 have filled in a form is a fairly 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 are all probably old hands at making Wufoo forms (if not, see the Form Builder docs). The important part of this process though will be knowing the Field IDs 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 and then click the API information button.

API IDs

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 as 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 that you control (e.g. http://yourwebsite.com/sendemail.php)
  3. Customised

Towards the bottom of the script you’ll see a section of code that is meant to be customised. 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 that the Webhook will be sending over:

$to_email = $_POST['Field103'];

Remember those Field IDs 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 can get as fancy as you like customising the final email that is 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 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 that 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 you try it out a few times and that it’s working before being deployed. Fill in your own form using your own email address and see whether you receive the email and file attachments. If you run into any trouble, try these troubleshooting steps:

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

Check out an example of a file-sending Wufoo form in action!