Signature DrawingPad
A customizable component for drawing and submitting digital signatures, ideal for authentication, agreements, and other signed forms, and easy to integrate into any UI.
Make it with Workshop
Build your own component with AI
A customizable component for drawing and submitting digital signatures, ideal for authentication, agreements, and other signed forms, and easy to integrate into any UI.
Make it with Workshop
Build your own component with AI
TheSignatureDrawingPadcomponent allows users to capture handwritten signatures directly within a web application. It provides a responsive and intuitive interface for signing documents, making it ideal for applications such as contracts, forms, and agreements where digital signatures are required.
Capture signatures with touch or mouse input.
Undo and clear functionalities for easy corrections.
Customizable appearance including colors, button styles, and header text.
Supports submission of signature images via a webhook.
Displays success and error messages after submission.
To add theSignatureDrawingPadcomponent to your Framer project
Open your Framer project.
Navigate to the Marketplace.
Search for "SignatureDrawingPad" and click on it.
Click the "Add to Project" button.
Drag and drop the component from the elements panel into your design canvas.
Configure Properties: Select the SignatureDrawingPad component in your canvas to access the property controls panel.
Set Dimensions: Adjust the width and height to fit your design requirements.
Customize Appearance: Modify the stroke, colors, and border properties for aesthetic adjustments.
Button Settings: Enable or disable the undoButton, clearButton, and submitButton. Customize their appearance and text as needed.
Submission Settings: Set the webhookUrl for signature submissions and customize success/error messages.
Integrate Submission Logic: Optionally, define an onSubmit callback function to handle the signature data after submission.
Sets the width of the drawing pad in pixels.
width (type: Number, default: 480)
height (type: Number, default: 320)
Sets the height of the drawing pad in pixels.
stroke (type: Object, default: { color: "#1E293B", width: 2.5 })
Configures the stroke properties for drawing.-color(type:Color, default:#1E293B)Specifies the color of the signature stroke.-width(type:Number, default:2.5)Sets the width of the stroke in pixels.
colors (type: Object, default: { header: "#D1E8FF", canvas: "#FFFFFF", headerText: "#1E293B", placeholder: "#94A3B8" })
Defines the color scheme for the component.-header(type:Color, default:#D1E8FF)Background color of the header.-canvas(type:Color, default:#FFFFFF)Background color of the drawing canvas.-headerText(type:Color, default:#1E293B)Color of the header text.-placeholder(type:Color, default:#94A3B8)Color of the placeholder text.
border (type: Object, default: { width: 1, color: "#D1E8FF", radius: 16 })
Configures the border appearance.-width(type:Number, default:1)Width of the border in pixels.-color(type:Color, default:#D1E8FF)Color of the border.-radius(type:Number, default:16)Corner radius of the border in pixels.
text (type: Object, default: { headerText: "Signature Line", placeholder: "sign here" })Configures text properties.-headerText(type:String, default:"Signature Line")Text displayed in the header.-placeholder(type:String, default:"sign here")Placeholder text shown in the drawing area.
buttonSize (type: Enum, default: medium)Specifies the size of the buttons. Options:small,medium.
undoButton
- enabled: Toggles whether the Undo button is displayed and usable.
- text: Label text shown on the Undo button.
- color: Background color of the Undo button.
- textColor: Text color of the Undo button label.
- borderStyle: Border style for the button (e.g., none, solid).
- borderWidth: Border thickness of the button.
- borderColor: Border color of the button.
clearButton
- enabled: Toggles whether the Clear button is displayed and usable.
- text: Label text shown on the Clear button.
- color: Background color of the Clear button.
- textColor: Text color of the Clear button label.
- borderStyle: Border style for the button (e.g., none, solid).
- borderWidth: Border thickness of the button.
- borderColor: Border color of the button.
submitButton
- enabled: Toggles whether the Submit button is displayed and usable.
- text: Label text shown on the Submit button.
- color: Background color of the Submit button.
- textColor: Text color of the Submit button label.
- borderStyle: Border style for the button (e.g., none, solid).
- borderWidth: Border thickness of the button.
- borderColor: Border color of the button.
