Signature Component

Overview
The Signature component creates a signature field in your module. In Express View, the signature field displays as a box where end-users can use their mouse to input their signature. In the submission data, the signature stores as a Base64 string.
Do not use the Signature component for legally-binding signatures. Instead, we suggest you use third-party software like DocuSign and SignNow.
You'll find the component under the Secondary Fields group to the left of the Module Builder:
About the Configuration Window
To learn more about general component settings, view our General Component Settings article.
Display Panel
Default State Options
Setting | Description |
---|---|
Hide Field |
Displays or hides the component from view in Express View. Setting it to (ON) hides the component. Setting the toggle to (OFF) displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to (OFF) |
Formatting
Setting | Description |
---|---|
Footer Label |
Like the label text, a component’s Footer Label indicates the purpose of the corresponding field or component. Placed under the Signature box, the Footer Label tells the end-user how to interact with the field. For example, giving the end-user instructions like Sign your name above. User-friendly labels make your module more accessible. Keep labels short, concise, and descriptive using title case. For longer entries, use sentence case. |
Background Color |
You can customize the background color of the signature box using an HTML color picker. Enter the color’s RGB code in the Background Color field. For example, rgb (245,245,235). Your chosen color displays in the Module Builder and Express View. |
Set Width |
Adjusts the width of the Signature box. The width value is specified in conjunction with the Width Unit type. |
Width Unit |
Select the unit type for the Width value. Width Unit types include:
By default, the width unit type is set to % (Percentage). |
Set Height |
This setting adjusts the height of the signature box. Set the number of pixels to apply to the box height. |
Input Behavior
Setting | Description |
---|---|
Input Behavior |
Controls how end-users interact with the component. Choose from the following options:
|
Adding a Signature Component
Configure a Signature component to provide a signature field for an end-user. We'll use a light blue color for the field background and set the component as Required. These instructions assume that you have an open module saved with a title.
1. | In the Module Builder, drag and drop a Signature component onto your canvas. |
2. | In the Property ID field, enter sign. |
3. | In the Footer Label field, enter Sign above. |
4. | In the Background Color field, enter rgb(204,245,255). This color makes the field background light blue. |
5. | Navigate to the Advanced settings. |
6. | Set Required to (ON). |
7. | Click Save Component. |
8. | Save your module. |
Preview your module in Express View. You'll see the following functionality:
Structure of a Signature Component's Data
A signature component stores its data as key/value pair. The value contains the data type and the signature in Base64 format.
Resources