MARKETPLACE
PLUGINS
DIGITAL SIGNATURE PAD
Digital Signature Pad logo

Digital Signature Pad

Published March 2026
   •    Updated this month

Plugin details

Digital Signature Pad gives your Bubble app a professional, touch-friendly signature canvas that works on desktop and mobile. Users can draw their signature with a mouse or finger, and the plugin instantly exports it as a base64 image ready to save to your database or display anywhere on your page.
No external API. No monthly fee. No complicated setup. Just drag the element onto your page and it works.

Key Features

- Smooth canvas drawing with mouse and touch support
- Real time export — signature data is ready the moment the user lifts their pen
- Fully customizable — set pen color, pen thickness, background color and border color from the Bubble editor
- Optional built-in Clear button so users can redo their signature
- Exposed states for signature_data and is_signed so you can build conditional logic around them
- Works on all screen sizes including mobile

Perfect For

- Contract and agreement signing
- HR onboarding forms
- Proposal approval workflows
- Legal document platforms
- Client intake forms
- Any Bubble app that needs a real signature instead of a typed name

How It Works

1. Drop the Signature Pad element onto your page
2. Set your pen color, background color and border color in the Appearance tab
3. Connect an Image element source to Signature Pad's signature_data to display the signature live
4. Use is_signed state to show or hide your Submit button conditionally
5. On form submit save signature_data to your database as a text field

The signature exports as a base64 PNG string which can be stored in any text field in your Bubble database and displayed using a standard Image element.

$30

One time  •  Or  $10/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

Unique Hub logo
Unique Hub
Joined 2021   •   7 Plugins
View contributor profile

Instructions

Step 1 — Install and add the element Install the plugin from the Bubble marketplace. Go to your page and drag the Signature Pad element onto the canvas. Set the width to at least 300px and height to at least 150px for a comfortable signing area.

Step 2 — Set appearance
In the Appearance tab set your preferred pen color, background color and border color. Check Show clear button if you want a built-in clear option inside the pad.

Step 3 — Display the signature
Add an Image element anywhere on your page. Set its dynamic source to: Signature Pad's signature_data. The signature will appear in real time as the user draws.

Step 4 — Add a Clear button (optional)
Add a Button element and label it Clear. In its workflow add: Element Actions → Clear Signature. This wipes the canvas and resets all states.

Step 5 — Save the signature
On your form submit button workflow add: Element Actions → Export Signature. Then save Signature Pad's signature_data to a text field in your database.

Step 6 — Use conditional logic
Use the is_signed exposed state to control your UI. Example: only show the Submit button when Signature Pad's is_signed is yes.

Notes
- Store signature_data as a text field in your Bubble database
- To display a saved signature use an Image element with dynamic source set to the saved text field value
- The signature exports as a base64 PNG string starting with data:image/png
- Works on desktop with mouse and mobile with touch

Types

This plugin can be found under the following types:
Element   •   Action

Categories

This plugin can be found under the following categories:

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble