Contact Form 7 Signature Addon

Then verify that the image is wrapped in an HTML image tag in your mail configuration, like this :

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

And what if i want to use a Base64 encoded inline image in my email instead ?
This is not a very good idea, but just in case this is your only solution :

add a "inline" parameter to your field like this : [signature your-signature-field inline]
include the image in the body of your email, like you would normally do : <img src="[your-signature-field]"/>

How can i customize my signature field ?
When building your signature field with CF7's field generator, you have several options you can add to the field shortcode :

Width and height :

[signature signature-666 333x222]

ID and class :

[signature signature-666 id:foo class:bar]

How do i add styles to my signature field ?
Use CSS like you would do for any other field in your form.
For example, using the field wrapper, you can add a border like this :

`

.wpcf7-form-control-signature-body canvas{
border: 1px dotted #BADA55;
}
`
How do i make my signature field responsive ?
It depends on your form layout but once again, you can do this by using basic CSS instructions. The plugin will deal with window size and device orientation automatically updating itself to match the right size.

The only thing you have to do is override width and/or height styles to the field wrapper, not the canvas, like this :

`

@media screen and (max-width: 768px) {
.wpcf7-form-control-signature-wrap {
width:100% !important;
}
}
...
`
How do i change my field's colors ?
There are options for that in the field settings (only hex color supported for the moment) :

[signature signature-666 background:#333333 color:#FFFFFF]

The field is not working well after my desktop browser window was resized or after orientation change on my mobile. How can i fix that ?
The signature field needs to be "reloaded" too when its container's size changes, but you should be aware that it will also clear its content. I assume this is your responsability to do so. The plugin provides a jQuery function that you can call from your theme's script file :

`

window.onresize = function(){
$('div.wpcf7 > form').wpcf7ResizeSignatures();
};
`
Is it possible to change the writing behaviour ?
Sure, by using the signature pad's available options directly like this:

[signature signature-666 dotSize:1.2 minWidth:1 maxWidth:5 throttle:0 velocityFilterWeight:0.1]

Since version 4.0 i got Javascript errors. What changed and what can i do ?
The main thing that changed is the way you can interact with the plugin. There's now a jQuery plugin for that, and i got rid of all the old JS functions like sigFieldsResize and sigFieldsClear.

Available methods are now :

$('div.wpcf7 > form').wpcf7ResizeSignatures(); to resize fields
$('div.wpcf7 > form').wpcf7ClearSignatures(); to clear fields
$('div.wpcf7 > form').wpcf7InitSignatures(); to reload fields

So you only have to replace the former functions by these new ones. Don't forget to have a look at your contact form additional settings tab, where there's usually some code to clear the fields on submit.