Customer signs the contract on their phone

A branded page where the customer reads the whole agreement, ticks the acknowledgment, types their legal name, draws a signature, and submits — no app, no login.

What it is

/client/[id]/contract renders the frozen contract body on the builder's letterhead with the builder's brand accent, above a signature block requiring an acknowledgment checkbox, a typed full legal name and drawn ink. On waiver templates it also requires every numbered section to be initialed. Submitting flips the contract to customer_signed and starts the builder's counter-sign clock.

Also called: e-sign contract · customer signature · sign online · digital signature construction

See it
Customer signs the contract on their phone
Prepared for
Gideon Alt
1140 Ridge Line Rd · Fair Play
Shell package$34,782
Concrete & site$10,098
Doors & windows$6,732
Trim & finish$4,488
Total
$56,100
Signature
The customer page on a phone: builder logo letterhead, the agreement scrolling, then the signature block with the canvas pad and 'Sign & Submit Contract'. src/app/client/[id]/contract/page.tsx. Sample data — no customer information appears here.
How it works
  1. 1The page loads branding and the contract through the public portal endpoints.
  2. 2The agreement renders through ContractMarkdown with the tenant's brand colour as the section accent.
  3. 3The sign button stays disabled until name (3+ chars), ink, acknowledgment and all required initials are present.
  4. 4POST /api/client-portal/sign-contract re-validates initials server-side, stores the signature, IP and user agent, and raises a persistent counter-sign alert for the builder.
  5. 5The customer is routed back to their project dashboard.
Why we built it

The page's own header describes the loop: 'customer reviews the auto-generated contract, types their name, draws a signature, and submits. After signing, status flips to customer_signed, a persistent admin alert fires for Chris, and the customer is redirected to the dashboard.' The typed-name rule is deliberately permissive — 'Allow either matching the contact name OR any non-empty typed name — forms can capture a different legal name and that's the binding signature.'

The problem
  • Print-sign-scan round trips
  • In-person signing appointments for a routine document
  • No verifiable record of who signed and when
Sound familiar?
What you get
Signed the same day, from a phone
Typed name plus drawn ink, both captured
The builder is alerted the moment it's signed
What's inside
Typed legal name and drawn ink, both required
A canvas signature pad plus a typed full legal name plus an explicit acknowledgment — the combination the contracts themselves define as the binding electronic signature.
Signature audit trail: who, when, from where
Every signature stores the signer's name, email, phone, drawn image, exact timestamp, IP address and browser user agent — for both parties.
'Preparing your agreement' hold that unlocks itself
Between the customer submitting their details and the builder releasing the contract, the customer sees a branded holding screen that turns into the signing page by itself the moment you hit Send.
'What you're approving' restated above the agreement
A short panel above the contract restates the project name, building summary, site address and total — so signing is never a leap of memory.
Plans and blueprints one click from the terms
The same plan files attached to the estimate render as buttons above the agreement, so the customer can check the drawings while reading the terms.
Print or save the agreement as a PDF, signatures included
A pinned Print / Save PDF button on every contract surface, with a print stylesheet that isolates the document and keeps both drawn signatures and every initial in the output.
Come back to your signed contract any time
Once signed, the same URL renders a read-only copy with the customer's own ink instead of the signing form — no bounce, no double-signing.
No unsettling half-signed page
Between the customer's signature and the builder's, the customer sees a reassurance card instead of a signature grid with one empty half.
The customer can see you signed it
The builder's counter-signature, name and date render on the customer's own copy — so a fully executed contract looks different from a pending one.
Signed agreement one tap from the customer's dashboard
Once the build starts and the contract is fully signed, a Project Agreement card on the customer's dashboard opens the signed document in a modal — without navigating them off their dashboard.

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →