Digital Signature Field | Touch‑Friendly eSignature Capture

Digital Signature Field | Touch‑Friendly eSignature Capture

The Signature custom field embeds an HTML5 canvas so customers, fieldworkers, or admins can hand‑draw a legally binding e‑signature directly inside OctopusPro.

It supports mouse, stylus, or touchscreen input, stores the signature as a secure PNG/JSON payload, and attaches it to the record for audit. Signatures do not change price or duration, but they do shorten workflows by replacing paper waivers, delivery receipts, and service approvals.


2  Where You Can Add a Signature Field

Location Typical goal & example
Services → Inquiries / Quotes / Bookings Customers sign T&Cs, damage waivers, or job completion receipts.
Embedded Inquiry Widget Collect consent for data usage at the moment a website visitor submits a quote request.
Customer Profile Store standing agreements such as long‑term care plans or recurring service mandates. For more info, visit the customizing customer profile fields userguide page.
Fieldworker Profile Have technicians sign contractor agreements or safety acknowledgements. For more info, visit the customizing fieldworker profile fields userguide page.
Forms & Checklists Add sign‑off lines on inspection forms or delivery checklists; these versions do not affect price/time.

3  What Is the Signature Field Type?

A signature field is rendered as an HTML5 <canvas> paired with JavaScript (e.g., Signature Pad). Users draw strokes which are converted to Bézier curves and exported as Base64‑encoded PNG plus vector JSON for tamper evidence.

Key traits

  • Touch‑friendly; works on all modern browsers.

  • Saves a timestamp and signer name for audit trails.

  • Downloadable as PNG from booking details.

  • Legally recognised under the ESIGN Act & UETA when combined with identity evidence.


4  Setup Instructions

4.1  For Services (affects inquiry/quote/booking flows)

  1. Settings ▸ Service Settings ▸ Custom Fields ▸ New.

  2. Label – Customer signature.

  3. Internal ID – cust_signature_serviceA.

  4. Field Type – Signature.

  5. Toggle visibility flags (portal, lead form, invoice, etc.).

  6. Save.

4.2  Inquiry Widget

Settings ▸ Communications ▸ Lead Capture Form ▸ Custom Fields → Add Custom Field → Signature – same steps as above.

4.3  Customer & Fieldworker Profiles

Navigate to Settings ▸ General ▸ Customer Profile or Fieldworker Profile, then create the field. Ideal for consent forms or contractor agreements.

4.4  Forms & Checklists

In Settings ▸ General ▸ Forms & Checklists create a Signature field for on‑site audit forms. These instances cannot influence price/time but are stored with the form submission.


5  How Each User Interacts

Admin (Web)

  • Create/Edit Booking: Click Add signature → modal canvas pops; sign with mouse or trackpad.

  • View Booking: A hyperlink labelled View signature opens the stored PNG in a new tab.

Fieldworker (App)

  • On‑site completion: Tap canvas, sign with finger/stylus; signature uploads instantly.

  • View: Thumbnail shown in the Job Detail screen.

Customer (Portal / Widget)

  • During booking checkout a Sign here button opens full‑width canvas; after signing, they tap Save and proceed.


  • Signature thumbnail appears in booking confirmation and PDFs.


6  Use‑Case Examples & Benefits

Industry Scenario Benefit
Home Cleaning End‑of‑job satisfaction sign‑off Prevents disputes and stores proof of completion.
Logistics / Delivery Package received signature Replaces paper POD slips; instant PDF email.
Healthcare Consent to treatment Meets HIPAA & ESIGN electronic consent rules.
Childcare Parent authorises babysitter Signature required before carer release.
Property Management Tenant inspection report sign‑off Timestamped acceptance of inspection findings.

Digital signatures reduce friction, shorten check‑out flows, and cut printing costs. Mobile‑optimised signature capture can raise form completion rates by up to 24 %.


7  Reporting & Compliance

  • Signatures are stored as secure blobs and can be exported with booking PDFs.

  • Filter reports by Signature collected? for compliance audits.

  • ESIGN/UETA compliance means signatures are enforceable in U.S. courts; similar regulations apply worldwide (eIDAS in EU).


8  Pricing & Duration Impact

The signature field is non‑monetary: it never adds cost or time. Its purpose is legal affirmation, not configuration.


9  Design Best Practices

  • Keep the label explicit: “Draw your signature to accept our Terms.”

  • Offer Undo and Clear buttons inside the modal.

  • Provide a type‑to‑sign alternative for accessibility.

  • Store signer name & IP in metadata for stronger evidence.

To stay updated please subscribe to our youtube channel.

Scroll to top