How to create a WordPress form with signature field

By Updated: March 24, 2018 10

Contact Form 7 Signature Addon — WordPress Plugins

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 (the Signature add-on requires the £199/year Developers License – ouch!) 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 444×222 pixels:

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

Contact form with signature field WordPress plugin

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

Contact form with signature

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?

Contact form email with signature attachedTo 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.

WordPress-plugin-email-with-signature

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.

Filed under: WordPress Plugins

Katie Keith

An active member of the global WordPress community, Barn2 Co-Founder Katie loves collaborating with other plugin companies. Her articles have been published on high profile sites including WPTavern, Torque and IndieHackers. She oversees all plugin support and deals with 'Tier 2' support requests about how to use Barn2's plugins in advanced ways.

10 Comments

  1. Shahzad Gulfam
    June 19, 2019 Reply

    When Signature field is filled the form do not submit

    • EJ
      June 19, 2019 Reply

      Hi, Shahzad.

      I'm sorry to hear you're having difficulty with submitting the signature field in the Contact Form 7 Signature Addon plugin. As the issue you're experiencing involves the third-party plugin mentioned in this tutorial of ours, I suggest that you please raise it with its author/developer Breizhtorm or on the plugin's support forum on WordPress.org.

      I hope this helps point you in the right direction! :)

  2. Kristopher Larsen
    April 15, 2019 Reply

    Thanks for the tip on making the signature box bigger, it's been driving me nuts. Have you found a way to make the border a different color?

    • Katie Keith
      April 16, 2019 Reply

      Glad it helped! You would need to add some custom CSS for any styling changes.

  3. Katie
    January 3, 2019 Reply

    Hi Ron, my name is Katie and I don't know anything, but I will still post here to make it look like I care

  4. Ron
    January 22, 2017 Reply

    Hi
    I read your post and it installed great.
    Problem is I don't get a saved image file in my media section in wordpress..
    If i install a contact form 7 DB addon i can save the info but not as a image file the signature and writing are all separate.
    My question is how do you save your forms to media library and are the saved as data or as a image.
    Thanks for the post its been a good read..
    Regards
    Ron

    • Katie
      January 23, 2017 Reply

      Hi Ron, I haven't tested the signature field plugin with Contact Form 7 DB and am not sure how the signature is saved. I recommend that you send a support request to the author of the signature field plugin.

Please share your thoughts...

Your email address will not be published.