Using signature sketch fields for digital signatures

Modified on Tue, 6 Jan at 2:14 PM

Using signature sketch fields for digital signatures

Signature sketch fields allow customers and leads to provide digital signatures directly on forms using a touch-screen signature pad. This guide explains how to create signature fields, add them to forms, display signatures in emails and documents, and use signature data in your workflows.

On this page

Using signature sketch fields for digital signatures

What are signature sketch fields?

Signature sketch fields provide a touch-screen signature pad on forms where users can draw their signature using a mouse, touchscreen, or stylus. The signature is saved as an image file and attached to the lead.

Common use cases:

Quotes and proposals – Obtain customer signature to accept an offer
Contracts and agreements – Get digital signatures on terms and conditions
Service orders – Capture customer signature on work orders or service requests
Consent forms – Document acceptance of privacy policies, terms of service, or GDPR consent
Delivery confirmations – Confirm receipt of goods or services
Site visit documentation – Record inspector or technician signatures

Creating signature sketch fields

Accessing signature field settings

Navigate to Campaign Settings → Signature sketch fields. This page displays all signature fields configured for the campaign.

Creating a new signature field

Go to Campaign Settings → Signature sketch fields
Click + New Sketch field
Enter a Name for the signature field (e.g., "Signature", "Customer signature", "Inspector signature", "Accept terms signature")
Click + Create

The new signature field appears in the list and is immediately available for use in forms.

Configuring signature field properties

After creating a signature field, you can configure its properties:

Name

The display name shown on forms and in the signature list. Choose descriptive names to distinguish multiple signature fields.

Examples:

Signature – General purpose signature
Customer signature – Customer acceptance signature
Company representative signature – Internal signature
Accept terms signature – Terms and conditions acceptance

Required

Check this box to make the signature field mandatory on forms. Users cannot submit the form without providing a signature.

Recommended: Enable for critical signatures (contracts, terms acceptance).

Hide on lead page

Check this box to hide the signature field from the lead profile page. The signature is still saved and accessible via placeholders.

Use case: Hide internal or technical signature fields that aren't relevant for manual lead review.

Hide in new lead form

Check this box to prevent the signature field from appearing on new lead forms. Useful for signatures that should only be collected on specific update forms.

Use case: Collect initial lead data without signature, then request signature on a follow-up form (e.g., quote acceptance form).

Adding signature fields to forms

HTML forms

When creating or editing an HTML form, signature fields are available in the Signatures dropdown:

Go to Campaign Settings → Web pages
Create a new HTML form or edit an existing one
In the form configuration, locate the Signatures field
Select the signature field(s) you want to include (e.g., "Signature")
Configure other form settings as needed
Click + Create or Save

The signature field appears on the form with a signature pad interface.

How signature fields appear on forms

On the published form, the signature field displays as:

A label showing the signature field name (e.g., "Signature:")
A pen icon indicating the field is for drawing
An input area that opens the signature canvas when clicked

When the user clicks on the signature field, a signature canvas opens where they can:

Draw their signature using mouse, touchscreen, or stylus
Use an undo button to correct mistakes
Clear the canvas to start over
Submit the signature when satisfied

After providing the signature, a checkmark appears next to the field, indicating the signature has been captured.

Using signature placeholders in templates

Signature data can be inserted into emails, documents, and templates using placeholders. Each signature field supports multiple properties:

Available signature placeholders

Preview (default HTML rendering)

@signature[signature-field-name,preview]

Displays the signature image inline using default HTML formatting. Best for email templates.

Example:

@signature[signature,preview]

File URL

@signature[signature-field-name,url]

Returns the direct URL to the signature image file. Use this to create custom image tags or download links.

Example:

<img src="@signature[signature,url]" alt="Customer signature" style="max-width: 300px;" />

Filename

@signature[signature-field-name,name]

Returns the filename of the signature image (e.g., signature_20240106_123045.png).

File size

@signature[signature-field-name,size]

Returns the file size in kilobytes (kB).

File type

@signature[signature-field-name,type]

