Forms Behaviour Overview
By Nicola D'Andrea and Tessa Holland 16 December 2019 Codebots Basics
An introduction to our Forms behaviour
This is article describes the Forms behaviour in our ideal completed state. The availability of features will vary between the different bots. To see what functionality is available in your app, see your Reference documentation in the library.
The Forms behaviour allows product owners to build and manage forms to capture information. This functionality has many applications and use cases, some examples being: surveys, questionnaires, sign-up forms, or application forms.
There are many question types which are available for use out of the box, though developers can also create custom question types if required.
The Forms behaviour would not be suitable for:
- Creating structured data
- Managing data
- Account log in
- Account registration
We have an interactive prototype of the forms behaviour available online.
From this page, a user is able to create, delete, edit and duplicate forms. This screen shows the forms, their names, what entities they are connected to and the version which is currently active. It also shows if there is a draft version of the form available.
The forms in this page are categorised by the entities they are associated with. In the example image below, there are three different entities: Articles, Reports and Surveys, all of which contain the forms behaviour in the entity diagram. Every entity associated with the forms behaviour creates a new type of form.
This screen allows the managing of a single form. At the top of the page is a tabbed navigation bar which allows users to jump between different build modes for their form. Before a form is published, the users can access the Display, Build and Preview tabs. Once a form has been published, the Summary and Submission tabs also become available.
Each of the tabs are outlined below:
In the display tab, the user defines the top-level options for how the form is displayed. The user is able to set: the form's name, the way that the slides are presented, and how progress is shown to the person filling out the form. Depending on the options selected, other options may not be available.
This is the way that the questions are grouped together and presented to the user when completing the form.
For this display type, each slide is presented to the user one at a time. This view includes next and previous buttons to allow the user to navigate through the pages. Additionally, the user cannot progress to the next slide while there are fields which have failed validation. All types of progress indicator are available for this display. The slide's name is displayed at the top of each "page".
For this display type, all slides are displayed on the page but a page break indicator shows the separation between the slides, along with the slide name. The user will be able to scroll seamlessly up and down the page to see their previous answers or up-coming questions. The progress bar labels and indicators are based upon the slide's progress rather than on an individual question basis. The user will not be able to submit the form until all fields have passed validation.
Just like the page breaks option, in this type all slides are displayed on the page. However, this view doesn't include clear indicators between the slides, instead the questions are just displayed in a single continuous manner. Form progress is based upon questions, rather than on slides for this view. The user will not be able to submit the form until all fields have passed validation.
The progress indicator positioning is set based upon the selected Slide Display type. Available indicators types are: none, dots, connected dots, percentage bar, or connected small dots.
The progress labels show the name of the current item in the progress indicator. Progress labels are only available if a progress indicator (above) has been selected. Available labels are: slide name, question name, slide number, or question number.
In the build tab, users can manage both the slides and the questions in those slides. They can create, delete and reorder the questions and slides, including moving questions between slides.
Down the left side of the main build page is an accordion-style slide list. This list displays all of the slides which are in the form, along with the questions which are contained in each slide. Any of these items in the list can be moved around by drag and drop in order to change the order of the items. Unless deliberately closed by the user, the current slide will always be expanded.
Clicking on any item in the list will jump the user to that question or slide in the flow.
Questions are added to the page by the user. Every question can be moved (using the slide list down the side), edited, removed, and duplicated. By default, no actions are visible on a question until it is hovered over.
Adding a New Question
New questions can be added to the form using the "+" buttons that are shown on each question when it is hovered. However, a "Add a new question" button is also located at the end of the question builder section.
Configuring a Question
Questions have various options which can be configured: the type of question, if its required, and defining the validation used. They can also have images, and subheadings attached.
End of Survey Message
Users have the option of specifying the end of survey message, which is displayed on a new page once the user hits the "Finish" button. This message can be edited by clicking the "Edit Message" button in the end of survey section. This opens up the sidebar with a text area to enter the message.
By default, this message is blank and the page is not shown until a value is entered by the user creating the form.
All skip and show logic sits underneath the logic tab. This allows for the configuration of complex branching of forms, or simple show logic for single questions.
This is configured using the Blockly visual programming editor to write out conditions in a human-readable format.
Types of Logic
The form logic allows you to control the way the user moves through the form, either skipping or showing questions based upon how the respondent answers questions.
Skip logic allows you to skip respondents to a future point in the form based on how they answer a question.
Show logic allows you show or hide a question based on previous answers.
When it comes to choosing which type of logic to use, technically you could choose either one and get the same result. However, depending on the situation, normally one is better suited than the other. Consider the following example; if the user answers A to a question and I want to ask respondents an additional question, I could use both types of logic to get the same result:
- set show logic on that extra slide so it only pops up if the correct answer is used
- set skip logic on that extra slide so that it is skipped if any of the other answers are used.
Both would work in this scenario, but it would be more irritating to set up skip logic against the four other answers, rather than the single piece of show logic against one answer. In every scenario, it is important to consider which option is more simple and easiest to manage, and allow that to guide your decision.
In the preview tab, the user is able to fill in the form to get an idea of what they are building. It demonstrates what it will look like on the frontend, along with how the skip/show logic is functioning. It allows users to test the form, without having to publish the version. It does not create a new submission.
Once a form has been published, the Summary tab becomes available. In the summary tab, a summary of all submissions for this version is displayed. The data is displayed for both the whole form, and on a per question basis. Each question summary displays the data differently, dictated by the question type.
Once a form has been published, the Submission tab becomes available. In the submissions tab, all submissions for this version are displayed. Results can be either filtered or exported. Clicking on a single submission will display the form in a read-only view, with the submitted answers selected and included.