A form is assembled from form components. There are 5 distinctive types of form components: Pages, Groups, Contents, Hidden Fields and Input Fields.
Page is a form component that serves as a container for adding other components in order to build a section of the form that will be presented to users as a page.
Group is also a container for other form components. A Group is usually added to a Page to bundle some components together for a purpose, for example to make the components stand out as a group visually by giving the group a title, a description, place borders around it or highlight it with a different background.
Content is a form component that you use to add content to your form, for example to provide information, to give a warning, etc.
Hidden Field is a form component that is not visible to users. There are many cases when Hidden Field can be useful, for example, for storing values, for defining complex rules that involve many components, etc.
Input Fields are the only components that are meant for user interaction - getting user responses, collecting user data, etc. The following Input Fields are available:
Text Field - form component with a single-line input field.
Text Area Field - form component with a multi-line text input field;
Rich Text Editor - form component with a multi-line text input field allowing entry through WYSIWYG HTML editor;
Choice Field - form component with an input field which displays options for users to select. It has three different implementations: Checkbox Field, Radio Field, Select Field.
Date Field - form component with an input field that allows users to enter dates.
Time Field - form component with an input field formatted to allow time of the day entries.
Attachment Field - form component that allows uploading of file attachments.
Except for the Page component, all form components are available through the Toolbox Panel in the Visual Designer. See Adding & Removing Pages and Adding & removing components on a page for more details.
Form Component States
A form component (including Page) can be in one of the following states:
- Required - a component is mandatory. For example, if this state is assigned to an Input Field, users will not be able to submit a form if the field is left blank.
- Optional - a component is not required. When Input Field is in this state it can be blank.
- Hidden - a component is invisible to users.
- Read only - a component is read-only, users cannot make an entry or selection.
See Managing Component States for more details.
Input Field Values
Input Field components are data entry fields, their main purpose is to collect information from users. Sometimes field values can be prefilled at form instantiation. In other cases business rules dictate that field values should be calculated depending on the choices user made in other fields. You can define Default Value and Runtime Value for any Input Field component. For example, if user is logged in, the 'Email address' field value can be prefilled with the user's email address which the user logged-in with into the website (Default Value). Or when user enters the number of items to purchase in 'Quantity' field, the total amount to pay will be calculated and displayed in 'Amount' field (Runtime Value). See Assigning Input Field Values for more details.
Input Field Validations
One of the most important aspects of form processing is data validation. A form should be 'smart' enough to guide a user in filling it in such way that all business rules are met and no data omitted. You can set validation rules for any Input Field component and define error messages that users will see when the rules are not met. See Validating Input Field Values for more details.
Form Component Styles
There are three ways to modify the styling of your form:
- Global Styling in the SmartForms Administration Console. It allows you to change settings that affect all forms in your SmartForms installation.
- Form Styles for your form in the Form Administration console. This is where you place CSS instructions that affect your form only.
- Styles Management, settings that you define for your form components in the Visual Designer.
SmartForms comes with default styles for each component. See Styling Your Form to learn how to modify the component styles.