Featured Add-Ons -

How to Capture Signatures Online (with the Gravity Forms Signature Add-On)

By Megan Jones Published October 19, 2020

Collecting a user’s signature via a form on your WordPress website can save time, reduce paperwork, and provide an impressive user experience for your clients and customers. With Gravity Forms, you can quickly create high-end forms that capture signatures and cater for any business need.

In this ‘How to…’ article, we discuss why you might need to capture signatures online with examples of situations where this feature would be beneficial. Importantly, we then look at how to implement signature capture on your forms with the Gravity Forms Add-On Signature.

Capturing Online Signatures

If you need your clients or customers to sign a form or contract, the old fashioned way of printing, signing, scanning, and emailing is not efficient. Instead, with Gravity Forms, you can collect online signatures from your users, saving people time, and providing them with a much more professional and positive user experience.

There can be many reasons why you may need to capture signatures online. Here are a few…

• Contracts and Consent Forms – You may want your customers to sign to agree to a new job contract, a liability waiver, or a non-disclosure agreement. With an electronic signature requirement at the bottom of a form, you have explicit evidence of their agreement to a specific contract.

• Application Forms – Whether you are in big business, a nonprofit, or an educational institution, high-quality application forms with the option of requesting an electronic signature are integral to your niche. Your customers may be coming to you for loans, bidding for grants, or applying for university courses – all these high-end application forms need a secure and accessible signature capture tool.

• Online Petitions – All serious online petitions need signatures to accompany the submissions. With Gravity Forms you can easily accept and store electronic signatures, validating your petitioners and adding weight to your cause.

Whatever your industry, if you need your clients to sign a form or agreement, then enabling online signature capture is a must. Let’s find out how to do it…

The Gravity Forms Signature Add-On

The Gravity Forms Signature Add-On allows you to easily capture signatures on your forms. By adding the Signature field to a form, users can then include their signature when they submit the form, giving their consent or agreement.

The Signature Add-On displays an online signature pad on your form, where users can sign their name using a touchscreen device, any device that has an in-built touchpad, or just a mouse. No browser plugin is required, and the add-on works with all major desktop and mobile browsers including Chrome, IE, Firefox, Safari, Opera, and many more.

When a signature is captured, the data is sent to your server, where it is converted into a PNG image file and then stored. Signatures can then be viewed within the Entry Details of a Form Entry.

How to Add the Signature Field to Your Form

Setting up a form to capture signatures is a very quick and easy process. Firstly, you will need to install the Signature Add-On. To do this select Forms > Add-Ons from your WordPress dashboard. Then scroll down to Signature Add-On and click on Install.

Next, open an existing form or create a new one. Once you have opened the form editor, navigate to Advanced Fields and simply drag-and-drop the Signature field onto the editor canvas.

Use the Field Name and Description settings to explain to your users why you need their signature – eg, that they are agreeing to the contract or confirming that the information they have supplied is correct. You may also want to make the field Required, so users cannot submit a form unless they have signed.

Under Field Settings > Appearance, you also have the option of altering the appearance of the signature pad that will be displayed on the form. Here you can change the color of the pad background and border, alter the border width and style, and select a color and size for the pen, to name a few options.

Now Update (save) and Preview your form to check it is working. It’s that simple!

Accessibility and the Signature Field

It is important to note that the Signature field is currently not accessible. If you work for a government agency or nonprofit, and you need your forms to be fully accessible, then a viable alternative is to add the Text field so users can type their name instead.

Another option is to include both the Signature field and the Text field on your form. By adding Radio Buttons with conditional logic, you can ask your users which method of signing is more appropriate for their needs – the form would then display either the Signature or Text field accordingly.

For more information on web accessibility, check out this article – Web Accessibility: What is it and why is it important?

Ready to Get Started with Signature?

As you can see, capturing signatures with Gravity Forms and our Signature Add-On couldn’t be easier. These resources and tools can further help you with getting started…

• Using the Signature Add-On – Check out this article from the docs with more in-depth information on using Signature.

• Build a Service Agreement Form with Gravity Forms’ Signature Add-On – Find out how our Signature Add-On can be used in a specific scenario.

• A Case Study: Gravity Forms, Gravity Flow, and the National Compassion Fund – Have a read of this case study that demonstrates Gravity Forms and Signature being used in a real-life situation.

• Certified Add-Ons – Both Gravity PDF and ForGravity can help you manage your form entries by automatically generating PDFs from the data submitted. This may be useful if you need to create a printable copy of the contract or form, displaying the user’s signature, for your records.

If you don’t have Gravity Forms or the Signature Add-On, don’t worry. You can test out everything in this article for free inside your own personalized Gravity Forms demo – check out our intuitive form builder, customize the stylish templates, or create a form from scratch. Enjoy!