Adding custom forms

If you need to collect more information than can be captured using the standard fields, you can add a custom form to the registration and/or the booking process. You can also attach files to forms. It’s also possible to use a form by itself, for example to add a contact form to your website.

Creating a form

Using the New Form Wizard, you can easily create a new form. Contrary to the standard form used on the calendar, you can add as many fields as you want, and you have more control over the form’s behavior and layout.

Using the New Form Wizard

To create a new form, go to the Dashboard page and select New Form in the right-hand side menu. You will first be prompted to choose between an Integrated form and a Stand-alone form. You can easily switch between the two types later. If you are unsure which one you need, pick Integrated, as it is easier to set up. If you already have custom forms available, you will also see an option to use one of those forms as the basis for your new form.

Adding fields

The next screen will let you design the form. Start by selecting a field type on the pane on the bottom left, for example a Text Field or a Radio Button. This will show you a pop-up that allows you to customize the field by giving it a name, a default value and various other options that depend on the type of field you chose. If you do not want to label a field or add supporting text to it, the options can be left blank and the layout will adjust accordingly.

Most field types offer a Required checkbox. This means that the form can not be submitted if the field is left blank. Some fields may also contain a Unique checkbox. This option ensures that each form needs a different value in that field. This can be useful if, for example, you want people to pick a unique username. The Supporting text field allows you to add help text directly next to the field, helping your customer fill it out.

Several fields contain a list of options, including Radio buttons and the Drop-down menu. You list each option on a separate line, optionally adding the text to be stored in the database between square brackets. For example, if one of the options is New York Suite [room 1], the interface will show New York Suite but if you download the form it will show room 1.

If you just add (empty) brackets to an option, nothing will be stored in the database. In combination with the Require option you can use this to create an option that cannot be selected. A good way to use it is to make an unselectable first option of a drop-down menu Please select one (Please select one [ ]).

Another practical use of the Require option is to add it to a field with a single checkbox. This allows you to create an option like Check this box to agree to our Terms of Service which you could put below an HTML Comment box with the text of your Terms of Service.

Radio buttons and drop-down menus have can have an optional text field. This is particularly useful to add an “Other” option at the bottom of a list. You can enable this by appending the special code [*] to one of the options.

Each field can be set to Normal (default), Hidden, or Read-Only. If a field is set to hidden, it will only be visible to superusers and the administrator. This can be useful for adding comments for internal use that you do not want the client to see. Note that there is also an option to hide an entire form elsewhere in the system, in which case you can just leave all fields set to Normal. If a field is set to Read-Only, then everyone can see the field, but only superusers and the administrator can make changes to it. This is useful for things like a membership number that customers are allowed to see but cannot edit.

After you save the field by clicking Add field, it will appear on the form, and you can create another one. Note that none of the changes on the form are persisted until you click Save changes. You can also click the Submit button on the form itself to save the page.

In most cases, it is not advisable to add any of the standard fields, such as email, to a custom form that will be integrated in a schedule. The system would not know how to use the data from your form to send email confirmations and would still try to use the data from the email field on the standard form instead. Instead, use the appropriate field on the standard appointment form. The fields from the appointment form can also be listed on the Supervise page of your schedule.

Adding file upload

If you want your users to upload files, like a resume or photo, you can do that by adding one or more file upload fields to the form. For file upload to work you will need to have a Dropbox account, it can be a free account. Your users do not need to have a Dropbox account.

While in the form designer you can add an upload field to your form by clicking “File Upload” in the box on the bottom left. The first time you click this it will show you a button that allows you to connect your SuperSaaS account to Dropbox. You only need to do this once, the same Dropbox account will be used for all file upload fields on all forms in your account. If you later want to disconnect your Dropbox again you can do that via Configure > Overview on any form.

When someone submits a form with a file field it will be uploaded directly from their browsers to the folder Apps/SuperSaaS/your_form_name folder inside your Dropbox folder. You can then retrieve it by clicking the download icon anywhere you can view the form, such as the Supervise page of the form. You can also retrieve it directly from your Dropbox, of course, but if you have many users it may be difficult to tell which file belongs to whom.

