Signature Input

Collection

We added a Health Declaration database collection to our site to store the form data.

Page Elements

In our site we added the following elements:

• 3 text input elements for entering personal information

• Signature input element for signing the form

• Submit button

• Success and error message text elements

Code

When a site visitor fills in the form and clicks the submit button, the following occurs:

1. Validity check: If any required fields are empty, display a message requesting that the visitor fill in the missing fields.

2. Insert data: If validations pass, insert the form data into the Health Declarations collection and display a success message. An image of the signature is stored directly in the collection using a data URL.

3. Clear fields: Following a successful data insertion, clear the signature input and clear the text inputs by setting their value to null. To prevent the validity indicators (such as a red border) from displaying in the now-empty inputs, reset the validity indications.

We also added event handlers for hiding the success and error messages following an error or a submit. The event handlers are connected to the Properties panel and run when a visitor types inside a text input or draws a signature. Note that all 3 text inputs are connected to the same event handler.