Taking orders online with a tool like 123ContactForm 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 Formstack Documents 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 customers after they submit their order.

To get started, we’re going to set up the template for our invoice using the online document builder.  Inside Formstack Documents, 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 set up 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 set up 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 Formstack Documents and you’re ready to integrate with 123ContactForm using a Webhook.

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

Inside 123ContactForm, 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 123ContactForm how to send your data over to Formstack Documents 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 123ContactForm will send the data over to Formstack Documents 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 123ContactForms.  Can you think of any other ways that you can use Formstack Documents to simplify your paperwork process?

Was this article helpful?
1 out of 1 found this helpful



Please sign in to leave a comment.