Returns the file type (typically img, png, or the full mimetype like image/png).

File title

@signature[signature-field-name,title]

Returns the custom title added by the user (if any). Useful for signature descriptions like "Customer acceptance signature".

File description

@signature[signature-field-name,description]

Returns the custom description added by the user (if any).

Upload date and time

@signature[signature-field-name,datetime]

Returns the date and time when the signature was captured.

Example output: 2024-01-06 14:30:45

Signature count

@signature[signature-field-name,count]

Returns the number of signature files uploaded for this signature field. Typically 1, but can be higher if multiple signatures are allowed.

Template examples

Example 1: Display signature in confirmation email

<p>Thank you for your signature!</p>

<p>Your signature:</p>
@signature[signature,preview]

<p>Signed on: @signature[signature,datetime]</p>

Example 2: Custom signature display with URL

<div style="border: 1px solid #ccc; padding: 20px; max-width: 400px;">
  <h3>Customer Signature</h3>
  <img src="@signature[signature,url]" alt="Signature" style="max-width: 100%; height: auto;" />
  <p>Signed: @signature[signature,datetime]</p>
  <p>Name: %lead_name%</p>
</div>

Example 3: Conditional signature display

@if(@signature[signature,url]){
  <p>Signature received:</p>
  @signature[signature,preview]
}@else{
  <p>No signature on file.</p>
}@endif

Example 4: Download link to signature file

<a href="@signature[signature,url]" download>Download signature (@signature[signature,size] kB)</a>

Working with multiple signature fields

You can create multiple signature fields for different purposes:

Customer signature – Main customer acceptance
Company representative signature – Your internal representative's signature
Witness signature – Third-party witness signature
Guardian signature – Parent or guardian signature for minors

Each signature field:

Has its own name and configuration
Can be required or optional independently
Can be shown or hidden independently on forms and lead pages
Has unique placeholders (use the field name in the placeholder)

Example with two signatures:

<h3>Customer Signature</h3>
@signature[customer-signature,preview]
<p>Signed: @signature[customer-signature,datetime]</p>

<h3>Company Representative Signature</h3>
@signature[company-signature,preview]
<p>Signed: @signature[company-signature,datetime]</p>

Signature capture workflow

Typical signature workflow

Form is sent – Customer receives a link to a form (via email, SMS, or web page)
Customer opens form – Form displays with signature field
Customer fills form – Customer enters required information (name, email, etc.)
Customer clicks signature field – Signature canvas opens
Customer draws signature – Customer uses mouse, touchscreen, or stylus to sign
Signature is saved – Checkmark appears when signature is captured
Form is submitted – Customer submits the form
Signature is stored – Signature image is attached to the lead as a file
Confirmation is sent – Automated email sends with signature included (optional)
Signature is available – Signature can be viewed on lead page and used in templates

Automation integration

Signature fields can trigger automations:

When signature is received – Trigger automation when signature field is filled
Send confirmation email – Automatically send email with signature preview
Update status – Change lead status to "Quote accepted" or "Contract signed"
Notify team – Alert sales team when signature is captured
Generate document – Create PDF with signature included

Best practices

Naming conventions

Use descriptive names that clearly indicate the signature purpose
Avoid generic names like "Signature 1" when using multiple fields
Use consistent naming across campaigns (e.g., "Customer signature" everywhere)
Consider including context in the name (e.g., "Quote acceptance signature")

When to make signatures required

Make required when:

The signature is legally or contractually necessary
You need proof of customer acceptance
Signature is essential for workflow progression
Compliance or audit requirements mandate signatures

Make optional when:

Signature is for convenience only
You want to reduce form friction
Signature can be collected later in the process
Not all leads need to provide a signature

Form design tips

