Introduction
The Reservations system uses forms as the public-facing component. The form you create will appear on the reservation page, and allow visitors to select a Time Slot and enter their contact and/or payment information.
If you are unfamiliar with forms, please read the generic Creating Forms tutorial, to learn more about the process. Once you are familiar with the basics of the FormBuilder application, the following steps will explain how to create your Reservation Form.
Note, also, that each form can only be linked to a single Schedule. Each Schedule you create will need its own individual form.
- Step 1: Add a New Form
- Step 2: Enter the Preliminary Information
- Step 3: Creating Form Fields
- Step 3: Adding Form Actions
- Step 4: Finish
- Step 1: Add a New Form
- Begin by mousing over the "Warehouse" link, located in the menu at the top of your Digital Bell Dashboard. In the drop-down menu, click the "Forms" link, which brings you to a list of your existing forms. Click the "Add a new form" link, located in the right margin to begin creating your Reservation Form. Return to Top
- Step 2: Enter the Preliminary Information
-
After clicking the link, you will be taken to the "Add Form" section, where you will enter your form's preliminary information. The fields on this page are explained in detail, below.
Title: This is the title of your form. The title will appear on the reservation page, directly above the form, itself.
Content: The "Content" section is optional and allows you to place any relevant information below the title, such as "Please choose an available time slot," or similar.
Thank You: The "Thank You" section allows you to enter a message that will be displayed to a visitor, after they have successfully completed and submitted the form.
Abstract: This is an optional field, which allows you to enter a short summary of the form's purpose.
Is Active: This option determines whether or not the form can be used on your site. The default setting is "Yes."
Permissons: In this section, you can add extra Digital Bell users, and give them permission to view, edit or own the form.
Once you have completed this form, click the "Submit" button to proceed to the Form Editor.
Return to Top - Step 3: Creating Form Fields
-
After entering the preliminary information, you will be taken to the Form Editor. Here you will begin creating the Form Fields that prompt the visitor for various types of information, such as their name or email address.
Note, all Reservation Forms must contain three specific Form Fields, which request the first name, last name, and e-mail address of the individual completing the form. This information is required to successfully integrate your form with your Schedule. The process for creating the required fields is described below.
The first Form Field will prompt a visitor for their first name. Specific text, listed in bold below, and displayed in the example images, will need to be entered exactly as shown. The following steps explain how to add your first Form Field:1. Click the "Add new field" link, located in the right margin. This will bring you to the "Add Field" form.
2. Select "Text" from the "Form Field" drop-down. This option determines what type of Form Field you will be creating. The "Text" Form Field allows visitors to enter a short string of text (i.e. name, address, phone number, etc.).
The different types of Form Field, available in the drop-down menu, are described in greater detail in the Creating Forms tutorial.
3. Enter the title. In this field, enter FirstName.
4. The "Name" field is an internal designation, used to communicate with the Reservations system. Enter name-first in this field.
Note: The "Name" field is case sensitive.
5. Ensure the "Is Active" and "Is Saved" options are both set to "Yes," then click the "Submit" button. The completed form should look like the example image, below. The complete form should look like the example image, below. After clicking "Submit," you will be presented with an exapanded set of fields and options.
6. In the "Label" field, enter First Name.
7. Select "Yes," for the "Is Required" option.
8. The remaining fields and options can be left blank, or at their default settings. The expanded form should look like the example image, below. Scroll to the bottom of the form, and click the "Submit" button to create your first Form Field.
You have now created your first Form Field. The steps below explain how to create your second field.1. Click the "Add Form Field" link, located in the right margin. This will bring you to the "Add Field" form.
2. Select "Text" from the "Form Field" drop-down.
3. Enter LastName in the "Title" field.
4. Enter name-last in the "Name" field.
5. The form should now look like the example, below. Ensure the "Is Active" and "Is Saved" options are both set to "Yes," then click the "Submit" button. After clicking "Submit," you will be presented with new set of fields and options.
6. In the "Label" field, enter Last Name.
7. Select "Yes," for the "Is Required" option.
8. The remaining fields and options can be left blank, or at their default settings. The expanded Form Fields should look like the example, below. Scroll to the bottom of the form, and click the "Submit" button to create your second Form Field.
After creating the second Form Field, follow the steps below to create the third required Form Field, which will prompt the visitor for their email address. The "Email" field can be placed in any position on the form, however, for the purpose of this tutorial, we will add it directly after the first and last name fields.1. Click the "Add Form Field" link, located in the right margin. This will bring you to the "Add Field" form.
2. Select "Text" from the "Form Field" drop-down.
3. Enter Email in the "Title" field.
4. Enter email in the "Name" field.
5. The form should now look like the example, below. Ensure the "Is Active" and "Is Saved" options are both set to "Yes," then click the "Submit" button. After clicking "Submit," you will be presented with new set of fields and options.
6. In the "Label" field, enter E-mail.
7. Select "Yes," for the "Is Required" option.
8. The expanded form should now look like the example, below. The remaining fields and options can be left blank, or at their default settings. Scroll to the bottom of the form, and click the "Submit" button to create your second Form Field.
You have now created the required Form Fields for your reservation form. Subsequent Form Fields of your choosing can now be added, such as "Student Name" or "Phone Number," using the steps above as a template, or by referencing the "Creating Forms" tutorial. Additional Form Fields are not required to use a specific "Name," however, it is recommended to enter a "Name" without spaces or special characters.When a visitor completes and submits a form, the information entered in each Form Field will be logged in the "Requests" section of your Schedule's central information page. The "Requests" section allows you to review each submission, and see which Time Slots have been selected. In-depth information about retrieving this information is contained in the next tutorial in this series - Managing your Requests.
Once you have finished adding Form Fields, continue to the next section of the tutorial.
Return to Top - Step 3: Adding Form Actions
-
Now that you have added the necessary Form Fields, you can begin adding Form Actions. The Form Actions necessary for a reservation form are "Reservation Schedule" and "Notification E-mail."
The "Reservation Schedule" action will integrate your form with a Schedule, and determines how the Time Slots will be displayed and selected. The "Notification E-mail" action sends a notice to the e-mail address(es) of your choice, whenever a visitor successfully selects a Time Slot and submits the form. The following steps explain how to add the required Form Actions:
1. Adding the Form Action - Click the "Add new action" link, located in the right margin. This will bring you to the "Add Action" form.2. Selecting the Type of Action - Select "Reservation Schedule" from the "Form Action" drop-down menu, then ensure "Is Active?" is set to "Yes," and click the "Submit" button.
3. Selecting a Layout - Next, you will use the "Layout" drop-down menu to select a format for your Time Slots. The Layout you select will determine how the available Time Slots are presented to your visitors, as well as how many Time Slots can be selected with each form submission. There are five Layouts to choose from:
- Form - Integrates the Form Fields with the available Time Slot choices. With this Layout, the visitor will both select their Time Slot(s), and fill out the form on the page itself; without the need for a pop-up window.
Each Time Slot will be listed next to a checkbox, allowing visitors to select multiple Time Slots with each form submission. Note, this is the only Layout that supports multiple Time Slot selections. - Calendar - This Layout displays a full-size calendar on the page, with the Time Slots represented as calendar events. To select a Time Slot, visitors will click an event on the calendar, and fill out the Reservation Form in a pop-up window. Only one Time Slot can be selected with each form submission.
- List - This Layout displays a vertical list of the available Time Slots, with a "Reserve" button displayed next to each. To select a Time Slot, visitors will click a "Reserve" button, and fill out the Reservation Form in a pop-up window. Only one Time Slot can be selected with each form submission.
- Radio List - This Layout integrates the available Time Slots with the Form Fields, and does not require a pop-up window. Each Time Slot is listed next to a radio button selector, allowing only one Time Slot to be selected from the available options.
- Payments* - The Payments option requires both a Payment Gateway, and SSL certificate for your site. Please contact support@gslsolutions.com before selecting this Layout option, if you have not already, to ensure your site is configured to accept online payments through Reservation Forms. This Layout enables you to use your Time Slots as purchasable goods or services, in combination with the dollar value entered in the "Payment Amount" field, when creating the Time Slots.
4. Selecting the Schedule - Use the drop-down menu to choose the Schedule. The selected Schedule's Time Slots will then be integrated with this form, and displayed according to the chosen Layout option. Note that only one Schedule can be used with a single form.
5. Finish - Click the "Submit" button to add the Form Action, and return to the Form Editor.
Next you will add the "Notification Email" Form Action, which sends a message to your chosen email address whenever a Time Slot is selected, and the form is submitted. This email will contain the data entered by the individual submitting the form (Name, Address, Email, etc.).
Note, this Form Action is required for logging the data that is submitted. Without this Form Action, the submitted data will not be available in your Schedule's central information page. The steps below explain how to add and configure this Form Action.
1. Click the "Add new action" link, located in the right margin. This will bring you to the "Add Action" form.
2. Select "Notification E-Mail" from the "Form Action" drop-down menu, then click the "Submit" button.
3. In the "Subject" field, the text you enter will be used to create the subject line of the email you (or others) will receive.
4. In the "To Address" field, enter the e-mail address(s) that the notifications should be sent to. Multiple e-mail addresses can be entered, separated by commas.
5. Once you have completed the form, click the "Submit" button to return to the Form Editor.
As an optional final step, you can also add a Form Action that will send a 'Thank You" e-mail message to visitors who have selected a Time Slot and submitted the form. In the case of online order forms, this can serve as a purchase confirmation/email receipt. The message can also be personalized, using the information entered in the form.
1. Click the "Add new action" link, located in the right margin. This will bring you to the "Add Action" form.
2. Select "Thank You E-Mail" from the "Form Action" drop-down menu, then click the "Submit" button.
3. In the "E-mail Address Field" section, use the drop-down menu to select the "email" field you created in the previous tutorial section. This tells the Form Action to send the message to the e-mail address entered by the visitor who is submitting the form.
4. The "Subject" field is used to create the subject line that will appear on each "Thank You" e-mail received by those submitting the form.
5. The "Thank You Message" will be used as the body of the e-mail. Here, enter any information that should be sent to each visitor who submits the form. Optionally, his message can be personalized with the information entered in the form, using the Replacer Function.
For example, the fields requesting the name of the visitor are standardized, and inserting the following codes into the "Thank You Message" field will replace the code with the visitor's name.
${name-first} - Displays the individual's first name
${name-last} - Displays the individual's last name
After you have entered the "Thank You Message," click the "Submit" button to create the Form Action and complete the process.
Return to Top - Form - Integrates the Form Fields with the available Time Slot choices. With this Layout, the visitor will both select their Time Slot(s), and fill out the form on the page itself; without the need for a pop-up window.
- Step 4: Finish
-
After you have added your Form Actions, the reservation form is complete. Next, you will add your newly created Reservation Form to a page. Click the link below to view the next tutorial.
Add the Reservation Form to a Page
Return to Top