How to create a WordPress form with signature field

I've discovered a handy free WordPress plugin that lets you create an online form with signature field.

Most online forms let your users add information and click a 'Submit' button to email the form to you. This is fine for most websites, but some people would like their users to digitally sign the form before submitting it. Most WordPress form plugins don't offer this feature, but I have found a good solution.

Contact Form 7 Signature Addon is a free WordPress plugin that works alongside the free Contact Form 7 plugin. Simply create your online form using Contact Form 7 as usual, and then add the [Signature] shortcode. You can mark the signature as a required field so that people can't submit the form without signing first.

It's great to find a free plugin that does this because most of the WordPress plugins that allow digital signatures require ongoing subscriptions - e.g. to Gravity Forms with the Signature add-on - or a specialist digital signature service such as GroupDocs.

The main downside of the Contact Form 7 Signature Addon is that the signature field doesn't look perfect straight away. For example there's no border by default, which is a shame because you can't see where you're supposed to add the signature! The plugin FAQ page has some useful tips for improving the layout of the signature box.

In the following example, I modified the [Signature] shortcode to add a label above it and to size the signature box to 444x222 pixels:

<p>Please write your signature in the box below<br />
[signature* Signature id:signature 444x222]

I inserted the Contact Form 7 into a web page, added my details and signature, and it looked like this:

Where are the signatures stored?

The signatures that your users add when completing the form are stored in the Media Library of your WordPress website. They can also be emailed to you.

How do I receive the signatures?

To receive the signatures via email, you need to add an extra field when you set up your email notification in the 'Mail' tab of Contact Form 7. Click on the image for an example.

In this example, I added the signature to the email using 2 different methods:

Insert the signature directly into the email

If you add the following code then it will embed the signature directly into your email. This is nice because you can see straight away that the form has been signed.

<img src="[Signature]" alt="" />

Include a link to the signature

If you add [Signature] to the email then it will add the URL for the signature filename.

Here's a screenshot of the email that I received after following the above steps. As you can see, the signature has been inserted directly into my email and a link to the image file has also been added.

And if you're getting lots of spam form submissions, check out our popular article on how to stop Contact Form 7 spam.

Are the signatures legally binding?

To be honest, I have no idea. Some of the paid-for solutions guarantee that the signature is legally binding. If this is an important requirement for you then it might be best to use a paid-for service - just to be on the safe side.

But this is a great solution if you want people to sign your forms before submitting them to you.