I had a contract that I needed signed by 60 people. Rather than ask them all to print, sign, scan, and send it back to me, I wanted to see if I could tackle it digitally with tools I already had at my disposal (as opposed to paying for some fancy software just for this one contract).
I've been using Gravity Forms for quite some time and it was already installed on this site, so I decided to see if I could make it happen just with Gravity Forms.
My goal was to put the contract on a webpage and have the visitors fill out their name / address / phone / e-mail and digitally sign it using Gravity Form's Signature Add-On. Then I wanted to deliver a copy of the signed contract as a PDF to their e-mail address and mine so that we each had a copy.
Gravity Forms does not have a built-in option to deliver form content via PDF so I had to use a 3rd party plugin called GravityPDF. The plugin is free and offers paid add-ons like additional features and templates. For my purposes, the free version of the plugin would do the trick.
I installed the GravityPDF plugin and went through their setup process, which only took a few steps. After the plugin is installed, the settings for it now appear within Gravity Form's other Main Settings and within the Form Settings.
I created my first PDF relationship with the contract form I created, however, I was disappointed to learn that I couldn't update the PDF easily. All the plugin does by default is take the All Fields information that would normally be in an e-mail and embed it within a PDF. I'm sure this is great for some purposes, but it didn't work for my contract.
The reason it didn't work for me is that the contract I created existed on the WordPress page itself and the Gravity Form only had fields for Name, E-mail, Phone, Address, and Signature. So what was happening by default is that the PDF was only including the Name, E-mail, Phone, Address, and Signature without the rest of the contract on the page. And there was no way for me to edit the PDF with merge tags from the frontend of the plugin. My only options for customizing the template was to edit the Header and Footer. However I wanted to be able to input the entire contract, replacing “YOUR NAME” with merge tags, and appending the digital signature to the bottom — all within the PDF.
This was still possible, but not from the plugin settings. To accomplish this I had to create a Custom Template following these instructions from GravityPDF which require familiarity with PHP, CSS, and HTML. (AKA: Not ideal for a typical user.)
I'm no PHP expert, but I gave it a whirl and turns out it's actually a lot easier to do than I originally thought it'd be. I'll summarize the steps I took below. These instructions are a little different than the long ones that GravityPDF provided, but I found it to be easier and work just as well to copy / paste an existing template and work from it instead of build one from scratch.
How To Create A Custom Template with GravityPDF
- In WP-Admin–> Forms–> Settings–> PDF–> Tools–> Click “Run Setup” next to “Setup Custom Templates”. This creates a folder in your WP-Content/Uploads/ folder called “PDF_EXTENDED_TEMPLATES”.
- Visit the “PDF_EXTENDED_TEMPLATES” folder via FTP and download one of their PDF templates. I downloaded the zadani.php file.
- Change the file name from zadani.php to whatever you want. I changed mine to “book-contract.php”.
- Open the new book-contract.php file and edit accordingly the information at the top. I changed things like the following:
/*
* Template Name: Book Contract
* Version: 10
* Description: Contract for Capital Cities Book
* Author: Paul Drecksler
* Author URI: https://travelislife.org
* Group: Custom
* License: GPLv2
* Required PDF Version: 4.0-alpha
* Tags: Header, Footer, Background, Optional HTML Fields, Optional Page Fields, Field Border Color
*/ - Scroll down mid-way through the file and you'll see where the “</style>” tag ends. You can erase everything underneath that STYLE END tag and input your contract.
- Input your MERGE TAGS within your contract wherever you'd like them to appear. For example, I replaced “YOUR FULL LEGAL NAME” with the merge tag “{Your Full Legal Name::2}” from my Gravity Form. (Yours will be different depending on your form fields.)
- You'll need to style the text you input with basic HTML tags like P, Strong, Line Break, etc in order for it to come out the way you want to. Hitting “Enter” twice doesn't create a line break. You've got to use HTML.
- Upload this file to your FTP folder “PDF_EXTENDED_TEMPLATES” from before. It will now appear within GravityPDF settings under Templates.
- Go to Form Settings (of the individual form)–> PDF–> Add New PDF
- Name it. Choose your new Template from the dropdown menu. Add it to your Notifications. (Create one if needed). Create a file name for it (you can use merge tags). And save it. I had created two Notifications — one for me and one for the signer — and attached the PDF to both Notifications.
- DONE! Now you've created a custom template that includes all the info you need in the PDF mixed with your MERGE TAGS from the Gravity Form.
Hi Paul, thanks for sharing.
An update on the location of the file (couldn’t find it)
It’s now in wp-content/plugins/gravity-forms-pdf-extended/templates
Perfect, I should have known that >.<
Thanks heaps Paul!
How did you import the signature over to the PDF, i tried using the merge tags and it just put a link in the pdf to the signature
You have to use the merge tags in combination with an img tag. Not sure if this will show up correctly in a comment, but I’ll try… it’d be something like — otherwise it’ll just display the hyperlink like you saw. You have to input the file path (which is your merge tag) into an tag for it to display.
Edit: Looks like I can’t display example code in a comment. See this though: https://www.w3schools.com/tags/tag_img.asp – Basically replace that “img_girl.jpg” with your “MERGETAG” and it should work.