Common properties

Common properties

Common properties

Some properties are common between several of the components. These are detailed below:

• Name Each new component must be given a unique name within the form – this cannot contain spaces and should be relevant to the expected contents, for example name or telephoneNumber. This is a mandatory property for all components.

• Validation Type This option gives you a choice of various validation types such as email address, phone number, web address, number only or text only. If the data entered into the field doesn’t match the format set here an error message will be displayed when the user tries to submit the form alerting them to alter their information.

• Pre-fill If users are logged into your site and have certain data already saved in their profile you can use this option to pre-fill fields with their data.

• Indented and Label If this box is ticked you can enter a label for your form component – this is the text that appears next to the component. There are two properties associated with this: label and suffix label. Label is the text that appears to the left of the component and suffix label is the text that appears to the right.

• Label Width This is the width of the label to the left of the component. The default width is 200 pixels. You only need to enter a number in this field, you do NOT need to enter pixels or px after the number.

• Default Value Anything entered in this property will be displayed in the form on the page when it is first loaded. The content can still be edited by the user in the final form.

• Minimum characters If a number is entered in this box an error will be displayed on the final form if fewer characters than specified here are entered. Putting a 1 in this property makes this component required/mandatory to be filled in before submitting the form.

• Maximum characters This specifies the maximum number of characters that can be entered into this component. Some components such as text fields will only allow this number of characters to be entered before stopping any more data from being entered, other components such as multi-text fields will display an error when the form is submitted.

• Hide required asterisk If a field is made required/mandatory, either by checking a ‘required’ checkbox or setting a minimum character of 1, a red asterisk will automatically be displayed next to the component. Ticking this box will hide this asterisk if you do not want it displayed on your form.

• Width This is the width of the component itself and can be set in pixels or a percentage. To use pixels enter only a number (no px, pixels etc) or to use percentage add a % to the value. Leaving this property blank will set the default width for the component.

• Tie over? Ticking this box will cause the next form element to be positioned on the same line to the right of this component. If the box is left un-ticked each component will go on their own line.

• Tooltip Any text entered here will be displayed in a small (usually yellow) pop up box when the user hovers over the form label. It is very useful for explanatory text if it is not clear what data should be entered into a certain field. A tooltip is indicated by an underline underneath the component label, this is usually a green dashed line but can be altered using styles.

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.