As part of our ongoing tradition of inviting partners to publish guest posts in Wufoo blog, we are glad to feature an awesome document generation application, Webmerge that integrates well with Wufoo web forms.  Our friends at Webmerge have nicely laid out the easy steps to setup the integration with Wufoo.

Collecting orders from your website can be easy with a web form from Wufoo.  With Wufoo, you can build your form in minutes and customize the look of your form with ease.

Add WebMerge to your order process, and you can automatically generate documents like contracts, invoices, letters, and more.  WebMerge can automatically take the information that’s submitted through your form and populate a template.  You’ll never have to copy & paste data into a template again!

In this example, we’re going to show you how to automatically generate a PDF receipt from an order form.  We’ll automatically email this receipt directly to our customer when they submit an order through our Wufoo form.

To get started, we’re going to setup the template for our receipt in WebMerge.  From the Documents page, click the New Document button then enter a name.  On the next step, select the Build Your Own document type and then continue.

Next, you’ll be taken to the Document Builder where you can setup your receipt template.  We’re going to add our logo, contact information, and then for the spots that we want to insert our customer/order information, we’re going to use merge fields that look like {$CustomerName}, {$Amount}, etc.

Here’s what our receipt template looks like:

Once you have your template finished, let’s save the document and you’ll be taken to the Settings tab where you can modify various options like the type of file that is generated and the name of the file.  For this example, we’re going to generate a PDF and include the name of our customer in the file name.

We’re also going to turn on Debug Mode (under Test Mode) and then we’re going to turn on the Field Map (under Advanced Settings).  We’re going to use this later to match our Wufoo fields with our merge fields.

Next, we’re going to setup our email delivery so that the receipt is emailed directly to our customer.  On the Deliver tab, click the Edit button under the default email delivery.  For the To address, we’re going to use the merge field for the customer’s email address.

If you don’t have a merge field in your document for the customer’s email address, select <<Other>> from the dropdown then enter something like {$Email}.

Feel free to edit the other settings of the email delivery.

After you have saved your email delivery, we are ready to setup the integration with Wufoo.  To send the Wufoo form entries over to WebMerge, we’re going to use Webhooks.  We need to grab the Merge URL for our document from the Merge tab.

Inside Wufoo, we’re going to add a new Webhook to our form.  Go to Edit your form then choose Add Integration from the list.  On the next page, select Webhook from the Add Application dropdown.

Then, we’re going to add our Merge URL in the Webhook URL box.  This will automatically send every form entry over to WebMerge.

Once we have our webhook setup, we need to run a test so that we can map the Wufoo fields to our merge fields.  Go ahead and submit another entry to your form, then go back into WebMerge.

Inside WebMerge, you’ll want to go to the Overview tab of your document and you’ll see a View Data button.  Click that and you’ll see a list of all the fields that we’re receiving from Wufoo.  If you click the fields, you’ll see the field code you need to use in your Field Map to match up with your merge fields.

The last piece of the puzzle is to take the field codes from the Overview tab and put them in the Field Map under the associated field.  Here’s what our Field Map looks like:

After you have matched up all your merge fields with the field codes from Wufoo, we’re done with our setup!  We’re now ready to generate a real receipt when we get an order.  We’ll do one more test to make sure everything is working correctly.

Here’s what our merged receipt looked like:

Congrats, you’re all finished!  You can now automatically populate all kinds of documents from your Wufoo entries.