If you’re working with important documents, like contracts, permission agreements, applications, or other legal documents, the Gravity Forms signature field is a great way to capture signers’ electronic signatures. It enables you to create a more binding agreement without changing your web design, directly from your WordPress forms!
However, if you’re looking to create signed documents, the Gravity Forms Signature add-on is not enough by itself. This is because all that the digital signature image does is sit inside your WordPress dashboard.
A much better approach is to take that signature information and use it to create a signed PDF document. That way, you can
- Have an actual signed document, rather than just a signature image sitting in your WordPress database.
- Automatically deliver a signed PDF document to the signer with an email notification.
- Save the signed document outside your WordPress website as needed, like on your local computer or Dropbox.
Below, you’ll learn exactly how to set this up using Gravity Forms WordPress plugin and the Fillable PDFs WordPress plugin.
You’ll start with a front-end form that includes the Gravity Forms signature field:
Then, you’ll be able to use the signature information from that form submission to create a signed PDF document:
What You Need to Add Real Signatures to PDF Documents with Gravity Forms
If you want to add a Gravity Forms e-signature to PDF documents, you’ll need a few tools and WordPress plugins.
- The WordPress Gravity Forms plugin (from RocketGenius)
- The Gravity Forms signature add-on, available on the Elite license
- The Fillable PDF’s plugin
Why the Gravity Forms Signature Add-on isn’t enough
The Gravity Forms Signature Add-on will let you add a Gravity Forms signature field to your end-user forms, capture signature information as it is drawn, and convert the image to a PNG to be stored on your server. However, it won’t let you create a signed PDF document.
To take an end-user’s electronic signature and turn it into a PDF document, you’ll also need the Fillable PDFs plugin.
Fillable PDFs lets you take some or all of the electronic signature information from a form submission, including an end-user’s real signature, and insert it into your own PDF template while retaining the styling of your PDF.
The Fillable PDFs plugin gives you the power to quickly and easily map Gravity Forms fields to PDF fields, and generate Gravity Forms forms from your existing PDFs. And because it runs on Gravity Forms, it works in all the ways a Gravity Forms form should – giving you the opportunity to use advanced conditional logic, attach PDFs to notifications, populate image choices, and more.
So let’s look at how to use Fillable PDFs and Gravity Forms to capture signatures on forms and instantly create PDFs from them…
Gravity Forms Signature Tutorial: Creating a Signed PDF Document
Make sure to install RocketGenius Gravity Forms, the Gravity Forms Signature add-on, and the Fillable PDFs plugin before getting started. You’ll also need to use an up-to-date browser like Chrome, Firefox, or Safari so you can avoid adding extra browser signature plugins. This is also true for touchpad and touchscreen devices using Android or webOS.
1. Create a Fillable PDF Template for Your Signed Document
To get started, you need to create a PDF template that will include a user’s e-signature and other signer information.
To do this, you can create a regular PDF document with fillable fields for a user’s e-signature and other field values. You have a few options for creating a PDF with fillable fields:
Here’s a basic contract in JotForm. In addition to the name and address field values, it also includes two fillable fields for:
- Signature – will include the e-signature from the Gravity Forms signature field.
- Date – will include the date that a person submits during the form submission process.
Once you have your PDF document, go to Forms → Fillable PDFs → Templates → Add New to upload it as a fillable PDF template on your WordPress website:
2. Create a Form That Includes the Gravity Forms Signature Field
Next, create the front-end WordPress form with Gravity Forms.
Make sure that your WordPress form includes the Gravity Forms signature field, as well as field values for any additional e-signature information that you want to collect and/or include in your signed PDF document:
Feel free to include conditional logic if needed.
With the Fillable PDFs plugin Professional license, you can also automatically create a WordPress form based on the fillable fields in your PDF document.
3. Map Form Fields and Set Up Notifications
Next, we’ll set up the workflow that will let us fill in PDFs from our new form.
In the Gravity Forms editor on your WordPress website, go to Settings and select Fillable PDFs from the dropdown menu:
Click Add New to create a new Fillable PDFs feed. Then, select your template from the dropdown and click Open Mapper to map your Gravity form fields to the fields in the PDF document:
To map field values with your PDF, all you do is click on the fillable PDF field on the front-end live preview and select the associated field from Gravity Forms:
To add the signature image/signature information, make sure to select the Signature field. And you can also automatically add the Entry Date to the date field from the form meta:
And that’s it! Your Gravity form is ready to go.
You can also attach your signed PDF document to any Gravity Forms email notifications that you’ve created, which lets you deliver the signed document to the signer, a web server, or a site admin:
How the Gravity Forms Signature Field Works on Different Devices
The great thing about the method in the tutorial is that it will allow you to capture signatures across all devices and browsers.
The RocketGenius Gravity Forms signature box will work in Google Chrome, Firefox, Opera, and Safari, without requiring any special browser plugins.
It will also work on desktops, tablets, or mobile phones, including Android, iOS, and webOS. For touchscreen devices and touchpads, end-users will have the option to use the signature box with their fingers or a stylus.
Start Creating Signed PDF Documents Today
The Gravity Forms Signature add-on helps you collect e-signatures from your form plugin. But it doesn’t let you use that e-signature to create a signed PDF document, which is a much better approach when you’re dealing with contracts, applications, or other documents where a binding electronic signature is required. That’s where Fillable PDFs comes in.
Here’s an example of the kind of signed PDF you’ll be able to create with the Gravity Forms plugin:
To add the Gravity Forms signature field to a signed PDF document, you need the Fillable PDFs plugin from CosmicGiant.
Purchase Fillable PDFs and start including e-signatures in PDF documents today.
But that’s not all! To make collecting digital signatures through Gravity Forms even easier, CosmicGiant is now producing Legal Signing. This plugin adds a significant amount of features aimed at making it a complete WordPress eSignature solution.
These include:
- Legally binding eSignatures with ESIGN compliance, with contracts certified with an X509 certificate
- Customisable workflows to make sure all contracts gets signed by the right person at the right time
- And many more features built specifically for legally collecting signatures on your WordPress website!
Get notified for the Legal Signing plugin launch by leaving your email address here.
