Contact form 7 signature addon to add E-Signature in form

When you are sending a message by using contact form 7 it is sending the only text. If you want to add signature in your message it is possible to add with the help of cf7 addon. Yes, I am talking about the plugin name Contact form 7 signature. A user can add a handwritten signature in the message via the signature pad. This plugin adds a new field to CF7 and allows users to add the signature.

Basic Information:

This plugin has more than 7000 active installations. WordPress version 3.9 or higher is required to install this plugin. Contact form 7 version 4.6 or higher is required to install this addon. This addon will work on every modern web and mobile browser.

Installation Instructions: 

To install this plugin you have to go to the add new plugin menu and search for the plugin contact form 7 signature. When the plugin will appear install and active it. After installing and activating the addon a new tag will add on the contact form 7 template tag section. When you will click on the edit option of contact form then you can see it.

signature tab

How to use: 

To add the signature pad in the contact form click on the signature button and you will get some options like below

  1. Field Type: If you checked it then will show as required filed.
  2. Name: It will be the name of this tag also you can change it as you want.
  3. ID Attribute: It will use for additional CSS.
  4. Class Attribute: It will also use for additional CSS.
  5. Width Attribute: To define the width of the signature pad. You can use the value as you want and do not need to use px.
  6. Height Attribute: To define the height of the signature pad. For the value same it will be the same as width.
  7. Color Attribute: For signature color. You have to use the hex color code.
  8. Background Attribute: For signature pad color. You have to use the hex color code.

Now time to insert the code. After selecting all the options (as per your requirements) click insert tag. Before you do this place the cursor where you want to place the tag.


After refreshing the contact page it will look like this one. There is a clear button to clear the image and sign again. I have colored green the signature area but you can use any other color as you like.


If you want to add the signature image in your emails body then you have to put an image tag like this:

<img src=”[your-signature-field]”/>

If you want to send an attachment of signature image then follow the below instructions:

  • add “attachment” parameter to your field like below :
    [signature your-signature-field attachment]
  • add the signature tag to the mail attachment section:



Related Post

Leave a Reply

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