As a rule, files stay in your Dropbox folder, even if the form or appointment that it was uploaded with gets deleted. The only exception is that if you edit a form that contains an uploaded file, and replace or delete the file, then we do remove the deleted file from your Dropbox.

Customizing the layout

When you want to edit a field, you can simply click it to get an Edit field pop-up. If you want to reorder fields on the form, you can click and drag the fields with your mouse. Note that when you delete a field from the form, any information contained in that field in already submitted forms will be lost as well. Changes will only be made permanent after saving the page.

You can customize the layout of the fields using the buttons in the top left pane. By default, fields are listed with the label above the text, but you can change this into a two-column layout with labels on the left and the fields on the right. If you have fields without a label then those would span both columns.

The default Auto option for the form width will allow the browser to choose an optimal layout, which typically means the browser sizes the form to be as wide as the largest field. You can override this with the S, M and L buttons that inform the browser to set the form width to 600, 750 or 900 pixels respectively. If you are using the two-column layout, you can further tell the browser to set the relative width of the two columns to either 20/80, 30/70 or 40/60. When you leave it at Auto, the browser will make its own decision based on the column width. Furthermore, you can set a fixed width on text fields and a fixed height on text areas.

Via Layout Settings you can change the colors that are used for the various elements that make up a form (see also Changing a schedule’s appearance). An HTML field has options to set text and background color inside just that field. If you want to include pictures in an HTML field, then those need to be already accessible on the internet because you cannot upload a picture here.

Upon saving the form, you will be returned to the configuration screen. You can try out the new form by clicking Use in the upper-right corner. If you want to change the form, click Configure and select the Design tab to continue working on it.

Adding a form to your registration or booking process

An integrated form can be added to either the registration or booking process. If you would like the form to be filled out for each appointment, then you should attach it to the booking process. You can add a form to a schedule via Configure > Process. As administrator, you will see a “Skip” option that will still allow you to create a booking without a form.

If, on the other hand, you want the form to be filled out only once per registered user, you should add it to the registration process. Adding a form to the registration process is done via Access Control. Of course, if you do not work with registered users then adding a form here will have no effect.

The option to attach a form is only visible after you’ve created at least one custom form. When you add a form you are asked to select whether the form should be filled out by you or by users, and whether the form should be visible to them.

The form and the object to which it is attached, either an end-user account or an appointment, only get saved to the database if both are valid. So if someone schedules an appointment and then closes the browser before filling out the attached form, then the appointment will not be saved.

If you send a confirmation for newly created appointments or accounts, you can attach the form to the confirmation message by including the magic word $form in the email text (see also Customizing messages and notifications).

Using a stand-alone form

A stand-alone form is identical to an integrated form and can be used as an integrated form, but has additional functionality that allows it to be used independently. It could be used, for example, to add a contact form to your site.

You can designate a form to be a stand-alone form when you first create it. Alternatively, you can convert an existing integrated form into a stand-alone form (and vice versa); simply navigate to Configure > Overview and press Convert at the bottom of the screen.

A stand-alone form will have its own URL, through which it can be reached directly. Just as you can customize the schedule’s URL, you can modify a form’s URL to include your own domain name. It also has two additional settings screens: the Process tab that allows you to customize the form submission process, and the Messages tab that allows you to customize the messages that are displayed as part of the process. The settings on these tabs have no effect when the form is used as an integrated form; in that case the settings can be modified on the configuration screen of the schedule in which the form has been integrated.

The Process tab describes the process of filling out a form. A flow chart at the bottom updates dynamically as you make changes. The first section allows you to limit who can access the form and when the form is available. You can, for example, close the form after a certain number of people have signed up or once a certain date has been reached and show a custom message afterward. This custom message can be defined on the Messages tab. Here you can also customize the “Thank you” message that is shown upon successful registration, as well as the optional confirmation email.

You can place a link to the form on your own website, or put it inside an iframe, similar to how you would integrate a schedule on your site (see Integration for more information). Once users have filled out the form, you can redirect them back to your site or show a “Thank you” message.

When you use hidden fields, the form will appear differently to your customers than it does to you. In order to see what it looks like to a customer, you will need to log out and go back to the page pretending to be a regular visitor or use another browser to look at the form. This process is identical to the testing of a schedule.