5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T15e4,

1. Introduction

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.

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 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.

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.

5a:[["$","$L5d",null,{"post":{"id":"019b318c-c6a8-7e9c-b5cf-537632ddedb4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"cbtLkbZIKlocwBXJdZIy","resolved":true,"title":"Signature Drawing Pad","body":"$5e","bodyJson":null,"introduction":"","slug":"signature-drawingpad","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/cbtLkbZIKlocwBXJdZIy/signature-drawingpad-2sxdSt99KX6ei3JS14N66zyNnOTIrB","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-10T14:10:13.026Z","updatedAt":"2025-12-19T11:31:48.702Z","publishedAt":"2025-12-18T13:01:08.136Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://glowing-table-758208.framer.app/","price":"20","paymentUrl":"https://buy.polar.sh/polar_cl_FQkQ4n0kcK9urPn5k3GmhRkCVtEkVy7hswMkP0wmpvD","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"jAoCWu67EX7HXuu9yExb","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-18T13:01:08.136Z","updatedAt":"2025-12-18T13:01:08.136Z","reported":false}}],"$L5f"]

Suggested for you