Forms Overview
Forms refer to the structured templates that are used to capture and collect data from users within a workflow. These forms act as digital representations of paper-based forms and enable the efficient and organized collection of information at various stages of a workflow.
In Cflow, forms typically consist of fields, such as text fields, checkboxes, dropdown lists, date pickers, and attachments, which allow users to input and submit data. These fields can be customized and configured based on the specific requirements of the workflow and the information that needs to be collected.
Cflow’s form builder
The form builder in Cflow provides a live view, allowing users to design forms with a “what-you-see-is-what-you-get” approach. It offers two containers, namely sections, and tables, which assist in creating visually appealing and interactive forms.
Sections
Sections are components within forms that help structure and group related fields together. They are the containers for placing the fields. Sections allow for a logical and intuitive presentation of form fields, improving the user experience and facilitating efficient data entry.
Using the form builder’s advanced features, users can design dynamic forms and fields by leveraging various HTML controls. Within each section, users can arrange controls row-wise, with a maximum of five controls per row. Additionally, users have the flexibility to adjust the width of the controls, providing customization options.
Tables
Tables are used to capture and present tabular data within a form. They allow users to input data in a structured format, similar to a spreadsheet or grid. Tables in forms are particularly useful for scenarios where multiple rows of data need to be entered, such as adding multiple items, listing details, or capturing repetitive information.
In the table section, users can create columns and place controls within them. You may also resize controls to optimize the space in the table section.
To enhance usability, the advanced form builder supports keyboard controls for easy navigation across fields. It also allows power users to save properties, facilitating efficient form-building workflows.
Adding a new section
To add a new section, click the “Section” icon from the layout elements tab. By default, the first stage will be selected.
- Initially, the name of the section will be set to “Section 1” by default. You can rename the section name at the top and all your changes are autosaved.
- The user can also change the section to be mandatory, read-only, and visible from the settings.
Adding a new table
The table container is designed to accommodate controls in a column-wise arrangement.
- A maximum of 8 tables can be created within the form.
- Table controls do not have a fixed limit on their width, providing flexibility in design and layout.
Fields
Fields serve as the fundamental building blocks of your form. They provide the essential medium through which users can provide information, enabling a seamless flow of data capture and interaction. These fields allow users to enter information, make selections, or perform actions within the form.
Common types of fields found in forms include:
- Text fields: Allow users to enter alphanumeric text, such as names, addresses, or comments.
- Dropdown lists: Present users with a predefined set of options from which they can select a single choice.
- Checkboxes: Enable users to select one or more options from a list of choices.
- Radio buttons: Present users with a list of mutually exclusive options from which they can select only one.
- Date pickers: Provide a calendar interface for users to select dates.
- File upload fields: Allow users to attach files or documents to the form.
- Numeric fields: Enable users to input numerical values, such as quantities or monetary amounts.
- Text areas: Provide a larger input field for users to enter longer text or paragraphs.
- HTML code field: This field allows users to input HTML code directly into a form. It is designed to capture and store HTML markup, which can include tags, attributes, and content for creating rich and customized formatting within the form.
Adding a new field
- The new field in Cflow can be any HTML control, offering a wide range of options for capturing user input.
- The minimum width of the field is set at 20%, and it can be expanded in increments of five percent to accommodate specific layout requirements. The maximum width allowed for the field is 100%.
- You will have extensive configuration options for fields, including the ability to specify data types, set mandatory or optional status, define read-only fields, enforce uniqueness, define maximum length limits, control visibility, set default values, and establish valid value ranges.
- In addition, there are advanced functionalities such as arithmetic calculations, string concatenations, date calculations, and time calculations based on specific conditions. This empowers users to create dynamic and intelligent forms that can perform automated calculations and generate results based on the provided input and predefined rules.
Placing a field
- When a new field is added to the initiator stage, it will be automatically created and propagated to all subsequent stages within the workflow.
- However, if a field is created at stages other than the initiator stage, it will also be created in all stages but will only be accessible and editable in the current stage.
- In the other stages, the field will be rendered as a read-only control, preventing modifications to its value.
Resizing, moving, and deleting a field
- When resizing a field, the size of the control will be adjusted exclusively at the current stage. The changes in size will not be reflected in other stages of the workflow.
- Similarly, when moving a field within a stage, the field will be repositioned to the user-defined location. However, the control associated with the field will not be moved in other stages, retaining its original placement.
- Deleting a field will result in its removal from all stages of the workflow. However, if the field is being utilized in any operations or functions, a warning message will be displayed, preventing the deletion of the field to ensure its continued functionality.