--- title: "Signature Drawing Pad — Framer component · Best of Framer" description: "$20.00 · Framer component · by MJ Jung · Forms. Screenshots, details, and remix links on Best of Framer." canonical: "https://framer.elliotli.dev/component/signature-drawingpad" --- [Home](/)/[Components](/components)/[Forms](/components/category/forms)/Signature Drawing Pad # Signature Drawing Pad [View on Framer](https://framer.com/marketplace/components/signature-drawingpad/?via=elliot-li) ![Signature Drawing Pad preview image 1](https://framer.elliotli.dev/og/component/signature-drawingpad/404a409a27d9878c/1600x1200.jpg) ## Summary 1. ## Description ## 1\. Introduction The**SignatureDrawingPad**component 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. ## 2\. Features - 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. ## 3\. Installation & Setup To add the**SignatureDrawingPad**component 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. ## 4\. How to Use - **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. ## 5\. Property Controls Reference 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. ## Rank history [How rankings work →](/terms#rankings) - All · #10622 ## Details - **Author**: MJ Jung - **Price**: $20.00 - **Published**: 2025-12-18 - **Updated**: 2025-12-19 - **Added**: 2025-12-10 - **Categories**: Forms ## More across types - [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love ## More like this - [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing - [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK - [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield - [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from