Signature Document

A complete recipe for building a flexible signing document - variable signature zone configurations with required and optional zones, initials fields, a clean print layout - using Section, Layout Group, and Signature Zones together.

What You'll Build

A clean signing document that includes:

A document summary section with contract details and parties
Terms & conditions area with a dedicated initialing zone per page
A final signature block with required and optional signing zones side by side
A print-friendly layout that works for both digital e-signature submission and physical printing

This example focuses on zone configuration flexibility - mixing required/optional zones, different fieldType options, and the two-column signature block pattern.

Controls Used

Control	Role in This Template
`templateSettings`	Sets date format and locale
`section`	Groups contract summary, terms, and signature blocks
`layout_group`	Places vendor and client signature zones side by side in the final signing block
Signature Zones	Reserves space for signatures, initials, and date stamps per party

Payload Shape

{
  "templateId": "signature-document",
  "templateSettings": { },
  "theme":            { },
  "layoutSchema":     { },

  "documentTitle":  "Master Services Agreement",
  "contractId":     "MSA-2026-ENT-007",
  "effectiveDate":  "2026-04-01",
  "vendorName":     "VaultPDF Technologies Inc.",
  "vendorAddress":  "123 Tech Park, San Francisco, CA 94105",
  "clientName":     "Contoso Corporation",
  "clientAddress":  "456 Enterprise Blvd, Seattle, WA 98101",
  "contractValue":  120000.00,
  "currency":       "USD",
  "termMonths":     12,

  "signatures": {
    "preparer":        { "name": "Alice Nguyen",  "date": "2026-03-14" },
    "legal":           { "name": "James Obi",     "date": "2026-03-14" },
    "vendor_initials": { "name": "Alice Nguyen",  "date": "" },
    "client_initials": { "name": "",              "date": "" },
    "vendor":          { "name": "Alice Nguyen",  "date": "" },
    "client":          { "name": "",              "date": "" }
  }
}

Initials zones use their own role keys

Initials zones are separate signature nodes with fieldType: "initials" and their own role key (e.g. "vendor_initials"). They map to their own entry in the signatures object independently of the full signature zones.

Step 1 - Template Settings

"templateSettings": {
  "locale":     "en-US",
  "dateFormat": "MMMM D, YYYY",
  "timezone":   "America/Los_Angeles"
}

Using "MMMM D, YYYY" produces long-form dates (e.g. "April 1, 2026") which are conventional in formal contract documents.

Step 2 - Contract Summary Section

A boxed section with the primary theme color header makes the document identity immediately clear.

{
  "type": "section",
  "props": {
    "title":      "Agreement Details",
    "titleIcon":  "file-text",
    "showHeader": true,
    "layout":     "2"
  }
}

Left column: documentTitle, contractId, effectiveDate (format: date), termMonths. Right column: vendorName, vendorAddress, clientName, clientAddress.

Step 3 - Parties Section (Layout Group)

A two-column block showing each party's details with their own titled section and accent pipe.

{
  "type": "layout_group",
  "props": {
    "columns": [
      { "width": "star" },
      { "width": "star" }
    ],
    "columnGap": 16,
    "verticalAlign": "top"
  }
}

Left column - section titled "Vendor" with titleIcon: "building" showing vendorName and vendorAddress.

Right column - section titled "Client" with titleIcon: "building" showing clientName and clientAddress.

Step 4 - Initials Zones (Per-Page Acknowledgement)

Initials zones are placed at the bottom of each page that contains terms or conditions. They use fieldType: "initials" which generates a smaller acknowledgement-style box and an INIT_ anchor prefix instead of SIGN_.

{
  "type": "section",
  "props": {
    "title":  "Page Initials",
    "layout": "1"
  }
}

Inside that section, side by side using layout: "2":

{
  "type": "signature",
  "label": "Vendor Initials",
  "role": "vendor_initials",
  "fieldType": "initials",
  "width": 100,
  "height": 50,
  "required": true,
  "showName": false,
  "showDate": false,
  "borderStyle": "minimal"
}

