Cognito Forms

Today we’re going to take a look at the online form builder, Cognito Forms, and how you can connect Formstack Documents to generate a customized PDF receipt for an order form.  Then we’ll email that receipt directly to our customer.

Cognito Forms provides a super easy way to send data over to Formstack Documents using a built in JSON POST to a specific URL (your document’s Merge URL), but more on that later. 

To get started, let’s setup our form in Cognito Forms so we know what field names to use in our Formstack Documents document.  We’re just going to use the order form template that Cognito Forms provides and that finishes up that step.

Next, let’s jump into Formstack Documents and create a new document.  This is going to be our template for the receipt.  We’re going to use the online document builder to setup our template, so on the New Document process, choose the Build Your Own option.


After clicking next, you’ll be taken directly to the document builder.  Here’s where you’re going to add your logo, address, etc.  You’re also going to add the merge field tags in the document so that Formstack Documents knows where to put the data when merging the document.  Merge tags looks like {$Email}, {$Phone}, etc.  The name of the merge fields need to correspond with the “label” of the form field on your Cognito Form (without any spaces)

Cognito has a few special field types that send over complex field types (subfields - in array format) so we’ll need to use a special merge tag.  For example, the “name” field will come over as an array with “First”, “Last”, and “FirstAndLast” as values, so we can reference that field like {$Name.First}, {$Name.Last}, or {$Name.FirstAndLast}.  The part after the dot (“.”) is the “sub-field”.

Here’s what our document looks like:


One more thing we need to do with our document is loop through the line items that were purchased on the form.  This data is going to come over in a list (array) format, so we’re going to use the {tablerow} (more info here) tag to loop through each item in the list and print out the value.  Again, you’ll want to use the dots to signify a subfield.  Don’t’ worry if you don’t know what subfields to use, we’ll get to that shortly.

Go ahead and save the document then move on to the Settings tab.  On this step we’re going to turn on “Debug” mode which is going to allow us to easily see the data that’s coming over from Cognito Forms.  We’ll be able to update any fields in our document we were unsure what they’d be called.  To turn on Debug mode, go to the Status section and click Test mode then click the box below to save data for debugging.

Before we jump back over to Cognito to run a test, let’s setup our email delivery.  This email delivery is going to tell us where to email your receipt when it is generated.  From the Deliver tab, go ahead and edit the default delivery that is there.  For the “To” address, we’re going to pick the Email field from our document and then we’ll customize the rest of the settings.

Great, we’re ready to jump back into Cognito and setup the JSON POST.  Before we leave Formstack Documents, go to the Merge tab for your document and grab (copy) the Merge URL.  This Merge URL is a unique url for your document and we’re going to use this for Cognito to send the order data to your receipt.

Inside Cognito Forms, go to the Build page for your form and click the Submission Settings at the bottom of the page.  This will open some settings on the left, but you’re only interested in the POST JSON data to Formstack Documents.  Turn that “on” then paste the Merge URL into that box.  Go ahead and save the form.

Let’s run a test!  Go to the Publish page for your form and open up the form in a new tab (using the URL on the publish page).  Fill out a test order with a few line items then click submit.

Jump back over to Formstack Documents and go to the Overview tab for your document.  You should see a recent merge there (from the test order you just did) and a View Data button.  If you click that button you’ll be able to see all of the data that was sent over from Cognito.  If you click on the names of the fields on the left it will even show you the merge tags that you need to use in your document.

If you have any missing data in your document, refer to this data and update your document accordingly.  Once you have your document all ready to go, make sure to turn off the Debug mode under the Settings tab and then you’ll be all set!

Here’s what our receipt looks like:

Congrats!  You can now send customized PDF, Word, PowerPoint, and even Excel documents right from your Cognito Forms.  You never have to copy and paste data into a template again!  Can you think of any other ways you can use Formstack Documents to simplify your paperwork process?


Embed Signature

If you need to embed a signature in your document, you'll want to follow the normal instructions (found here), but Cognito sends over a base64 encoded image, so we'll need to make a slight modification.

Using the Field Map you'll want to add code similar to this (change the merge field to match yours):

{if !strstr($signature, "base64")}data:image/png;base64,{$signature}{/if}

 This code will add a little bit of code to your image to tell our system that it's base64 encoded image data so we can embed in your document.

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



Please sign in to leave a comment.