Signature

Signature is the field for drawing a signature on a canvas and storing it in a hidden input.

Use this page to preserve the canvas, hidden input, and clear action used by the signature module.

Preview

Attributes

Attribute	Purpose	Importance
canvas[data-formie-signature-canvas]	SignaturePad drawing surface	Required
input[data-formie-signature-input]	Hidden transport input for the signature value	Required
[data-formie-signature-clear]	Clear-button selector	Recommended
[data-formie-signature-message]	User-facing status when canvas is unavailable or init fails	Recommended

Behavior

The signature module:

• mounts SignaturePad onto the canvas
• synchronizes the drawn image back into the hidden input as a data URL
• retries canvas sizing when the field starts hidden (multi-page forms, conditions, or late layout)
• shows accurate status copy when JavaScript is disabled, canvas is unsupported, or initialization fails
• responds to page navigation, resize, and visibility changes so the canvas can be remeasured safely

Events

Signature emits a field event once the drawing surface and SignaturePad instance are ready.

The formie:field:signature:init event

Triggered after the drawing surface and SignaturePad instance have been created.

let projectSignaturePad;

document.addEventListener('formie:field:signature:init', (event) => {
  // Store the SignaturePad instance for later use elsewhere on the page.
  projectSignaturePad = event.detail.signature;
});

document.querySelector('[data-clear-project-signature]')?.addEventListener('click', () => {
  // Clear the signature from outside the field's built-in button.
  projectSignaturePad?.clear();
});

Related pages

• JavaScript events
• Submission handling
• CSS variables