🎉  Build a workflow powerhouse. Learn more about our new Airtable integration.   🎉

February 09, 2017

Populate Invoices for 123FormBuilder Order Forms

Taking orders online with a tool like 123FormBuilder can be an easy way to streamline the order process for your customers.  By building a simple online form, you can collect customer info, order info, and collect payment.

Then, you can use WebMerge to automatically populate documents like invoices, receipts, and letters when your order form is filled out.  You’ll never have to manually create a document again!

In this example, we’re going to show you how to automatically populate an invoice with data from the order form and then send it directly to our customer after they submit their order.

To get started, we’re going to setup the template for our invoice using the online document builder.  Inside WebMerge, click the New Document button and then enter a name for your document.  On the next step, select the Build Your Own document type and continue.

Inside the document builder, you can setup your invoice template by adding your logo, contact information, and then for the spots that you want to insert the order/customer info, you’ll need to use merge fields that look like {$CustomerName}, {$Amount}, etc.

Here’s what our invoice template looks like:

Once you have your template finished, save and you’ll be taken to the Settings tab where you can modify various options like the type of file that you want to generate 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.

Next, we’re going to setup the email delivery of our document so that it is automatically emailed to our customer.  Under the Deliver tab, go ahead and Edit the default email delivery.  For the To address we’re going to choose the merge field for the customer’s email address.  Feel free to edit any of the other settings in the email using merge fields.

After you’ve saved your email delivery, you’re done with the setup process in WebMerge and you’re ready to integrate with 123FormBuilder using a Webhook.

To use the Webhook, we need to grab our document’s Merge URL from the Merge tab inside WebMerge.  This is a unique URL for our document.  Go ahead and copy this for later.

Inside 123FormBuilder, we’re going to add a Webhook integration to our form.  This will send the data over to WebMerge when we get a new order.

From the Settings page for your form, click on the Applications section and add the Webhooks integration.  You’ll need to enter the URL that you want to send data to and you’ll paste your Merge URL you copied early.

Then, for each of your merge fields, you need to add them to the webhook.  Click the Customize button to add the fields.  This tells 123FormBuilder how to send your data over to WebMerge so that it is populated in the correct spot on your template.

Here’s what our webhook fields looked like:

Once you have saved your webhook, you’re done with the setup process and you’re ready to run a test!  Submit a new entry to your form and then 123FormBuilder will send the data over to WebMerge and your invoice will be generated.

Here’s what our invoice looked like ready to send to our customer:

Congrats, you’re all done!  You can now instantly generate all types of documents from your 123FormBuilders.  Can you think of any other ways that you can use WebMerge to simplify your paperwork process?

5 min read

Ready to give Formstack Documents a try?
Start your Free Trial now!


Create Invoices from 123FormBuilder Now

By signing up here, you agree to our Terms of Use