Signature

Luna
Luna
  • Updated

The Signature field allows a user to draw their signature and thus enables you to collect electronic signatures. This field comes in handy when you require your users to authenticate (by signing) the data they submit through your form.

 

Example: Imagine that you sell some products and are building an app to manage the orders. You can add a signature field in the form through which users place their orders. If you make this signature field mandatory, your users will be able to place their orders only when they enter a signature.

 

Signature_Overview.gif

When your users sign (in the signature field) and submit your form, the signature is saved as a Portable Network Graphics (.PNG) file. This enables you to view the entered signatures as images.

 

Add a Signature field control

Firstly, find the Signature control in the controls add panel. Then, drag and drop it into a section or container on your form.

Sign_Add.jpg

 

Basic of the Signature field

Open the Content > Basic block and set the Title's text of this Signature control. For more information about Title for field control, please refer:

Understand the Title of field controls

Set the Associated variable for this Lookup List control. When you add a new Lookup List control, a default variable will be generated automatically. You can click the Edit Button to change the ID and name, or click the Reset button to bind this Lookup List control to other existing variables. For more information, please refer:

Understand form controls and the associated variables / fields

 

Sign_Basic.jpg

 

Appearance of the Signature field

Open the Content > Appearance block to set the appearance and layout of this Signature control.

Placeholder: Set the text as the placeholder of this Signature field.

Display Title: Choose display or hide the title of this control. For more information, please refer: Understand the title of field controls

Allow comment: Turn on this option will allow users to add comments on this control.  

Dynamic Display Rules:  When you set a dynamic display rules, It behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.

 

Sign_Appearance.jpg

 

Validation of the Signature field

Open the Content > Validation block to set the properties of this Signature field control.

Readonly: Turn this ON will make this field control as view only status. 

Required: Make this field as required. Users cannot leave the content as empty.

Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field. Learn more about the Custom Validation.

Sign_Validation.jpg

 

Action call of the Signature field

Open the Content > Action block to call a pre-defined action from the dropdown list. This action will be triggered once the value of this image field is changed.

Learn more about Actions

Switch_action.jpg

 

Style the Signature control

Field

Open the Style > Field block to set the styles of the field control.

  1. Field Width: Set the width of the Signature field control in PX or %.
  2. Height: Set the height of the Signature field control in PX.
  3. Field Alignment: Set the alignment of the Signature field control. This will only be effected when the field width is less than the outside container.
  4. Padding: Set the Padding of the Signature field control in PX or %.
  5. Color: Select the color of the signature..
  6. Background Color: Select the background color of the Signature field control.
  7. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
  8. Radius: Set the border radius to control corner roundness.
  9. Shadow: Adjust box shadow options.
  10. Placeholder: Set the styles of the Placeholder, 
    • Typography: Set the typography options for the Placeholder.
    • Color: Choose the color of the Placeholder's text.
  11. Error Message: Set the styles of the error message, 
    • Typography: Set the typography options for the error message.
    • Color: Choose the color of the error message's text.

 

Style of title

Set the Title of field controls that are applicable to this control.

 

Advanced Settings

Set the Advanced options that are applicable to this control.

 

 

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.