Electronic Signatures

The Signature Input is a complex Web Control that allows users to electronically sign forms. By default, it is set up for signature drawing, but it can be configured for typing signatures as well.

In this guide, we’ll walk through how to use the Signature Input Control to collect both typed and drawn signatures.

Step 1: Create Variables to store the signature

First, two Global Variables need to be created from the Variables Tree:

  • A signature Variable of type Asset to save the signature as an asset
  • A typed_signature Variable of type Text to save a typed signature

Step 2: Configure signature drawing

One way to prompt users to sign a document is to request their drawn signature.

To use the drawing mode, select the Signature Input Control and set the Init mode to draw. Then bind the associated value to a variable of type Asset.

  • In Control Properties > Value enter session.signature

Save the app and preview to see how the signature shows up in the signature box when drawn. Bear in mind that Clear can be pressed as many times as needed to give the drawing a few more shots:

Step 3: Configure signature typing

A second way to prompt users to sign a document is by signature typing, allowing the user to type in their name rather than writing it.

To do so, add a Text Input Control in the form for the user to enter their name. Change the Data Binding Value to session.typed_signature.

The value collected by this Text Input Control will be used to generate a signature Asset created by rendering the value in an existing font.

To configure this, select the Signature Input Control, change the Init mode to type and pass the session Variables:

  • In Control Properties > Value enter session.signature
  • In Advanced Control Properties > Signature enter session.typed_signature

Save the app and preview to see how the signature shows up in the signature box when typed:

This saves the signature as an Asset Data Type, which can be referenced like any other Asset.