The Signature control is an input control that allows the user to create freehand signatures and save them as an image on a page or form. By adding electronic signatures, a.k.a. eSignatures, to your forms, your enterprise can better legal and regulatory requirements.


When an app user has to sign on a panel, a separate screen opens up to enable them to conveniently place their signature. This signature is then scaled to fit the area form designers have designated for the Signature control in their form. 


In this article, you will learn how to add and configure the Signature control in your forms. 


Step 1 - Open Page Designer 

After creating a page, form, or sub form, hover over its name. Once the 'Open Page Designer' button appears, click on it.



Step 2 - Add the Signature Control to Your Form  

From the Standard tab, drag and drop the Signature control onto your design canvas.



Step 3 - Configure the Signature Control 

Upon adding the Signature control, its properties will appear on the right side of the screen.  



You can customize the following properties accordingly: 


Identifier
This field is for the name used to identify this specific control. Add a meaningful one so you can use it in expressions.
Background Color
Pick a color from the palette to use as a background color for the control.
Height
Set a height for the signature panel. Keep it as -1 to dynamically change the height. 
Width
Define a width for the panel. You can keep it as -1 to allow it to change dynamically.
Horizontal Options
Choose from the following horizontal options for the control to appear in the app:
  • Fill - Pick this to let the control fill the horizontal space.
  • Fill and Expand - This option makes the control fill the horizontal space, and stretch itself to fill space.
  • Start - With this option, the control will be placed at the left-hand side.
  • Start and Expand - Choose this option to place the control on the left-hand side and allow it to stretch itself to fill space.
  • Center - This option places the control in the center.
  • Center and Expand - This selection places the control in the center and stretches it to fill space.
  • End - With this option, the control will be placed on the right-hand side.
  • End and Expand - Select this option to put the control on the right-hand side and enable it to stretch itself to fill space.
Vertical Options
Choose an appropriate vertical option for the control to appear on the app screen.
  • Fill - This option lets the control fill the vertical space.
  • Fill and Expand - This option lets the control fill the vertical space and stretch itself to fill space.
  • Start - Choose this option to place the control at the top.
  • Start and Expand - This selection places the control on the top and stretches it to fill space.
  • Center - This option places the control in the center.
  • Center and Expand - This selection places the control in the center and stretches it to fill space.
  • End - With this option, the control will be placed at the bottom.
  • End and Expand - Select this option to place the control on the bottom and stretch it to fill space.
Required
Select this option to make users' interaction with the control mandatory. Transform app users will see a red asterisk next to the control as well as an alert popup.
Signature Color

Select a color from the palette to use for the signatures. 


Watch How it Works

This video tutorial explains how you can add electronic signatures (eSignatures) to your mobile form in transform Studio. 


 

Need more help? Contact us at support@makeen.io