Form Module
A Form module is used to capture data submissions. It must be set up before anything can be submitted to it. In this series of tutorials, you will learn how to set up the form fields as well as configuring the auto-responding emails that are sent when submissions are received.
Configuring a Form module
A Form module is usually used to manage general submissions such as user feedbacks, "contact us" details, support requests, or guestbooks etc where textual data are collected.
A Form can be set up with as little or as many fields required and Thank-you emails and/or Alert emails can be set up to be sent when submissions are received.
Submissions can be managed in the Form module and can also be exported out in CSV (Comma Separated Values) format.
In this tutorial, we will show you how to set up a "Contact Us" form with the name, email, and feedback fields. We will also set up a Thank-you email and an Alert email which are sent when a submission is received. The Thank-you email goes back to the sender while the Alert email goes to the administrators alerting them of the new submission.
To start configuring a Form module, navigate to it and select it under the project in the Projects screen. Then click the "Configure" button at the bottom right of the Projects panel.
Once the Form module is loaded, you should see an empty list with just the ID, Date, and Status columns as we haven't set it up with any other fields yet. This is the "Form Submissions" screen where submissions are displayed.
The interface consists of several elements:
| Element | Description |
| Search panel | located at the top of the screen, allowing submissions to be searched and filtered |
| Submission list | where all submissions are shown |
| Add/Edit/Delete buttons | located at the bottom left of the screen to add, edit, or delete a submission record |
| Pagination buttons | located at the centre bottom of the screen for navigating between pages of search results |
| Export button | click to export the records in CSV (Comma Separated Values) format |
| Settings button | click to access the Form module's settings |
Setting up the form fields
The first thing to do when configuring a Form module is to set up the form fields. Since we are creating a general feedback form, let's look at how to set it up with the following fields:
| Field | Description |
| Name | the name of the person submitting the feedback |
| the email address of the sender | |
| Feedback | the actual feedback text |
To set up the form fields, follow the steps below:
1. click the "Settings" button at the bottom right of the "Form Submissions" screen and after few seconds the "Form Settings" screen should be displayed.
There are two tabs at the top of the screen, a "Form Fields" tab which shows the UI (User Interface) for setting up the form fields when clicked, and a "Messages" tab which shows the UI for setting up the Thank-you and Alert emails.
Form Fields Tab UI
Message Tab UI
Across the top of the "Form Fields" UI, you would see seven column headers: Mandatory, Title, Description, Name, Default Value, Type, and Error Message. Each of these hold a different property for a particular form field. These properties are described below:
| Properties | Description |
| Mandatory | indicates if the field is required. Tick this checkbox if the particular field is required and cannot have an empty value |
| Title | an optional short title of the field. For our example, these could be "Name", "Email", or "Description" |
| Description | an optional property usually used to remind the user what the field is for |
| Name | a unique variable name for the field. This is required and is the variable name that the FormConnector component uses to submit the data to |
| Default Value | an optional property that stores the default value for the field. It can be used by the FormConnector component to find out the default value for the particular field in order to display it in the SWF |
| Type |
the data type for the field that can be used for validating the data submitting to this field. This can be one of the following values:
|
| Error Message | the error message to display when validating the field fails |
3. enter the following values for each of the fields
| Mandatory | Title | Description | Name | Default Value | Type | Error Message |
| yes | Name | The full name of the sender | name | Enter full name | Text | Please enter your name |
| yes | The email address of the sender | Enter email | Please enter your email address | |||
| yes | Feedback | The feedback text | feedback | Enter your feedback | Text | Please enter your feedback |
The final form should look like this:
5. click the "Save" button at the bottom right of the screen to save the form fields.
Adding a submission manually
Usually submissions are submitted from a website to the Form module through the use of a FormConnector component. However, sometimes you might want to add a submission manually. To create a submission manually, follow the steps below:
1. make sure you are on the "Forms and Submissions" screen.
2. click the "+" button at the bottom and the "Submission Details" form will appear. Note that the form should appear with the fields you have already set up. E.g., Name, Email, and Feedback fields.
3. enter the corresponding values under the "Property value" column.
4. press "Save" to commit the changes.
Editing a submission
When a submission is received, its status is set to "New" by default. There are three statuses supported by the Form module by default. They are:
| Status | Description |
| New | the default state when a submission is received |
| Approved | usually set by the administrator if moderation is required |
| Disabled | set by the administrator if the submission is invalid |
However, additional statuses can be used. To edit a submission, follow the steps below:
1. make sure you are on the "Forms and Submissions" screen.
2. select the submission record you wish to edit and click the "Edit" button at the bottom of the screen. The Submission Details form will appear.
3. click in the fields you wish to change under the Property value column.
4. you can update the submission status by choosing a different value in the status drop down box located at the top right hand corner of the screen, or enter a custom value.
5. click the "Save" button to commit the changes.
Deleting a submission
You can delete a submission record off the system by following the steps below:
1. make sure you are on the "Forms and Submissions" screen.
2. select the submission record you wish to delete and click the "-" button at the bottom of the screen.
3. a warning message will appear asking for confirmation.
4. click the "Yes" button to proceed with the deletion.
5. the submission record should be removed from the list.
Very often when you submit a form, you also receive a thank-you email. Now we've learnt how to set up the form fields, in the next tutorial we will learn how to set up these auto-responding emails.
