UI Components Form Cells In-line Signature Form Cell

Updated: January 31, 2022

In-line Signature Form Cell

FUIInlineSignatureFormCell

Intro

The In-line Signature Form Cell is a form cell that allows users to enter their signature into a form to verify identity and express intent of acceptance. The difference between this component and Signature Capture is that this component’s interaction and behaviors are integrated into the form, allowing the users to review content during the signing.

Example of the in-line signature form cell on iPhone (left) and iPad (right)
Example of the in-line signature form cell on iPhone (left) and iPad (right)

Anatomy

A. Header

The header section contains a title and a cancel button. Initially, the cancel button is hidden.

B. Signature Canvas

The signature canvas is a drawable area. Initially, it is in an inactive state. The user can activate the area by tapping once. The area allows freehand drawing.

C. Footer

The footer section is hidden initially. It contains primary actions of the component, such as Save, Clear, and Re-enter Signature.

Anatomy of an in-line signature form cell
Anatomy of an in-line signature form cell

Behavior & Interaction

An in-line signature form cell starts from an empty state. When the user taps on the signature canvas, it will activate drawing area where the user can draw and insert the signature. After tapping on save, it will display the saved signature on a read-only canvas.

Life-cycle of an in-line signature capture form cell; inactive state, active state, signed state, and saved state consecutively
Life-cycle of an in-line signature capture form cell; inactive state, active state, signed state, and saved state consecutively

Inactive State

This is the initial state of the form cell. By tapping anywhere on the signature canvas, the form cell will switch to Active State.

Active State

The active state makes the signature canvas drawable. When the form cell is active, the footer appears. Tapping the cancel button will go back to the inactive state.

Signed State

When the user starts signing, the clear and save buttons are activated. Tapping clear will go back to the active state. Tapping the save button will go to the saved state. Similarly, tapping the cancel button will go to the inactive state.

Saved State

The signature is saved and the signature canvas becomes inactive. Tapping Re-enter Signature will go back to the cleared inactive state.

Adaptive Design

Example of in-line signature form cells in different container views
Example of in-line signature form cells in different container views

Resources

Development: FUIInlineSignatureFormCell, FUIInlineSignatureFormView

Related Component: Signature Capture