In this article you will learn the essentials required to create a basic HTML form that you can upload to Zenoti, and capture guest health and service data (including provider notes or SOAP Notes). You can also use the form to take a guest's consent and signature.

Before you Begin

  • This article assumes that you have basic understanding of HTML and working with JavaScript.
  • Download this basic HTML structure

About the HTML structure

The HTML structure you downloaded contains all the basic scripts including JQuery, JQueryUI, bootstrap, and the Zenoti scripts.
Note: The Zenoti scripts are required for the forms to render when using Zenoti.
You must add your HTML elements to this HTML structure. 

Working with the HTML structure

Before you start making changes to the basic structure and adding the HTML elements, you must be aware of the following:

  • form.js: These scripts are used for saving, validating, and retrieving form data. It is also used for capturing guest signatures and file uploads. You can overwrite any function specified in form.js by replacing JavaScript/Jquery in < script type = "text/javascript" ></script>  tag of HTML.
  • form.css: Contains the basic and common CSS for all forms. You can add your custom styles within the HTML file by using the following tag:
<style type="text/css">
Body {
-------
-------
}
</style>
  • The <body>   tag should contain class="container"  . The <form>   tag must always be after the <body>   tag. The form tag (which must always come after the body tag) must contain an id="form"   and optionally an action=""  .
  • Signature: The basic HTML structure includes a code snippet that allows you to collect a guest's signature (useful if you need to capture guest consent).
 /* Signature Components */
            createSignature("client-signature", { "required": true });

         Remove this code if you do not need a signature field.

  • Reviewer Signature attribute: Sometime, you may need a form to be reviewed and signed by another person (for example, a medical supervisor). In such cases, you can add the ReviewNeeded  attribute to your signature component that enables the form to open into the review panel for the reviewer's signature.
    Example
createSignature("patient-signature", { "required": true, "ReviewNeeded": true});
  • Webstore Signature attribute: If you have forms that you use for both webstore and appointment book, you may have the following requirements:
    - When opened from appointment book - You may need the form signed by      
      another person (for example, a provider)
    - When opened in webstore - As guests usually access the form on webstore, you   might not need to collect a signature.

You can implement this behavior by adding the webstore  attribute to your signature component.

createSignature("patient-signature", { "required": true, "webstore": true});

A Typical Form

A simple form usually consists of fields that are designed to capture the guest or service details, and usually include the following HTML elements - textarea, number field, date field, radio buttons, checkboxes, drop-down list, and signature field.
The following is an example of a typical form:

Click here to download the HTML of the above form.

Building a HTML Form

The following section contains the guidelines, required libraries, and common controls available for the HTML elements that you can add in your HTML structure.

Guidelines

When you are building a form for Zenoti, you must ensure the following:

  • Scripts and CSS
    Include the following styles and scripts references in your HTML:

Styles

<link rel="stylesheet" href="https://cnt01.zenoti.com/forms/V1/common/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cnt01.zenoti.com/forms/V1/common/css/jquery-ui.min.css">
<link rel="stylesheet" href="https://cnt01.zenoti.com/forms/V1/common/css/signature-pad.css">
<link rel="stylesheet" href="https://cnt01.zenoti.com/forms/V1/common/css/form.css">
<link rel="stylesheet" href="https://cnt01.zenoti.com/forms/V1/common/css/font-awesome.css">

Scripts

<script src="https://{BaseUrl}/jquery1.12.4.min.js"></script>
<script src="https://{BaseUrl}/JQuery.validate1.17.0.js"></script>
<script src="https://{BaseUrl}/jQueryUI.1.12.1.js"></script>
<script src="https://{BaseUrl}/Bootstrapv3.3.7.js"></script>
<script src="https://{BaseUrl}/signature_pad.js"></script>
<script src="https://{BaseUrl}/Form.js"></script>
  • Form Tags: You must enter the HTML elements within the <form> </form>  tags of your HTML structure.
  • Comments: Zenoti supports only multi-line comments. For more information, see the Multi-line Comments section of this link.
  • Functions: End all functions with a semicolon. 
  • CSS Classes: Do not use more that one bootstrap class. 
  • Macros: A macro is a placeholder text that gets replaced with specific data when inserted into an input field. Zenoti supports the following Macros only:

Example

Consider the following snippet:

<input type="text" class="form-control" name="patientfirstName" id="patientfirstName" value="[GuestFirstName]" />

This snippet contains the [GuestFirstName] macro. This macro gets replaced with the guest's first name in the form.
Note: If you want to add Guest's Zip code to the form, use the macro: [ZipCode].

HTML Elements

Textarea

Textarea is a multiple-line text input control that allows a user to enter more than one line of text. Multi-line text input controls are created using a <textarea> tag.

Example

