Collecting user signatures with a form can be necessary in many cases, where the support for digital signatures is vital. In this article, we will try to explain how to add a Contact Form 7 Signature Field with the help of our Free Addon “Contact Form 7 Signature addon”.
What’s Required
- Make sure Contact Form 7 and Ultimate Addons for Contact Form 7 are installed on your WordPress site.
- Go to Contact -> Ultimate Addons menu in your WordPress Dashboard and enable the Signature checkbox. Then click the Save Changes button. This will enable the “Contact Form 7 Signature addon” settings.
Contact Form 7 Signature Addon Form – Live Example
In this tutorial, we will create a Contact Form 7 digital signature form like the example below. You can, for sure, create your form following the same steps.
Check our main demo to see all the supported fields for the Contact Form 7 Signature field.
Contact Form 7 Digital Signature Form Creation
Go to Contact -> Add New in your WordPress Dashboard to create a new form.
Inserting the Signature Form Tag
On the edit page, you should see an additional button named Signature over the form’s code editor.
Clicking the button should take you to its form tag generator.
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.
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.
Add Other Fields
Once you are done adding your signature field tags, you can add your remaining form fields (based on your needs). For example, name, email, address and so on.
Copy the Shortcode
If your form is ready, click save and copy the Contact form shortcode.
Time to Publish
Paste the shortcode wherever you want to show your form (Pages/Posts/Custom Post Types/Sidebars). The result should be something similar to the above form.
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 a digital signature. 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.
- 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.
- 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, 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 for contact form 7 will be sent as an image attachment. Once you hit save, the signatures will be added to each form submission forwarded to your email.
Watch Complete Video
If you are still confused, we suggest you watch this video. In this video, we tried to describe the whole step of How to add a digital signature on your form:
Full Form Code
Here is a sample code of our above form:
[uacf7-row][uacf7-col col:6]
<label> Your name
[text* your-name autocomplete:name] </label>
[/uacf7-col][uacf7-col col:6]
<label> Your email
[email* your-email autocomplete:email] </label>
[/uacf7-col][/uacf7-row]
[uacf7-row][uacf7-col col:12]
<label> Enter Your Signature
[uacf7_signature uacf7_signature-608] </label>
[/uacf7-col][/uacf7-row]
[uacf7-row][uacf7-col col:12]
[submit "Submit"]
[/uacf7-col][/uacf7-row]
Still Not Clear? Please contact us. If you are a free User, you can open a ticket from here. If you are a pro user, you can open a ticket from here.