Skip to content

Signature ​

The Signature element lets users handwrite their signature directly in the form. Users draw their signature in the signature area using a mouse or finger (on touch devices). It is ideal for use cases that require a handwritten signature, such as contracts, agreements, and confirmations.

Basic ​

Basic settings configure the element's fundamental properties.

Label (required) ​

The label text displayed above or beside the signature area (depending on the Label position setting). It also:

  • Identifies the field quickly in the admin interface
  • Displays as a heading in the form preview panel on the right

Unique Name (required) ​

Identifies this element within the system. The name is auto-generated by default; you can also modify it manually as needed. Naming rules:

  • May only contain lowercase letters, numbers, and underscores
  • Must start with a letter

This name references this field in email templates.

Description ​

Explanatory text displayed beneath the signature area, providing help information (e.g., "Please sign in the area below").

Validators ​

The Signature element supports only one validation rule:

ValidatorDescription
RequiredRequired; checks whether the user has drawn a signature

Styles ​

Label position ​

Sets the display position of the label. Available options:

  • Inherit: Uses the global configuration in Form style settings
  • Vertical: The label appears above the signature area
  • Horizontal: The label appears to the left of the signature area
  • Hidden: The label is hidden

Option ​

The core configuration of the Signature element, controlling the appearance of the signature area.

Line Color ​

The color of the strokes when the user draws a signature (default black #000000). Click the color picker to customize the color.

Color suggestions

We recommend dark strokes (such as black or dark blue) on a light background to keep the signature clearly visible.

Signature Line Width ​

The thickness of the signature strokes. Available options:

  • 1px ~ 9px (default 3px)

TIP

Thicker strokes (4-5px) feel closer to real handwriting.

Background Color ​

The background color of the signature area (default white #FFFFFF). Click the color picker to customize the color.

Bottom Line ​

Adds a horizontal line at the bottom of the signature area to mimic a signature line on paper. It includes two settings:

  • Border Width: The thickness of the line (1px ~ 9px, default 4px)
  • Color: The color of the line (default dark gray #222222)

TIP

A Bottom Line makes the signature area look more like a paper document to be signed.

Signature Size Ratio ​

The width-to-height ratio of the signature area.

Logic ​

Enable conditional logic ​

When enabled, configure rules to show or hide this element based on the user's input in other fields.

Rule match mode ​

After enabling conditional logic, first set the rule match mode:

  • Match any condition (any): The element shows or hides when any one rule is satisfied
  • Match all conditions (all): The element shows or hides only when all rules are satisfied

Configure rules ​

Each rule consists of three parts:

PartDescription
FieldSelect a target field from the dropdown (displays the field's Label)
OperatorThe comparison condition
ValueThe target value to compare against

Supported operators ​

OperatorDescription
isTriggers when the field value equals the specified value
is notTriggers when the field value does not equal the specified value
is emptyTriggers when the field value is empty
is not emptyTriggers when the field value is not empty

Add and manage rules ​

  • Click the Add logic rule button to add a new rule
  • Click the 🗑 button on the right of each rule to delete it
  • Click the + button to add more match conditions

Use cases

For example, show the signature field only when the user checks "Agree" for "Agree to terms":

  • Match mode: Match any condition
  • Field: Agree to terms
  • Operator: is
  • Value: Agree

Data ​

Show in email ​

Whether the signature image appears in the email notifications (enabled by default). When disabled, the signature is excluded from the submission email.

Signature format

The user's drawn signature is saved and displayed as an image. In email notifications, the signature appears as an image attachment or inline image.

Advanced ​

Unique ID ​

The element's unique ID, auto-generated by the system and read-only.

No filters

The Signature element's value is a hand-drawn image and does not need text filter pre-processing, so the Advanced tab contains no Filters.

Next steps ​

Built with VitePress