How to create legal contracts with Gravity Form’s HTML and Signature fields, in a final result of a downloadable PDF.
During a recent web site project for a dog trainer in town, I wanted to create an online version of their release-of-liability contract. Previously they’d been handing out paper forms for the clients to sign, however, I was trying to go paperless as much as possible.
My WordPress form plugin of choice is Gravity Forms, and with my Developer license, I already had access to the Signature Add-On which would handle the legal, e-signing portion. The main challenge here was how do I populate the Gravity Form with the contract legal language, along with the fill-in fields for the clients, and attach the completed and signed form to the confirmation emails sent to the dog trainers. After a quick search for options on how to accomplish this, I found these products:
Fillable PDFs – https://forgravity.com/plugins/fillable-pdfs/
Fillable PDFs certainly seemed to have all the bells and whistles needed for my task, however, this project didn’t quite have the budget available to purchase a license, so I kept searching.
Gravity PDF – https://gravitypdf.com/ or download form the WordPress plugin repository as well – https://wordpress.org/plugins/gravity-forms-pdf-extended/
The Gravity PDF plugin offers a host of features such as sending a downloadable link in the form confirmation emails, and allows you to start out with a free version available on the WordPress plugin repository: https://wordpress.org/plugins/gravity-forms-pdf-extended/ Winner, winner chicken dinner! (There were no chickens harmed in the research, aforementioned web site build, or the writing of this blog post.)
So now I had a way to legally e-sign, and also store, print, and send the contract in PDF form — but how do I get the contract text on the form? Answer: the HTML field.
The HTML field is available in the list of Standard Fields on every Gravity Form license option:
I’ve used the HTML field previously to add images, or other static content to display in the form content, so I was confident this would work. The only downside is it takes a bit of time to create the raw HTML, which most of us probably haven’t done in quite some time. You can use your HTML editor of choice for a short cut if you like.
When viewing the form in edit mode, you’ll have a few fillable fields along with these HTML sections. The content of the HTML fields are visible when you click on the section as seen below:
You can use as many HTML fields as you need, so I recommend breaking up long sections of legal text into multiple fields. While adding the HTML fields with legal contract content, I recommend using Preview often to see how things look in the finished version as it’s easy to get lost.
After entering the legal content needed, I added a date field so the current date would be automatically populated. To do this I added a Gravity Forms merge tag in my final HTML field:
And now, the final piece was to add the signature field to the form to make it legally binding. You’ll find the Signature field in the Advanced Fields section after you’ve uploaded and activated the Gravity Form Signature Add-on plugin.
This is the final, published view of the contract form on a page, ready to be filled in:
But wait, there’s more! I mentioned a PDF right? While I won’t go into details about how to use it, I mean, this post is long enough, right? However, once you have the settings and format configured, all that is needed is adding the PDF “field” to your form’s confirmation message and email notifications. This allows both the person filling out the form, and the person receiving email notifications, to download a PDF of the signed contract for their records. One setting I will mention is — by default, the PDF won’t include the HTML fields unless you enable them on the form settings:
Also, here are a few additional inks that can help with the PDF setup from the Gravity PDF website:
- Gravity PDF 5 Minute Installation:
- Gravity PDF Demo:
After you fill out the contract form, and click to submit, you will receive a link to view the PDF:
And that is a wrap! Happy e-signing 🙂