How To Add A Digital Signature Field To The Divi Contact Form Module Tutorial by Pee Aye Creative

How To Add A Digital Signature Field To The Divi Contact Form Module

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to add a digital signature field to the Divi Contact Form module with the Divi Contact Form Helper.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Install The Divi Contact Form Helper Plugin

The first step is to install the Divi Contact Form Helper plugin. Hopefully by now, most of my weekly blog post readers already use the plugin or are members of our all-access Divi Adventure Club, but if not, you can check it out to learn more. The plugin adds tons of settings and features directly to the existing Contact Form module, which will be used for this tutorial to add pretty much anything you want into the contact form.

Divi Contact Form Helper by Pee Aye Creative

1. Add A New Field And Set As Digital Signature Pad

Go to your Contact Form module, open the settings, and click to add a new field. In the Field Options toggle, keep the Type field set to Input Field, and scroll down to enable the Show As Signature Pad setting.

how to add a signature field to Divi Contact Form

2. Add Optional Label And Description Text

Open the Text toggle of the new signature field. Here you can write some label text and enable the option to Show Label On Frontend. This is used to indicate the type of field it is for the person who is submitting the form.

As another option, you can write a field description with any instructions. This description will show above the signature field pad on the frontend. 

add label and description text for the digital signature field in Divi

Now you can save and exit the Visual Builder in order to preview the field.

3. Preview The Digital Signature Field On The Frontend

After enabling the signature pad field and setting up the text, you can exit the Visual Builder and preview how this looks on the frontend. The screenshot below is how it should look so far by default without any design setting adjustments.

the digital signature field in the Divi Contact Form module

4. Adjust The Design Of The Digital Signature Field, Buttons, and Text

Now you can adjust the design however you want! As usual, we have included every design setting you could need to easily style the field, the buttons, and the text according to your branding or preferences.

To access the design settings, open the individual digital signature field settings from the Contact Form module settings. Click on the Design tab and scroll down to the Signature Pad toggle. Here you will find tabs within this toggle to adjust the pad area, the save button, the clear button, and the message text. 

digitial signature field design settings in the Divi Contact Form Helper plugin

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Last updated [last-modified %date%]


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts


Your Cart