Place signature fields at the end of forms (after all other information)
Include clear instructions (e.g., "Please sign below to accept the quote")
Provide context before the signature field (summary of what they're signing)
Test signature capture on mobile devices – ensure touch functionality works
Consider adding a checkbox "I have read and accept the terms" before the signature

Using signatures in email templates

Always use conditional logic (@if/@else) to handle cases where signature is missing
Use the preview property for simple inline display
Use the url property when you need custom styling or sizing
Include signature timestamp to document when it was captured
Consider including lead name and email alongside signature for identification

Signature file management

Signatures are stored as image files (typically PNG format)
Files are automatically attached to the lead
Signatures are visible in the Files section of the lead profile
You can download signature files individually or as part of lead export
Old signatures remain accessible even if a new signature is captured

Legal and compliance considerations

Include a timestamp with every signature for audit trails
Document what the signature represents (quote acceptance, contract agreement, etc.)
Store signatures securely and ensure they're backed up
Consider adding IP address tracking for additional authentication (via custom fields)
Comply with e-signature laws in your jurisdiction (e.g., eIDAS in EU, ESIGN in US)
Provide clear terms and conditions before signature collection

Troubleshooting

Signature field not appearing on form

If a signature field doesn't appear on your form:

Verify the signature field is created in Campaign Settings → Signature sketch fields
Check that the field is selected in the form's Signatures dropdown
Ensure Hide in new lead form is not checked (if using a new lead form)
Refresh the form page after making changes
Check browser console for JavaScript errors

Signature not saving or appearing as blank

If signatures aren't saving correctly:

Ensure users are clicking the submit/save button on the signature canvas
Check that the form is fully submitted (not just previewed)
Verify file upload permissions are configured correctly
Test on different devices and browsers (some browsers may have canvas issues)
Check if any ad blockers or privacy extensions are interfering

Signature placeholder not displaying in email

If signature placeholders don't work in templates:

Check placeholder syntax: @signature[field-name,property]
Verify the signature field name matches exactly (case-sensitive, hyphens matter)
Ensure the lead actually has a signature on file
Use conditional logic to handle missing signatures
Test with a lead that definitely has a signature

Signature image quality issues

If signatures appear low quality or pixelated:

This is usually a canvas resolution issue – contact support for configuration
Encourage users to draw larger signatures (fills more of the canvas)
When using url property, avoid excessive scaling
Consider using vector-based signature solutions for critical documents

Signature not working on mobile devices

If signature capture fails on mobile:

Test on multiple mobile browsers (Chrome, Safari, Firefox)
Ensure the form is mobile-responsive
Check that touch events are properly enabled
Verify the signature canvas is appropriately sized for mobile screens
Clear browser cache and test again

Summary

Signature sketch fields provide touch-screen signature pads on forms for capturing digital signatures. Create signature fields in Campaign Settings → Signature sketch fields by clicking + New Sketch field and entering a name. Configure each field's properties including whether it's required, hidden on lead page, or hidden in new lead forms. Add signature fields to HTML forms by selecting them in the Signatures dropdown when creating or editing a form. On the published form, users click the signature field to open a signature canvas where they draw their signature using mouse, touchscreen, or stylus. The signature is saved as an image file and attached to the lead. Use signature placeholders in templates to display signatures in emails and documents. Available placeholder properties include preview (default HTML), url (file URL), name (filename), size (file size), type (file type), datetime (upload timestamp), and count (number of signatures). Support multiple signature fields for different purposes like customer signature, company representative signature, or witness signature. Make signatures required for legally binding documents and optional for convenience signatures. Place signature fields at the end of forms with clear instructions and context about what is being signed. Use conditional logic in templates to handle cases where signatures are missing. Signatures are stored as image files, accessible in the Files section of the lead profile, and can be downloaded or included in lead exports. Follow best practices for legal compliance including timestamps, clear terms, secure storage, and adherence to e-signature laws in your jurisdiction.

? Common searches

signature field • digital signature • sketch field • signature pad • touch signature • sign document • signature capture • electronic signature

? Also known as

e-signature • electronic signature • handwritten signature • signature drawing • signature canvas • sign form • accept quote

Working with campaign files and file fields
How do I create a form?
Working with the template editor
How do I set up automated email flows?
How do I set up a new campaign?