<textarea onfocusin = " textAreaAdjust ( this ) " onkeyup = " textAreaAdjust ( this ) "
class = " form-control " rows = " 5 " id = " notes "
name = " Notes " placeholder = " Enter your areas of concern "
label = " Areas of Concern " required ></textarea>

You must be aware of the following for a Textarea:

  • (Mandatory) Every Textarea must have a unique class = "" ,  id = "" , name ="" , and row =""  .
  • (Mandatory) Every Textarea must have class="form-control"  attribute. This is a bootstrap class. You can refer this link for more information.
  • (Mandatory for auto height): To handle auto height, you must add the following functions: onfocusin = " textAreaAdjust ( this ) " - onkeyup = " textAreaAdjust ( this ) "   
  • If you wish to make a Textarea a mandatory field, add required  and label attributes.
    Note:
    label attribute is used for the error message. 
  • Use placeholder attribute to display helpful text about the Textarea.

Tables

Tables allow you to organize and present data in rows and columns.
An HTML table is defined with the <table> tag.
Important: Zenoti suggests that you do not use tables unless absolutely necessary as the experience on mobile devices may be compromised. You can use Div elements instead.

Example

<table id =" table_name " class = "table_name table table-bordered" >
< thead class= "cf" >
< tr >
< th > Code </ th >
< th > Company </ th >
</ tr >
</ thead >
<tbody>
< tr >
< td > 01 </ td >
< td > Spa Bliss </ td >
</ tr >
< /tbody>
</ table>

You must be aware of the following for a Table:

  • (Mandatory) Every table must have a unique class = ""  and id = ""  attributes.
  • If you want to add borders on all sides of the table and cells, use table table-bordered  attribute. This is a bootstrap class. You can refer this link for more information.
  • Each table row is defined with the <tr>    tag. 
  • A table header is defined with the <th>   tag. 
  • By default, table headings are bold and centered. A table data/cell is defined with the <td>    tag.

Input Field

The <input>  tag specifies an input field for the user to enter data. The input field can be used to capture either a number or text.

Example

<input class = "form-control" id = "input-padding" type = "text" min = "0"
placeholder = "Enter quantity" name = "Bio Face Wash"
required label =" Enter the quantity you wish to buy "/>

You must be aware of the following for an Input Field:

  • (Mandatory) Every input field must have an id = ""  ,  type="" , and name ="" attributes.
    Note
    : id and name must be unique.
  • The type attribute can be either text  or tel .
    - Use text   if you want users to enter text, number, special characters, or   combination of all the three.
    - Use tel if you want users to enter only numbers. If you use tel , add the    following attribute
     onkeypress="return (event.charCode >= 48 && event.charCode <=57)"   
  • (Mandatory) Every input field must have class="form-control"   attribute. This is a bootstrap class. You can refer this link for more information.
  • If you wish to make the input field as a mandatory field, add required  and label  attributes.
    Note:
    label attribute is used for the error message. 
  • Use placeholder attribute to display helpful text about the input field.

Dropdown list

A dropdown list allows user to select one option from a pull-down list of options.
A dropdown list is created using  select  and option  tags.  

Example

< select id = "severity" name = "Severity" class = "form-control" >
< option selected= "selected" value= "1" > Mild </ option >
< option value = "2" > Moderate < / option >
< option value =" 3 "> Severe </ option >
</ select >

You must be aware of the following for a dropdown:

  • (Mandatory) Every dropdown list must have a class = "" ,  id = "" , and name =""   attributes.
    Note
    : id and name must be unique.
  • (Mandatory) Every dropdown must have class="form-control" attribute. This is a bootstrap class. You can refer this link for more information.
  • The list of options in the dropdown are added using multiple <option>  tags that have a value  attribute.
  • To show an option as the default selected value, use the selected="selected"    attribute.
  • If you wish to make the dropdown field, a mandatory field, add required  and  label attributes.
    Note:
    label attribute is used for the error message. 

Checkbox

Checkboxes allows the user to select one or more options from a pre-defined set of options. The options can be presented in a list (one below the other), or in a row (one after the other).
It is created using an input  element whose type  attribute has a value
of checkbox

Example

  • Checkboxes in a list
<div class="checkbox"> 
    <label><input type="checkbox" id="Hives" name="Hives" value="Hives">Hives</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" id="Moles" name="Moles" value="Moles">Moles</label>
</div>
<div class="checkbox disabled">
    <label><input type="checkbox" id="Acne" name="Acne" value="Acne">Acne</label>
</div>

  The above code is rendered as follows:  

  • Checkboxes in a row
<label class="checkbox-inline"><input type="checkbox" id="Hives" name="Hives" value="Hives">Hives</label>
<label class="checkbox-inline"><input type="checkbox" id="Moles" name="Moles" value="Moles">Moles</label>
<label class="checkbox-inline"><input type="checkbox" id="Acne" name="Acne" value="Acne">Acne</label>

  The above code is rendered as follows:  

