Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Metadata
DescriptionYour SmartForm is a collection of pages, navigation and controls. You manage all these using Visual Designer.
Title Introduction into Form Structure - SmartForms Help

From a form designer's point of view, a form is a collection of pages containing information and input fields that end-users will navigate through and fill in to perform a task (for example to complete and submit an online application). Some pages in this collection are mandatory and cannot be deleted as they carry certain functionality. 

When a form is created from a "Blank Form" template, it includes 4 There are 4 types of pages: 


Image Added

Start Page

...

 is a mandatory page

...

. The main purpose of this page is to inform users what the form is for and provide a button to start the form. No input fields are allowed on this page as the form is not instantiated till the user clicks on the Start button.

Image Added

Data Entry Page

...

 is a page where you add content (information, warnings, prompts, etc.) and input fields. You can add as many

...

Data Entry Pages

...

(see Adding & Removing Pages) to a form as necessary, placing them between Start and Submission pages in the order they will be presented to users. Data Entry Page can be deleted at any time.

Image Added

Submission Page

...

 is a special type of Data Entry Page. This page is mandatory and cannot be deleted. It can contain any information and input fields as any other Data Entry Page but it also has an important function - when users get to this page, Submit button that allows users to submit completed form

...

will appear in the Form Controls panel.  

Image Added

Completed Page is a page which displays a message to users when the form is successfully submitted. No input fields are allowed on this page as the form at this stage is already submitted. You can delete this page.

Note: the Start and Submit buttons are not displayed in the Visual Designer. They are automatically added at run time (together with the Next, Previous and Quit buttons). You can modify their properties in the Visual Designer, for example, change the text displayed on the Quit button to "Exit", see {Form-level properties} for more details.


At the very least a form will contain two pages - the Start and Submission . An pages. You can create the form from "One Page Form" template. An example of such form would be a simple request Request form with few input fields. You can create such form from "One Page Form" template. 

For more complex forms, placing all input fields on one page would make it too long and will force end force users to scroll back up and forth down - not a great design. It's much better to group information and input fields into sections and place them on different pages, assign them proper headers to clearly idenify identify what the groups are about, and give the users navigation controls to switch between the pages.See how the navigation is done {How Form works}.

When you publish your form, what you (and users, when the form is released) will see first is the Start Page. The Start Page is a good place to put information that explains what the form is for, what is expected of users and any other content you want users to see before they start the form. The page also has a Start button, when a user clicks on it, the form session related to this user is instantiated and the user is presented with the first Data Entry (or Submission, in case of One Page form) page. 


Form Navigation and Control

How the screen looks and what navigation tools appear after a form is instantiated is highly customisable. Here we explain the default settings.


For one page form

As the form has only one page there is no need for navigation tools. The form has two control buttons - Submit and Cancel. Submit button allows a user to submit the form. Cancel button allows the user to exit the form without submitting it.

Image Added


For multi- page form

The default configuration for the multi-page form includes Page links at the top, Data Entry area in the middle and Form Controls at the bottom.


Image Added

Anchor
Page Links panel
Page Links panel
Page Links is a panel where the names of the pages are displayed in a sequence you placed them in the Visual Designer. By default they are links that allow user to switch to a particular page at any time. Use "Show/Hide page links" setting in Global Styling if you want to hide the Page Links.




Data Entry area is where the pages of the form are displayed, one at a time.




Anchor
form-controls-panel
form-controls-panel
The Form Controls panel contains:

  •  Navigation buttons:  Next button allows users to move to the next page, and Previous button - to move to the previous page.  
  •  
    Anchor
    Progress bar
    Progress bar
    Progress bar consists of blocks representing form pages. Main purpose of the Progress bar is to show user which page is completed (all validation rules are met) and which is incomplete so user can have a full picture of which pages require attention. It is also another way of switching between the pages (by default direct navigation is allowed). Use "Show/Hide progress display bar" setting in Global Styling if you want to hide the Progress bar.


  • Action buttons: Submit button (shown on the Submission page) allows user to submit the form and Quit button allows user to exit the form at any time.  

Depending on the form configuration form navigation can be one-way (forward only), two-ways (back and forward) or user can be allowed to switch between pages using the Page Links or the Progress bar (see Form-level Properties)


Tip
Form is assembled from form components. Data Entry Page is a Page form component, it works as a container for other components to form a page. You display content on the page using Content form component and collect user responses using Input Field components (Text Field, Choice Field, etc).  See Form Components for more details.