1. The Controls Section is where form elements can be dragged from then dropped into the Designer Section
   
1. Field - used for accepting text-based data (e.g. First Name, Surname, Address, etc.)
   
   
   
2. Checkbox - The checkbox is shown as a square box that is ticked (or checked) when clicked on. Checkboxes are used to select if a certain condition applies to an individual.
   
   
   
3. Image - When clicked, it will open a small window to select an image file. Can be used for identification documents.
   
   
   
4. HTML - A text editor where you can format text using usual formatting tools and/or HTML tags for a more customised form. 
   
   
5. Card - A container with borders and a label to divide fields into sections. Other Controls can be dragged inside a Card. Cards can also be inside other Cards.
   
   
   
   
   
2. The Designer Section is the work area. This is also where the Save and Preview buttons are found.
   
1. Users must save first before they can preview the form.
   
   
3. The Page Settings is where a new form can be created, and where the column number can be set.
   
   
4. When you drag a Field into the Designer, Control Settings for the Field are shown under Page Settings. 
   
1. You may change the size of the Control from Full to Half. 'Half' size will occupy only 50% of its column. 
   
2. Label will be filled-in automatically depending on what you select from the Field Dropdown Menu (d). 
   
1. For other controls, the Label should be entered by the user. 
3. Switching to Custom Field will make the Field Dropdown List show all Contact-related fields. You may refer to this tutorial: How to Add Custom Fields.
   
4. The Field Dropdown Menu works hand in hand with the Label (b). Select an item from the dropdown list and it will automatically fill-in the Label. i.e. If Field is "Surname", Label will show "Surname".
   
5. The "Required" switch ensures that users must fill in this field before they can submit the form. It prevents the form from being submitted if the textbox is left empty, prompting users to provide the necessary information.
   
   
   
   

How to Create a Form?

Step Tutorial

1. Login to your SMS and click on Administration then Form Creator
2. Setup a Template. This must be done before you can use the Controls on the left to add objects to the form.
   
1. Select New Template or an existing one
2. Add a template Name
   
3. Select the number of Columns (1 minimum, 3 maximum)
   
   For steps 1 and 2, refer to the image below:
   
   
3. Once the Page Settings is setup, you may save your form anytime during the editing process by clicking the Save button in the Designer section. We recommend you save your form at regular intervals to minimise data loss. 
   
1. To preview your changes, you should click on the Save Button first.
   
   
   
4. Drag a Card into the Design Section.
   Pro tip: You may drag another Card inside the first Card so that the outer Card is the whole form and the ones inside are the different sections of the form
   
5. Setup the Control Settings. The Header text is what will appear on top of the section. See image below where "Waitlist Form" is used as the Header text.
   
   
   
6. Drag a Field from the Controls section to the Designer
   
7. Click on the Field that you just dragged in and select the "First Name" from the Field dropdown menu under the Control Settings.
   
1. Selecting a Field from the dropdown list will automatically fill in the Label with the appropriate text according to your selected Field.
   
   
   
   
8. Depending on your organisational needs, you may add more fields to gain more knowledge about people who are interested to join your program/s. In addition to the First Name and Surname, we also added Email, Date of Birth, Address Fields and an Image Upload to ask for proof of identity from the interested party. We also set some of them as required.
   
   
   
9. Optionally, you may also add a Card with a Privacy Notice using HTML Text to assure the interested party that their data is used solely for tracking interest in your program.
   
   
10. Save your changes
    
    
    
    
11. Preview the Waitlist Form