Signature Field

Collecting user signatures with a form can be necessary in many cases, where the support for digital signatures is vital. Ultimate Addons provides the capability to collect digital signatures for free and pro users alike. 

What’s Required

Since digital signature is a free feature, users don’t need to install the pro version of Ultimate Addons. Only the free version of the plugin is required (without additional addons).  

Once installed, go to the Ultimate Addons settings page, enable the Signature toggle, and hit save.

Signature form for contact form 7 with uacf7 settings enable - Themefic

Using Digital Signature with Contact Form 7 

With the requirements fulfilled, visit the editing section for your form. 

Inserting the Signature Form Tag 

On the edit page, you should also see an additional button named Signature over the form’s code editor.

Signature form for contact form 7 with uacf7 settings inside form - Themefic

Clicking the button should take you to its form tag generator. 

Signature form for contact form 7 with uacf7 settings field - Themefic
  • The form generator will consist of the usual properties. First, you can determine whether the digital signature is a required element. You can then give it a unique name. 

The Class Attribute field gives a unique class name to the field. You can later target this class and make modifications to the form property. 

Enabling Signature for a Particular Form

In the form editing page, you should see a new tab named UACF7 Signature. Visit that tab, and enable the Enable signature for form toggle. This is mandatory to enable the signature property for a specific form. 

Signature form for contact form 7 with uacf7 settings - Themefic

This section also has two properties: the pad background and the pen color. The former determines the background behind the signature, while the latter affects the pen’s color. You can add CSS values or pick a color for this.

After setting and saving the form, copy the generated shortcode and paste it onto your website page. This will enable the signature field to be displayed on the form.

Signature form for contact form 7 with uacf7 output - Themefic

Note: that users can create their signature as many times as they want and clear it if necessary. Submission only occurs after they hit the Confirm Signature button, reducing margins of error.

Integration with UACF7 PDF Generator

If you want to get your submissions as PDFs with the PDF Generator, it’s also possible to attach the digital signature with it. To add the signature to your PDF: 

  • Make sure you have the PDF Generator addon installed and activated from Ultimate Addons’ settings. 
  • Next, head to the Contact Form editing page. You should see the UACF7 PDF Generator tab. 
Signature form for contact form 7 with uacf7 PDF - Themefic
  • Once you enter that tab, you’ll find the list of available form tags that you can embed within your PDF. Assuming you have inserted a signature tag in your form, the form tag for the signature will show up here.
Signature form for contact form 7 with uacf7 PDF img - Themefic
  • Since the digital signature is stored as an image, we’ll have to use an img container to embed it. Once you’ve created the tag, simply put the signature’s form tag as the src or source and hit save.

Attaching the Signature to the Mail

It’s also possible to have the signature embedded within the email that you receive. To do so, head to the Mail tab on the form editing page, where you’ll once again find the list of form tags inserted into the form.

Type the signature form tag into the File Attachments sections on the Mail page. This is necessary since the digital signature will be sent as an image attachment. Once you hit save, the signatures will be added to each form submission forwarded to your email.

Signature form for contact form 7 with uacf7 PDF file attouched - Themefic