PO Signature Field for Contact Form 7

Description

PO Signature Field for Contact Form 7 is a lightweight Contact Form 7 addon that adds a real, draw-your-own digital signature field to any CF7 form. Whether you need a signature pad for contracts, waivers, consent forms, delivery confirmations, rental agreements, freelance agreements, permission slips, or any document that needs a legally-recognizable electronic signature, this plugin adds it as a single, simple [signature] form-tag – no coding required.

Visitors sign with their mouse, finger, or stylus directly inside the form. On submit, the digital signature is automatically converted into a real PNG image and attached to your Contact Form 7 notification email – so every signed submission arrives in your inbox as a clean, ready-to-save signature image, alongside the rest of the form data.

Built specifically for WordPress site owners who need a fast, no-frills CF7 esignature solution without the cost, complexity, or third-party data-sharing of a full e-signature SaaS platform.

Learn More:

✨Documentation
✨Live Demo

Why Choose This Contact Form 7 Signature Plugin?

Most signature solutions for WordPress either require an expensive subscription, route your visitors’ signatures through a third-party server, or bolt on more features than a typical contact form actually needs. PO Signature Field for Contact Form 7 takes the opposite approach: it does one job – capturing and emailing a digital signature – and does it well, entirely on your own server, with nothing sent to any outside service.

Key Features

Draw Signatures With a Real Signature Pad
The signature field is powered by SignaturePad.js, a widely-used, actively maintained drawing library. It supports mouse, touch, and stylus/pen input, renders smooth natural strokes, and correctly handles high-resolution (Retina) screens as well as responsive canvases that resize on smaller devices.

Undo, Redo, and Clear Controls
Every signature field includes three built-in controls so visitors can fix mistakes without starting over: Undo steps back through individual pen strokes, Redo restores a stroke that was undone, and Clear wipes the pad completely to start fresh.

Signature Emailed Automatically as a PNG Attachment
There is nothing extra to configure. The moment a visitor submits the form, their signature is converted from the canvas into a genuine PNG image file and attached to the Contact Form 7 notification email – the same way a file upload field would behave.

Fully Customizable Canvas
Control the exact look of the signature pad per form, per field, using simple tag options: canvas width and height, pen color, pen thickness (width), and background color. Every option has a sensible default, so the field looks good even if you don’t touch a single setting.

Alpha-Enabled Color Picker in the Tag Generator
Pen color and background color are configured using WordPress’s native color picker, upgraded with a transparency (alpha) slider – so you can choose a fully opaque color, a soft tint, or a fully transparent signature pad background to match your site’s design.

Required or Optional Field
Mark the signature field as required (using the standard Contact Form 7 asterisk convention) to prevent form submission until a signature has actually been drawn, or leave it optional for forms where a signature is a nice-to-have rather than a must-have.

Privacy-Conscious by Design
Signature image files are written to a temporary folder only for as long as it takes to send the notification email, then automatically deleted from the server. No signature data is stored permanently unless you explicitly add your own storage logic – keeping the plugin lightweight and privacy-friendly out of the box.

Mobile and Touch Friendly
Signature capture works reliably on phones and tablets, correctly translating touch input into smooth signature strokes – including on narrow screens where the signature pad is resized to fit.

Clean, Conflict-Free Code
Every function, class, and script the plugin defines is consistently namespaced, so it won’t clash with other plugins or themes on your site. No unnecessary database tables, no bloated settings pages – just a form-tag that works.

“Type Your Signature Instead” Toggle
Some visitors don’t want to draw with a mouse. A one-click toggle lets them type their full name instead, which is instantly rendered in a cursive font on the very same signature pad – no separate field, no extra configuration, and the resulting image is emailed exactly the same way as a hand-drawn signature.

Sign-Here Guideline and Watermark Text
Add a subtle dashed guideline (e.g. “Sign here”) and/or a faint background watermark (e.g. your company name) directly on the pad, per field. Both fade out automatically the moment the visitor starts signing, and neither is ever baked into the exported image – they’re purely a signing aid.

Toolbar, Border, and Label Control
Choose exactly which buttons appear – Undo/Redo/Clear, Clear only, or no buttons at all – and swap in your own custom labels for each. Pick a border style (solid outline, soft shadow, or none) so the pad matches your form’s design.

PNG or JPG Output
Choose PNG (with transparency support) or JPG (smaller file size) as the exported image format, per field or as a site-wide default.

Site-Wide Default Settings
A dedicated Signature Settings page (under the Contact Form 7 menu) lets you set defaults for every option above once, for every signature field on your site – individual tags can still override any setting when needed.

Optional Permanent Storage in the Media Library
Off by default (signatures are still deleted right after the email is sent), but can be switched on with one checkbox if you need to keep a permanent, searchable copy of every signature – stored privately in your Media Library with the originating form, field, date, and IP address attached.

Optional Audit-Trail Stamp
Automatically stamp a small “Signed [date/time] UTC from [IP address]” strip onto the bottom of every signature image, for an extra layer of verification on stored or emailed signatures.

Signatures Gallery and Bulk Export
When permanent storage is enabled, a Signatures page (also under the Contact Form 7 menu) lists every stored signature with a thumbnail, source form, and date – filterable by date range, with one-click export of the filtered results to a ZIP file.

Perfect For

• Service agreements and freelance contracts
• Consent forms and liability waivers
• Delivery and pickup confirmations
• Rental and lease agreements
• NDAs and simple legal acknowledgments
• Event and workshop registrations requiring a signed waiver
• School or camp permission slips
• HR onboarding and policy acknowledgment forms
• Any WordPress form that needs a quick, verifiable signature

How It Works

1. Install and activate the plugin (Contact Form 7 must already be active).
2. Open any contact form and click the “signature” button in the tag generator.
3. Adjust the canvas size, pen color, pen width, and background color if you like – or just insert the tag with its defaults.
4. Visitors draw their signature directly on your form using mouse, finger, or stylus, with Undo/Redo/Clear available if they need to correct it.
5. On submission, the signature is emailed to you automatically as a PNG attachment.

Tag Options

• width / height – canvas size in pixels (defaults: 300 x 200)
• pencolor – color of the drawn line: hex, rgba(), or “transparent” (default #000000)
• penwidth – thickness of the drawn line in pixels, 1-20 (default 2)
• bgcolor – background color of the canvas: hex, rgba(), or “transparent” (default #f2f2f2, a light neutral grey chosen so the pad stays visible against typical white theme backgrounds)
• toolbar – which buttons appear: full (Undo/Redo/Clear), clear (Clear only), or none (default full)
• borderstyle – solid, shadow, or none (default solid)
• imageformat – png or jpg (default png)
• allowtype – 1 to show the “type your signature” toggle, 0 to hide it (default 1)
• clearlabel / undolabel / redolabel – custom button text
• signtext – sign-here guideline text shown behind the pad until the visitor starts signing
• watermark – faint watermark text shown behind the pad until the visitor starts signing
• id / class – standard Contact Form 7 id/class options

Any option not set on the tag falls back to the site-wide default from the Signature Settings page, then to the plugin’s built-in default.

Since Contact Form 7 tags can’t contain literal spaces, multi-word values for signtext, watermark, and the *label options are written with a + in place of each space (the same convention used in URL query strings) – for example signtext:Sign+here or watermark:Acme+Inc.

Example generated tag:

[signature signature-409 width:300 height:200 pencolor:#000000 penwidth:2 bgcolor:#f2f2f2 borderstyle:solid toolbar:full imageformat:png allowtype:1 signtext:Sign+here watermark:Acme+Inc]

Use [signature*] instead of [signature] to make the field required.