Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
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.

▶️ Please watch the video above to get all the exciting details! 👆

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.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

3 Comments

Comments By Others

  1. Andreas Peters

    …same with all the other texts… sorry, i forgot to mention

    Rgds

    Andreas

    Reply
  2. Andreas Peters

    Hi, excellent!
    But… 🙂
    I want to change the words “Save” and “Clear” to German.
    Save =”Speichern”
    Clear = “Löschen”

    I can’t find any chance to do so?
    Hmmmm
    🙂
    Any idea?

    Reply
    • Hemant Gaba

      Hi Andreas!

      Please try using plugins like Better search and replace to change such texts.

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart