Form components

Form components

Form components

Frame
This is a border around a set of other components that groups elements of a form together with a title, or label, in the top left corner.  To edit the title/label click on the top left of the component where it says ‘No label’ and enter the title you want to appear in the frame in the Label box of the properties at the bottom of the screen.

Text Label
This is a component that allows you to enter text into the form without a corresponding input field.  It is useful for introductions or explanatory text.

• Text
  Enter your text in this box.  You can use the buttons above the box to format your text in the same way as you can for pages in the main editor including adding links
• Suppress Padding
  By default some spacing in inserted around the text to separate it from it’s neighbouring components.  If you do not want this spacing to be added tick this box.
• Frame
  Ticking this box puts a frame around the outside of the text you have just entered.  To make the frame the full width of the form rather than the width of the text enter 100% in the width property above.

Text Field

This is one of the most common components and it allows the user to enter data into a form field displayed on a single line. Without any validation settings applied this field can contain letters, numbers and symbols.

• Personalisation field
  This is a specialist component that is only in use on some websites. It is similar to the pre-fill component in that it automatically fills in this part of the form based on user data already held within the system.

Multi-Text Field

This is similar to a text field but can contain several rows of text.

• Rows
  This specifies how many rows tall the component appears to be on the form. This does NOT limit the number or rows of text that can be entered.
• Personalisation field
  This is a specialist component that is only in use on some websites. It is similar to the pre-fill component in that it automatically fills in this part of the form based on user data already held within the system.

HTML Field

This allows the user to format their information before submitting the form. It is useful on forums or where the submitted information is displayed on another page rather than data being submitted by plain text to an email address.

• Controls
  You can alter which options are available to the user using this property. ‘All options’ or ‘default options’ will display the entire range of formatting tools whereas ‘basic options’ will only display the simple toolbar.
• Auto-extend height?
  If this option is checked the text box will automatically expand in height if more rows of data are entered than the preset number.

Drop Down Menu

This component allows you to specify a selection of values for the user to choose from.

• Values
  This is where you specify the options for the drop down. Enter one option per line (use the enter/return key to move to a new line).

• Default value
  Repeat one of your ‘values’ here to use it is the option that is initially selected when the form first loads. If this is left blank the top option will be used.

• First option is not valid?
  In some cases one of the ‘values’ entered will be an instructional value such as ‘Please select’. If the ‘Required’ box is ticked then a value must be selected before the user can submit the form, but if this option is ticked the form will ensure that an option other than the ‘instructional’ value has been selected. For this to work correctly the instructional value must be the first one in the list.

Date Field

The date field allows users to enter a date in a specific, consistent format. This allows the date to be stored in a format that enables calculations to be made with the data. The permitted format is always displayed to the right of the component.

Check Box

This inserts a single checkbox into the form – useful for a single ‘I agree/I disagree’ question or gaining permission for holding the users data. The text can be placed either to the left or the right of the checkbox.

• Default Value
  If this box is ticked the checkbox will already be ticked by default when the form loads. If left un-ticked, the form will load with the checkbox un-ticked.

• Must check?
  If this option is ticked then the check box must be ticked before the form can be submitted. This is useful for when permission to use the users data is required.

Radio Button List 

This component is used when a user can only choose one value from a pre-determined list.

• Values
  This is where you specify the options for the list. Enter one option per line (use the enter/return key to move to a new line).

• Default value
  Repeat one of your ‘values’ here to use it is the option that is initially selected when the form first loads. If this is left blank no option will be selected.

• Columns
  This specifies how many columns across the form will be used to display the values. If this is left blank each option will be displayed on a separate line.

Checkbox List

This component is used when a user can only choose multiple values from a pre-determined list.

• Values
  This is where you specify the options for the list. Enter one option per line (use the enter/return key to move to a new line).

• Default value
  Repeat one of your ‘values’ here to use it is the option that is initially selected when the form first loads. If this is left blank no option will be selected.

• Columns
  This specifies how many columns across the form will be used to display the values. If this is left blank all values will be displayed on a single line, or wrap onto multiple lines if the maximum width is reached.

• Hide value labels
  This option is selected when you don’t want each checkbox to have it’s own label. This is useful when you have a grid of checkboxes with each column representing the same value, however you must still enter the necessary labels into the values box for the results of the form to be displayed correctly when it has been submitted.

• Value label position
  You can set whether the label appears to the right or above the checkbox with this property

Image and File Upload

The image and file upload components allows the user to upload an image or a file:

Address Field

This component inserts a set of fixed text fields to allow the user to enter address details, without you having to create individual components for each separate line of the address.

• Allow postcode lookup?
  
  If this option is checked, the address fields are reduced to a single postcode field with a ‘Find address’ button. This allows the user to enter just their postcode then select their house number from a dynamically generated list. The separate address fields are then automatically filled in with the rest of their address. There is an option for the user to manually enter their address instead if they prefer.

PLEASE NOTE

There may be an additional charge for using the postcode lookup option if it is not included in your website quote due to the cost of searching postcode data.