{
  "type": "signature",
  "label": "Client Initials",
  "role": "client_initials",
  "fieldType": "initials",
  "width": 100,
  "height": 50,
  "required": false,
  "showName": false,
  "showDate": false,
  "borderStyle": "minimal"
}

required: false for client initials

Client initials are marked required: false here because the signing platform should prompt but not block submission if this zone is missed. The required flag in the payload entry can override this default per-document at render time.

Step 5 - Final Signature Block (Layout Group)

The final signing block places the vendor and client zones side by side. Each zone is full-strength with name, date, and a complete border box.

{
  "type": "layout_group",
  "props": {
    "columns": [
      { "width": "star" },
      { "width": "star" }
    ],
    "columnGap": 24,
    "verticalAlign": "top"
  }
}

Left column - vendor section with signature zone:

{
  "type": "section",
  "props": {
    "title":    "Vendor Signature",
    "titleIcon": "pen-line",
    "layout":   "1"
  }
}

Inside it:

{
  "type": "signature",
  "label": "Authorized Signatory",
  "role": "vendor",
  "fieldType": "sign",
  "width": 220,
  "height": 80,
  "required": true,
  "showName": true,
  "showDate": true,
  "borderStyle": "full"
}

Right column - identical structure for "role": "client".

Pattern: Layout Group + Section + Zone

Wrapping each signature zone in its own titled section inside a layout_group gives each party a clear labeled column. The section accent pipe and title make the document scannable at a glance - a reader can immediately identify which column belongs to which party.

Step 6 - Internal Approvals (Optional)

For documents that require internal legal and preparer sign-off before going to the client, add an internal approvals section above the final signature block. These zones use the same structure but with borderStyle: "minimal" to visually distinguish them from the primary signing zones.

{
  "type": "section",
  "props": {
    "title":     "Internal Sign-off",
    "titleIcon": "check",
    "layout":    "2"
  }
}

The two child zones use role: "preparer" and role: "legal" respectively, matching the keys in signatures.

Complete Payload

{
  "templateId": "signature-document",
  "templateSettings": {
    "locale":     "en-US",
    "dateFormat": "MMMM D, YYYY",
    "timezone":   "America/Los_Angeles"
  },
  "theme": {
    "primary": "#1a56db"
  },
  "documentTitle": "Master Services Agreement",
  "contractId":    "MSA-2026-ENT-007",
  "effectiveDate": "2026-04-01",
  "vendorName":    "VaultPDF Technologies Inc.",
  "vendorAddress": "123 Tech Park, San Francisco, CA 94105",
  "clientName":    "Contoso Corporation",
  "clientAddress": "456 Enterprise Blvd, Seattle, WA 98101",
  "contractValue":  120000.00,
  "currency":       "USD",
  "termMonths":     12,
  "signatures": {
    "preparer":        { "name": "Alice Nguyen", "date": "2026-03-14" },
    "legal":           { "name": "James Obi",    "date": "2026-03-14" },
    "vendor_initials": { "name": "Alice Nguyen", "date": "" },
    "client_initials": { "name": "",             "date": "" },
    "vendor":          { "name": "Alice Nguyen", "date": "" },
    "client":          { "name": "",             "date": "" }
  }
}

Design Decisions Summary

Decision	Why
Initials zones as separate `signature` nodes	`fieldType: "initials"` emits a different anchor prefix (`INIT_`) than full signature zones - they must be distinct nodes with distinct role keys
`borderStyle: "minimal"` for initials	Visually lighter than the full box used for final signatures - signals lower formality to the signer
`layout_group` for the final signing block	Vendor and client each need an independent titled section - use `layout_group`, not `section layout: "2"`
`showName: false` / `showDate: false` on initials	Initials boxes are small and annotation-only - pre-filling name and date would overcrowd them
Internal sign-off above final block	Preparers and legal sign first; the document then moves to client - vertical order in the template reflects workflow order

Next Steps

Add an Approval & Verification page by enabling templateSettings.approvalPage - see Approval Workflow
Use "required": false in a signer's payload entry to make a zone optional at runtime without changing the template
See Security & Verification for QR verification and how the thumbprint is computed

Signature Document

On this page