# How to add digital signatures in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Add digital signatures to your Bubble app using a signature pad plugin that captures handwritten signatures on screen. The plugin saves the signature as an image (PNG) that you can store in the database, attach to records like contracts or forms, and display in documents. Build a complete e-signature workflow with signer identification, timestamp, and signature storage.

## Add Digital Signatures to Your Bubble App

This tutorial shows you how to capture handwritten signatures using a signature pad plugin and integrate them into document workflows.

## Before you start

- A Bubble account with an active app
- A form or document that needs signatures
- Basic understanding of plugins and workflows

## Step-by-step guide

### 1. Install a Signature Pad Plugin

Go to Plugins → Add plugins → search 'signature'. Install a signature pad plugin (e.g., 'Signature Pad' or 'Canvas Signature'). The plugin adds a visual element that captures touch/mouse input as a signature drawing.

**Expected result:** Signature pad plugin installed.

### 2. Add the Signature Pad to Your Form

Drag the signature pad element onto your page below your form. Configure its size (recommended: 400x200px). Add a 'Clear' button that resets the pad and a 'Sign' button to submit.

**Expected result:** A drawable signature pad appears on the form.

### 3. Save Signatures to the Database

Add a 'signature' image field to your Data Type. On Sign button click: the plugin provides the signature as a base64 image. Use the plugin's save action or convert to file and store in the signature field. Add signer name, timestamp, and IP for verification.

**Expected result:** Signatures are stored as images in the database.

### 4. Display Signatures on Documents

On your document/contract page, add an Image element mapped to the record's signature field. Position it in the signature area of the document layout. Display the signer's name and timestamp below.

**Expected result:** Signed documents display the signature image.

### 5. Build the Complete E-Signature Flow

Create a signing page: display the document content, show the signature pad at the bottom, add a checkbox 'I agree to the terms', and the Sign button. Workflow: verify checkbox is checked, save signature, update document status to 'signed', record timestamp and signer identity, send confirmation email.

**Expected result:** A complete e-signature workflow from document review to signed confirmation.

## Complete code example

File: `Workflow summary`

```text
DATA TYPE:
- Contract: title, content, status (draft/pending/signed), created_by (User), signer (User), signature (image), signed_date (date), signer_ip (text)

PAGE: sign-contract (Type: Contract)
- Group DocumentContent: display contract title and content
- SignaturePad element (400x200px)
- Button Clear → Reset signature pad
- Checkbox "I agree to the terms and conditions"
- Button Sign (Only when checkbox is checked AND signature pad is not empty)

WORKFLOWS:
1. Clear clicked → Reset SignaturePad
2. Sign clicked:
   → Save SignaturePad as image
   → Make changes to Contract:
     signature = saved image
     status = 'signed'
     signed_date = Current date/time
     signer = Current User
   → Send confirmation email to signer and creator
   → Navigate to confirmation page
```

## Common mistakes

- **Not requiring the checkbox agreement before signing** — Without explicit agreement, the signature may not be legally binding. Fix: Add a mandatory checkbox and Only When condition on the Sign button.
- **Not storing timestamp and signer identity** — A signature alone is insufficient for legal purposes — you need to prove who signed and when. Fix: Store signer (User), signed_date, and optionally IP address alongside the signature.
- **Not preventing re-signing of already-signed documents** — Users could overwrite existing signatures, voiding the original. Fix: Hide the signature pad and Sign button when status is already 'signed'.

## Best practices

- Store signer identity, timestamp, and signature image together for auditability.
- Require explicit agreement (checkbox) before allowing signature submission.
- Prevent modification of signed documents.
- Send confirmation emails to all parties after signing.
- Use the signature pad at a reasonable size (400x200px minimum) for legibility.
- Add a 'Clear' button so signers can retry their signature.

## Frequently asked questions

### Are digital signatures legally binding?

In many jurisdictions, electronic signatures are legally valid under laws like ESIGN Act (US) and eIDAS (EU). However, for high-value contracts, consult a lawyer about compliance requirements.

### Can I use this for PDF signing?

The signature pad captures the signature. To embed it in a PDF, use a PDF generation plugin that includes the signature image at the appropriate position in the document layout.

### Does the signature pad work on mobile?

Yes. Most signature pad plugins support touch input on mobile devices, which actually provides a better signing experience than mouse input.

### Can multiple people sign the same document?

Yes. Add multiple signature fields (signature1, signature2) or create a separate Signature data type linked to the Contract. Each signer gets their own signing page.

### How do I add a typed signature option?

Add a text input where users type their name, then render it in a cursive font using CSS styling. Store both typed and drawn options. For comprehensive e-signature solutions, RapidDev can build legally compliant signing workflows.

### Can I integrate with DocuSign or HelloSign?

Yes. Use the API Connector to integrate with professional e-signature services for enterprise-grade signing workflows.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/implement-a-digital-signature-feature-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/implement-a-digital-signature-feature-in-bubble