Signature Field With Contact Form 7

外掛說明

Signature Field With Contact Form 7 is a free WordPress plugin that adds a handwritten digital signature field to any Contact Form 7 form. Using a smooth HTML5 canvas-based signature pad, visitors can draw their signature with a mouse, stylus, or finger — exactly as they would on paper.

When the form is submitted, the signature is automatically converted to a PNG image, saved securely to your server, and the image URL is passed through Contact Form 7’s mail system so it can be included in your email notifications.

Whether you need client sign-off on a service agreement, a consent signature on a medical intake form, or a simple acknowledgement on a registration form, this plugin gives you a professional, self-hosted e-signature solution that works inside the familiar CF7 interface — with no external services, no subscriptions, and no coding required.

Requires Contact Form 7 to be installed and activated.

Documentation | Live Demo | Get Pro Version

Why Use Signature Field With Contact Form 7?

Contact Form 7 does not include a signature field by default. This plugin fills that gap by registering a native [digital_sign] tag directly inside the CF7 tag generator — the same familiar interface you already use for text fields, dropdowns, and checkboxes. Configure your signature pad visually, click “Insert Tag”, and you are done.

Unlike third-party e-signature services, the captured signature is processed and stored entirely on your own WordPress server. No data leaves your site, no accounts are required, and there are no per-signature fees.

FREE Features

• Digital Signature Pad — Embed a smooth, responsive HTML5 canvas signature pad into any Contact Form 7 form. Visitors draw their signature using a mouse on desktop, or their finger or stylus on touchscreen devices.

• CF7 Tag Generator Integration — Configure the signature field entirely through the Contact Form 7 tag generator panel. No shortcode editing or PHP required.

• Required Field Validation — Mark the signature field as required. CF7 will block form submission and display a validation error if the visitor tries to submit without drawing a signature.

• Custom Pad Background Color — Set the background color of the signature canvas to any color using the built-in color picker (default: light grey #dddddd). Match it to your form design or brand palette.

• Custom Pen Color — Choose the ink color the visitor’s drawn signature will appear in using the color picker (default: black #000000).

• Custom Pad Width — Set the exact pixel width of the signature canvas to fit any column layout or form design (default: 300px).

• Custom Pad Height — Set the exact pixel height of the signature canvas (default: 200px).

• Custom Pen / Stroke Width — Control the thickness of the pen stroke to create a natural handwriting feel. Thinner strokes suit precise signatures; thicker strokes suit casual sign-offs (default: 2px).

• Clear / Reset Button — A built-in clear button lets visitors erase their signature and start again without reloading the page.

• Customizable Clear Button Text — Change the label of the clear button to any text you choose — useful for different languages or tone preferences (default: “Clear”).

• Signature Saved as PNG Image — On form submission, the drawn signature is automatically converted from the canvas into a PNG image file and saved securely inside a dedicated folder in your WordPress uploads directory (/wp-content/uploads/wpcf7_uploads/sfwcf7_signatures/).

• Secure Server-Side File Handling — The signature directory is automatically created with a .htaccess file that restricts direct access while still allowing the PNG files to be served when referenced by their URL. File names are sanitized and made unique using a timestamp to avoid collisions.

• Email Delivery via Mail Tag — After submission, the signature image URL is passed into the CF7 posted data. Add the corresponding mail tag (e.g. [your-signature]) to the CF7 Mail tab to include a link to the captured signature image in your email notifications.

• Custom HTML ID and Class — Assign a custom id and/or class attribute to the signature field wrapper for easy CSS overrides or JavaScript targeting.

• Touch and Stylus Support — The signature pad responds to touchstart and touchend events, making it fully usable on smartphones, tablets, and stylus-enabled devices.

• Lightweight Footprint — Scripts and styles are enqueued only on pages that contain a Contact Form 7 form, keeping your site fast on all other pages.

• Automatic CF7 Dependency Check — If Contact Form 7 is not installed or activated, the plugin automatically deactivates itself and displays an admin notice rather than generating errors.

🔒 Pro Version Features

The following feature is locked in the free version and is only available in the Pro (Premium) version of Signature Field With Contact Form 7.

👉 Upgrade to Pro

Multiple Signature Pads Per Form
In the free version, only one [digital_sign] field is active per form. If you insert a second signature field, it is replaced by an upgrade notice rather than rendering a second pad. The Pro version removes this restriction entirely, allowing you to add as many independent signature fields as your form requires — ideal for contracts that need signatures from multiple parties (e.g. client + witness + authorising manager), multi-step agreement forms, or any document requiring more than one distinct sign-off.

How It Works

1. Install and activate the plugin (Contact Form 7 must already be active).
2. Open any Contact Form 7 form in the editor.
3. Click the digital_sign button in the tag generator toolbar.
4. Set your preferred options — pad size, background color, pen color, pen stroke width, and clear button text.
5. Click Insert Tag — the [digital_sign] shortcode is added to your form.
6. Go to the Mail tab and add the corresponding mail tag (e.g. [your-field-name]) to your email body to include the signature image URL in notifications.
7. Save the form. The signature pad will appear on your site immediately.

Perfect For

• Client onboarding agreements and service contracts
• Medical consent forms and patient intake documents
• Legal acknowledgements and NDAs
• School or event permission slips
• Employee, volunteer, or contractor agreements
• Rental or booking confirmation forms
• Any form that benefits from a personal handwritten sign-off