Signature Pad Field
Capture handwritten signatures using an HTML5 canvas-based signature pad.
Overview
The signature field type gives users a canvas where they can draw their signature with a mouse, trackpad or touch input. Signatures are saved as image files and validated by the FileFieldValidator.
File Storage
Signature fields are treated as file uploads. The captured signature is converted to a PNG and stored using Laravel's configured storage system, just like other file upload fields.
Basic Usage
Use addSignature() to add a signature pad. You can set the canvas dimensions and colors.
app/Actions/CreateContractForm.php
Customizing the Signature Pad
Adjust the canvas size and colors to fit your design. Larger canvases give users more room for detailed signatures.
app/Actions/CreateAgreementForm.php
Available Settings
Validation
The FileFieldValidator checks:
- A signature has been drawn (canvas is not empty)
- The generated image file meets any configured file size limits
- Required/optional status based on field configuration
Touch Device Support
Signature pads work with mouse input on desktop, but they are especially well-suited for touch devices like tablets and phones. Test on your target devices to make sure the signing experience works well.
Common Use Cases
- Contract and agreement signing
- Terms of service acceptance
- Medical consent forms
- Delivery confirmations
- Legal documents requiring authentication
- Parental consent forms
Accessibility
Consider providing alternative acceptance methods (like typing a name or a checkbox) alongside signature fields for users with mobility impairments or those using assistive technologies.