Signature Field

Instructions

The plugin is very easy to use and set up. Once activated, a “Signature” type field is available on the Manage Database Fields page.

This signature field presents a “pad” where the user can scribble in their signature or anything they want. The signature can be drawn using a touchscreen, touchpad or mouse. An “Undo” button is provided so the user can start over if they want.

Setting It Up

Add a new Signature type field to one of your field groups like any other field. The field can be configured to appear in signup forms (which can serve as consent or release forms) by ticking the “Signup” checkbox.

If  “Required” is selected, the user must provide a signature to complete the form.

With “Read Only” checked, the user will be allowed to provide a signature only once. If this is unchecked, the user will be able to change the signature on the record edit page.

Configuring the Field’s Appearance

The field’s appearance can be configured in the field definition using the “attributes” setting. There are several controls available:

attribute	value	effect
width	CSS size value	sets the width of the signature pad/signature display
height	CSS size value	sets the width of the signature pad/signature display
color	CSS hex color	sets the color of the stroke
background-color	CSS hex color	sets the background color of the signature pad/signature display
image-width	CSS size value	sets the width of the signature display
image-height	CSS size value	sets the height of the signature display
decor-color	CSS hex color	enables and sets the color of the signature line

The attributes are set by using the attribute name and value separated by a double colon. For example:

The signature pad is the place where the user can draw their signature, while the signature display just displays the signature. Normally, the signature display inherits the width and height attributes, but you can override this by using the image-height and image-width attributes in the field configuration.

The decor-color attribute will show a signature guide line if included in the attributes. This line serves as a guide line only, it will not be saved with the signature. It is best to use a light/transparent color for this.

The color values must use hexadecimal notation (as shown in the example above), it can be the 3- or 4-pair (transparency) versions. CSS color names will work also.