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.
Prerequisites
- A Bubble account with an active app
- A form or document that needs signatures
- Basic understanding of plugins and workflows
Step-by-step guide
Install a Signature Pad Plugin
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.
Add the Signature Pad to Your Form
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.
Save Signatures to the Database
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.
Display Signatures on Documents
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.
Build the Complete E-Signature Flow
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 working example
1DATA TYPE:2- Contract: title, content, status (draft/pending/signed), created_by (User), signer (User), signature (image), signed_date (date), signer_ip (text)34PAGE: sign-contract (Type: Contract)5- Group DocumentContent: display contract title and content6- SignaturePad element (400x200px)7- Button Clear → Reset signature pad8- Checkbox "I agree to the terms and conditions"9- Button Sign (Only when checkbox is checked AND signature pad is not empty)1011WORKFLOWS:121. Clear clicked → Reset SignaturePad132. Sign clicked:14 → Save SignaturePad as image15 → Make changes to Contract:16 signature = saved image17 status = 'signed'18 signed_date = Current date/time19 signer = Current User20 → Send confirmation email to signer and creator21 → Navigate to confirmation pageCommon mistakes when adding digital signatures in Bubble
Why it's a problem: Not requiring the checkbox agreement before signing
How to avoid: Add a mandatory checkbox and Only When condition on the Sign button.
Why it's a problem: Not storing timestamp and signer identity
How to avoid: Store signer (User), signed_date, and optionally IP address alongside the signature.
Why it's a problem: Not preventing re-signing of already-signed documents
How to avoid: 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.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to add digital signature capture to my Bubble.io contract signing app. I want a signature pad, agreement checkbox, and a workflow that saves the signature, updates the contract status, and sends confirmation. Which plugin should I use?
Add a signature pad to the contract signing page. When the user signs and agrees to terms, save the signature image to the Contract record, set status to signed, record the timestamp, and send confirmation emails.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation