Signature Drawing Pad

Premium Forms Component by MJ Jung

Show PreviewBuy for $20
Signature Drawing Pad

About Signature Drawing Pad

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.