Signature Field

This is a Pro feature. Upgrade to Pro to use signature capture.

The signature field provides a canvas for users to draw their signature. Perfect for agreements, contracts, and approvals.

When to use

Terms and conditions acceptance
Contract signing
Approval workflows
Consent forms
Liability waivers
Work orders

Settings

Label

Example: "Signature", "Your Signature", "Authorized Signature"

Description

Context about what they're signing.

Example: "By signing, you agree to our Terms of Service."

Required

Make signature mandatory.

Display options

Canvas size

Size	Dimensions	Best For
Small	300 × 100	Inline signatures
Medium	400 × 150	Standard forms (default)
Large	500 × 200	Formal documents

Background color

Canvas background:

White (default)
Transparent
Custom color

Pen color

Signature color:

Black (default)
Blue
Custom color

Pen width

Line thickness:

Thin (1px)
Normal (2px, default)
Thick (3px)

Show date

Automatically add current date below signature:

[signature canvas]
Signed: January 15, 2024

Show clear button

Allow users to clear and redo their signature.

Examples

Terms agreement

Label: Signature
Required: Yes
Size: Medium
Description: By signing above, I agree to the Terms of Service and Privacy Policy.
Show Date: Yes

Work order approval

Label: Customer Signature
Required: Yes
Size: Large
Pen Color: Blue
Description: I authorize the work described above and agree to payment terms.
Show Date: Yes
Show Clear Button: Yes

Label: Parent/Guardian Signature
Required: Yes
Size: Medium
Description: I consent to my child's participation in the program described above.
Show Date: Yes

Mobile experience

The signature field works on touch devices:

Touch to draw: Users draw with their finger
Responsive canvas: Adapts to screen size
Pressure sensitivity: On supported devices

Test signature capture on mobile devices. The experience should feel natural and responsive.

Data storage

Signatures are stored as:

PNG image: Visual signature file
Base64 data: Embedded in form data
Timestamp: When signature was captured
IP address: For verification (if enabled)

File storage

Signature images are saved to:

/wp-content/uploads/fodo-forms/signatures/[year]/[month]/

Data in webhooks

{
  "signature": {
    "image_url": "https://example.com/.../sig_abc123.png",
    "signed_at": "2024-01-15T14:30:00Z",
    "ip_address": "192.168.1.1"
  }
}

Legal considerations

Digital signatures may have legal implications. Consult with legal counsel for contracts and binding agreements.

For legally binding signatures, consider:

Clear disclosure: What they're agreeing to
Timestamp: When the signature was captured
IP logging: Evidence of who signed
Email confirmation: Sent to signer with copy
Audit trail: Full submission record

Styling

<div class="fodo-field fodo-field-signature">
  <label class="fodo-label">
    Signature
    <span class="fodo-required">*</span>
  </label>
  <div class="fodo-signature-wrapper">
    <canvas
      class="fodo-signature-canvas"
      width="400"
      height="150"
    ></canvas>
    <div class="fodo-signature-actions">
      <button type="button" class="fodo-signature-clear">
        Clear
      </button>
    </div>
  </div>
  <p class="fodo-description">
    By signing above, you agree to our terms.
  </p>
  <p class="fodo-signature-date">
    Signed: January 15, 2024
  </p>
</div>

Custom canvas styling

.fodo-signature-canvas {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  cursor: crosshair;
  touch-action: none; /* Prevents scroll on touch */
}

.fodo-signature-canvas:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

.fodo-signature-clear {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 14px;
  color: #666;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

Email notifications

Signatures in notification emails:

Attached as image: PNG file attachment
Embedded inline: Displayed in email body
Link only: URL to signature file

Configure in Form Settings → Email Notifications.

Signature Field

On this page