You must be aware of the following for a checkbox:

  • (Mandatory) type="checkbox"   attribute is used to define a checkbox.
  • (Mandatory) Every <input type = "checkbox">   must have a unique value = "" ,  id = ""  , and name ="" .
  • If you wish to make the checkbox a mandatory field, add required  and label  attributes.
    Note:
    label attribute is used for the error message. 

Radio Button

Radio buttons allows the user to make a selection. It is created using an input  element whose type  attribute has a value of radio. The options can be presented in a list (one below the other), or in a row (one after the other).
Note: A radio button behaves like a checkbox if it's not a part of a radio button group

Example

  • Radio buttons in a list
<div class="radio">
    <label><input type="radio" name="gender" value="male" checked>Male</label>
 </div>
 <div class="radio">
     <label><input type="radio" name="gender" value="female">Female</label>
 </div>

  The above code is rendered as follows:  

  • Radio buttons in a row
<label class="radio-inline"><input type="radio" name="gender" value="male">Male</label>
<label class="radio-inline"><input type="radio" name="gender" value="female">Female</label>

  The above code is rendered as follows:  

You must be aware of the following for a radio button:

  • (Mandatory) type="radio" attribute is used to define a radio button.
  • (Mandatory) Every <input type = "radio">    must have a unique
    value= "" ,  id = ""   , and name =""
     .
  • If you wish to make the radio button a mandatory field, add required  and  label  attributes.
    Note:
    label attribute is used for the error message. 

Signature

The Signature element allows you to capture a digital signature.

The script needed to render the signature field in Zenoti is in the HTML Structure you downloaded.

Example <div id= "guest-signature" > </ div > 

For the signature field to render, you must ensure that the id in the script and id specified in HTML are same.

Note: To add multiple signature blocks, add multiple signature scripts with varying ID's and ensure the ID in the script and the corresponding HTML is the same.

Error Validations

For validations to work, add the following code in the Script tag of HTML.

/* Required Fields Handling */
$('#form').focusout(function (e) {
    var reqAttr = $(e.target).attr('required');
    errorMessage(e, reqAttr);
});

$('input[name^="date"]').change(function (e) {
    var reqAttr = $(e.target).attr('required');
    errorMessage(e, reqAttr);
});

Annotations

You can reference the sample HTML form with annotation for adding annotations to your form.

To annotate images, you must do the following:

1. In the Script tag of HTML, add the following code:

createAnnotaions('imageAnnotationbefore',[imageURL]);

Note: The [imageURL] must be present in the Zenoti Image Gallery (at the organization level, Admin > Setup > Image Gallery)
Example 

createAnnotaions('imageAnnotationbefore', ['https://demo.zenoti.com/temp_data/tempassetstore/368f32b9-6902-4fc9-9006-f07e3f583e0b/customassetupload/419b4d70-2e22-4a13-9be3-d611038c1b70.jpg ']);

2. Add the following paths to HTML: 

<script src="https://{BaseUrl}/Annotation.js"></script>
<link rel="stylesheet" href="https://cnt01.zenoti.com/forms/V1/common/css/annotations.css">

3. Add the following script below the path:

<script type="text/javascript">
    window.$Annotation = $;
</script>

4. Add the following to the HTML tag: 

<div class="clsUploadImage" align="left">
    <label class="clsCaptureLabel">Before</label>
    <input type="file" id="capture" capture="camera" style="visibility: hidden"><br>
    <br>
    <div class="clsAnnotatedImage" id="imageAnnotationbefore"></div>
</div>

Guest Mode

If you send your forms in an email or use guest mode (a mode that allows guests fill up the form on a device), you may want to hide or restrict guests from editing certain fields. 

Hide fields

Normal fields: To hide normal fields when form in sent in an email or viewed in guest mode, add hidefields attribute to your class.
Example

<div class="hidefields">
   <input type="text" class="form-control" name="FName" id="FName" />
</div>

Mandatory fields: To hide mandatory fields that are mandatory for your provider, but not your guest, when form in sent in an email or viewed in guest mode, add viewtype="hidefields" attribute to your element (div).
Example

<div>
   <input type="text" class="form-control" name="FName" id="FName" required viewtype="hidefields" />
</div>

Restrict fields

Normal fields: To restrict editing of normal fields when form in sent in an email or viewed in guest mode, add viewfields attribute to your class.
Example

<div>
   <input type="text" class="form-control viewfields" name="FName" id="FName" />
</div>

Mandatory fields: To restrict editing of mandatory fields (that are mandatory for your provider, but not your guest), when form in sent in an email or viewed in guest mode, add viewtype="viewfields" attribute to your element (div).
Example

<div>
   <input type="text" class="form-control" name="FName" id="FName" required viewtype="viewfields" />
</div>

See Also

Did this answer your question?