Custom form fields tab

Not all businesses are alike and due to that we have created a custom form builder so that you can include custom fields to collect data from your customers. There are 6 HTML input fields to choose from. By default, options that you will likely not need to be concerned with are tucked away under the “Advanced” section.

A general rule of thumb as with most features in this plugin is to ignore options if they don’t make sense to you. This probably means you don’t require them at all.

Textbox and Textarea

After selecting an element type of Textbox or Textarea, set a value for the “Label” field to indicate what to enter into the textbox. If the field is obligatory then check “This field is required” and click the “Create” button. Additional options described below.

1.    Placeholder – Use this field to add a hint within the Textbox or Textarea

2.    Match a valid URL – Check this box if you would like to collect a URL from the customer. This will provide a Textbox with validation to ensure the user has entered a valid URL. Note that this is available only for Textbox.

3.    Allowed value – Select a value for further validating a Textbox. Note this is available only for Textbox.

4.    Min length and max length – Provide a value to restrict the content of the value the user enters within the Textbox or Textarea.

5.    Regex – Provide a Regex expression to validate the contents entered using regular expression syntax.

Dropdown list and Multi select list

1.    After selecting an element type of Dropdown list or Multi select list, set a value for the “Label” field to indicate what to select from the list. If the field is obligatory then check “This field is required”.

2.    Next set a comma separated list of options in the “Options” field. These are the values you want to show in the list. For example, setting Apple, Grape, Banana will add into your list all three fruits maintaining that order. The first value in the list will be Apple then Grape followed by Banana.

3.    Next set a value for the first item. Following the previous example, since we have a list of fruits, we might want to set a value such as Select a fruit.

4.    Next set a default value. Building on to the previous examples, if we wanted the Banana from our list of fruits to be selected by default, then we would add the value Banana.

5.    A dropdown list and a multi select list are quite similar. The only difference is that a multi select list will allow your user to select multiple items by pressing CTRL key on the keyboard while clicking an item. Classic HTML 101, anybody that has learned to use the internet knows this.

6.    Now click “Create”.

Checkbox and Radio button

1.    After selecting an element type of Checkbox or Radio button, set a value for the “Label” field to indicate what the list of checkboxes or radio button represent, for example What is your favorite fruit? If we require at least one item to be checked, then check “This field is required”.

2.    Next set a comma separated list of checkbox or radio button items in the “Options” field. For example, setting Apple, Grape, Banana will add 3 checkbox or radio button items listed one under the other maintaining that order. The first value will be Apple then Grape followed by Banana.

3.    Next click “Create”.

Plain Text

1.    After selecting an element type of Plain Text, provide the content in the “Content” field. This allows you to insert plain text into your form.

2.    Next click “Create”.

Common fields you will find that every element type supports are tucked away under the “Advanced” section and are as follows:

CSS class – Use this field to add a CSS class for additional styling

Show a separator after this field – Adds a horizonal line separator after the field.

Note after creating each field, you will find it listed in the right pane where you can edit a field to add amendments, delete the field or re-order by dragging and dropping.

Additionally, after creating each field, click the “New” button to exit the “Edit” mode and begin adding a new form field.

This completes our section on custom form fields. By using or more of these fields, you can collect any type of input from your users during the booking process.

You will be able to view the users input later in your back-end when a booking is made. The label value you set when creating each form field will be coupled with the users input, so make sure you set a meaningful label, one that will help you understand at a glance what the users input is.