Using signature sketch fields for digital signatures

Modified on Wed, 6 May at 6:55 AM

Using signature sketch fields for digital signatures

Signature sketch fields add a touch-screen signature pad to forms. Customers draw their signature using mouse, touchscreen, or stylus — the result is saved as an image file attached to the lead.

TL;DR

Create field: Campaign settings → Signature sketch fields → + New Sketch field. Options: required, hide on lead page, hide in new lead form. Add to form: select in the form's Signatures dropdown. Use in templates: @signature[field-name,preview] (display), @signature[field-name,url] (image URL), @signature[field-name,datetime] (timestamp). Always use @if/@else in templates to handle missing signatures.

Get started in 3 steps

Create the signature field

Go to Campaign settings → Signature sketch fields → + New Sketch field. Enter a descriptive name (e.g. "Customer signature", "Accept terms signature"). Configure: Required (mandatory before form submit), Hide on lead page (field saved but not shown in profile), Hide in new lead form (collect signature only on specific follow-up forms, not on initial lead creation). Create multiple fields for different purposes: customer signature, company rep signature, witness, guardian.

Add to a form

When creating or editing an HTML form under Campaign settings → Web pages, locate the Signatures dropdown and select your field. The signature appears on the form as a labeled input with a pen icon — clicking it opens the signature canvas where the user draws, can undo, clear, and then confirm. A checkmark appears when the signature is captured. Place the field at the end of the form with clear context text.

Use in email templates

Display the signature in confirmation emails or documents using placeholders:

@signature[signature,preview] — inline image (default)
@signature[signature,url] — image URL for custom <img> tag
@signature[signature,datetime] — timestamp of when it was signed
@signature[signature,name] / size / count — filename, file size, number of signatures

Always wrap in conditional: @if(@signature[signature,url]){...}@else{No signature on file.}@endif

Read more⌄

Complete placeholder reference

Placeholder	Returns
`@signature[name,preview]`	Inline image (default — use in emails)
`@signature[name,url]`	Direct URL to PNG image
`@signature[name,datetime]`	Timestamp when signed (e.g. 2024-06-12 14:30:45)
`@signature[name,name]`	Filename (e.g. signature_20240612_143045.png)
`@signature[name,size]`	File size in kB
`@signature[name,count]`	Number of signatures on the field
`@signature[name,title]`	Custom title (if set by user)
`@signature[name,description]`	Custom description (if set)

Replace name with your actual signature field name (e.g. signature, customer-signature).

Complete email template example

Paste this into an email template. Replace signature with your field name:

<p>Dear %lead_name%,</p>

<p>Thank you for signing. Your signature has been registered.</p>

@if(@signature[signature,url]){
  <p><strong>Your signature:</strong></p>
  <img src="@signature[signature,url]"
       alt="Customer signature"
       style="max-width: 300px; border: 1px solid #ccc; padding: 8px;" />
  <p style="color: #666; font-size: 12px;">
    Signed: @signature[signature,datetime]
  </p>
}@else{
  <p style="color: #c00;">No signature on file.</p>
}@endif

Troubleshooting

Signature field not appearing on form: Verify the field is selected in the form's Signatures dropdown (Campaign settings → Web pages → edit form). "Hide in new lead form" option will prevent it from showing on lead creation forms.
Signature not saving: Field must not be read-only. Check that the form has write permissions for the field. Try submitting the form without the Required flag first to test.
Placeholder blank in email: Always wrap in @if(@signature[name,url]){...}@else{...}@endif — if no signature has been captured, the placeholder renders empty and can break the layout.
Signature quality poor on mobile: Signature canvas resolution is device-dependent. Advise users to sign slowly and use full finger/stylus on touchscreen.
Multiple signatures needed: Create a separate signature field for each signer (e.g. "Customer signature" + "Company rep signature"). Add both to the form. Reference each with its own @signature[field-name,...].

Common searches

signature field • digital signature • sketch field • signature pad • electronic signature • sign document • accept quote • e-signature

Campaign webpages and webpage forms
How to set up automations
Understanding placeholders and dynamic content
How do I set up a new campaign?