Create form
The Form Designer Page allows you to create and manage your forms. Here's what you can do on this page:
- Create new forms
- Customize the form settings
- Save, preview, and publish your forms
- Manage your forms, including publishing, deleting, and duplicating
Based on user actions, there are 2 types:
- General Forms: These forms are designed for data entry and submission only.
- User Task Forms: These forms require specific user actions, such as Task Assignees and Approvers.
Based on accessibility, there are 2 types:
- Public Forms: These forms can be accessed by respondents who are not part of the workspace by following the form's URL. They do not support Task Assignees or Approvers.
- Private Forms: These forms can be accessed by respondents who are part of the organization's workspace by following the form URL. They support Task Assignees and Approvers.
To create a form, go to "Forms & Tasks" > "Form Designer," then click "Create form." This opens a canvas with a form builder, ready for you to start designing your form.
Form Designer form editor is organized in 4 areas:
- Top - topbar
- Left - toolbar
- Right - form/control settings
- Center - drag&drop form canvas where you can edit your form definition
Personalize your form by adding a logo/header:
ο»Ώ
ο»Ώ
In the topbar, you can:
- Save your changes
- Preview your form's appearance (note: you can't collect responses in preview mode)
- Preview as: if the form has assignees, this feature allows you to impersonate and preview as <assignee name>
- Publish your form (required for collecting responses)
In the form settings panel, you can configure your form's details, including its name, ID, browser display title, and sharing options. You can make your form public (if no assignees are defined) or private.
For advanced users, there's an option to switch to code view, allowing you to add extra rules, and events using JavaScript π and additional styling with CSS, using controls' IDs. You can easily switch back to the drag-and-drop builder when needed.
The sky is the limit!
The Form Designer toolbar offers a powerful set of controls to help you build dynamic and functional form layouts. You can simply drag and drop them onto the canvas and edit the properties of each control to customize its data, style, and actions.
The controls are categorized under 2 tabs:
- Fields
- Structure
Fields:
- Text input
- Number input
- Date-time input
- Textarea
- Select input
- Checkbox
- Radio button
- Button
- Approval π
- File upload
Structure:
- Section
- Columns
- Stepper
- Divider
- Tabs
- Heading
- Paragraph
You can easily find and add any field to your form. Drag fields from the panel on the left to your main view, to the place where you want them to be. You can reposition them afterward. Each element comes with a Settings panel that lets you control its appearance and behavior.
ο»Ώ
- Type in the Label of the field, the title you want your users to see.
- Add a Tooltip if you feel users might need extra information (tooltip cannot exist without a label)
- Add Info text if you want to provide additional information regarding the text box; info text will appear right below the field label.
- Default Value specifies the default value of the text field (e.g. John Doe).
- Check the Required box if the field must be filled in (a blue asterisk will indicate that the field is required).
- Data source:
- Static list: This property allows you to set the labels and values for the items. You can add these labels and values directly from the user interface. Ensure that the values assigned to each option are unique.
- JSON: provide options in JSON format, like:
The Text input field can be used for short and general text input.
The Number input field permits input of numeric values, restricting non-numeric characters.
The Date-time input can be used to display or capture date/time information.
Textarea are similar to text inputs, the difference being that they allow for more text input. For example, you may use textarea fields for comments or suggestions.
The Selector field provides a list of several options from which your visitor will have to select one. You can make the list Searchable for your respondents, you can also set a default choice.
The Checkbox field allows users to choose only one item from a list of options.
The Radio allows users to select one option from a predefined set of choices.
The Button enables you to trigger actions or perform specific tasks with a simple click.
The File upload control allows you to select and upload multiple files.
Allowed file types - Allows you to control the types of files users can upload with the File Upload control. You can select from the pre-defined list of file extensions:
- All file types (allows users to upload files of all the mentioned file types)
- Select one or many types from the list
- Add your own extension
Allow multiple files upload - set if File Upload control will allow single or multiple file upload
Validation
- Required- Enabling this property makes the File Upload control mandatory, requiring users to select a file. Enabling theΒ RequiredΒ property ensures that the Form's submit button remains disabled until a file is selected.
- Max file size - Set the maximum allowed size of each file that a user can upload.
Sections allow you to group multiple controls. You can drop the controls inside a Section.
- Task Assignees: sections can select assignees who are responsible for specific tasks or approvals within the form. You can add users that will be notified for data entry and submission.
- Assignee replacement: you can add multiple assignees for efficient task management.
- You can re-order assignees by using the drag-and-drop functionality.
It's important to note that once the first user submits the assigned task, it will be considered completed for all other Task Assignees.
Please keep in mind that only users who are part of your workspace will be displayed in the Assignee and Assignee replacement selection lists.
- Visibility: You can set visibility rules to determine which users will see this section within the form:
- All - Users who open the form will see this section in a read-only view; they cannot enter data, only view it for informational purposes.
- Only Task Assignees - This option allows only users defined as Task Assignees to see the section. Task Assignees are users who need to submit data for this section.
- Custom - You can add any user who needs to see this section in a read-only view; they cannot enter data, only view it for informational purposes. Task Assignees are added by default since they need to perform actions on the section, including data entry and submission.
The "Columns" control is a versatile element that you can use to structure your forms with multiple columns. This feature is particularly useful when you want to arrange form fields side by side, optimizing space and improving the overall form layout.
The "Columns" control is a valuable tool for enhancing the layout and usability of your forms, allowing you to present information in a structured and visually appealing manner.
Usage tips:
- If you need to scroll left or right within the "Columns" control (if there are 4+ columns defined), hold down the Shift key and scroll using the mouse.
- Consider using columns when you want to present related form fields side by side, such as first name and last name or date and time.
- Test your form on various devices to ensure that the column layout remains user-friendly and responsive.
The "Stepper" control is a dynamic element that you can use to create multi-step forms or guided processes within your forms. It allows form users to progress through different stages or sections of a form, ensuring a structured and organized data collection process.
- Task Assignees: sections can select assignees who are responsible for specific tasks or approvals within the form. You can add users that will be notified for data entry and submission.
- Assignee replacement: you can add multiple assignees for efficient task management.
- You can re-order assignees by using the drag-and-drop functionality.
Select individual steps (e.g. Step1) to define settings at the step level, not at the Stepper control level.
ο»Ώ
It's important to note that once the first user submits the assigned task, it will be considered completed for all other Task Assignees.
Please keep in mind that only users who are part of your workspace will be displayed in the Assignee and Assignee replacement selection lists.
Usage Tips:
- Consider using a stepper when you have a form that involves multiple stages or sections, such as a multi-page survey or a complex data collection process.
- Label each step with descriptive titles to guide users through the process effectively.
- Use Task Assignee to assign users to complete steps.
The Divider can be found under the Structure tab. Its role is to provide a structure to your form. You could use it to separate different sections of the form in order to make it easier to read by your respondents.
Use the Tabs control to organize related content and allow users to switch between different sets of information within a single container.
- General: Allows you to manage tabs within the control, where each tab is identified by a unique name. You can rearrange the tabs items.
- Default Tab: Allows you to specify a default tab by its name, which is automatically displayed when the widget loads.βο»Ώ
Use the "Heading" control to create structured and organized forms by adding headings or section titles.
The "Paragraph" control is a versatile element that allows you to add text-based content to your forms. With this control, you can provide instructions, descriptions, or any other textual information within your forms.
ο»Ώ
- Save: The "Save" function allows you to save any changes made to the form you are currently designing.
- Preview: The "Preview" function enables you to see how the form will look to respondents. It displays the form exactly as it will appear to users, allowing you to review its layout and functionality.
- Use this feature before or after publishing to ensure that your form appears and functions as intended.
While in Preview mode, you can interact with the form to simulate user responses, but no actual data is collected during this preview.
3. Preview As: "Preview As" is a feature available for forms with assignees or approvers. It allows you to view the form from the perspective of a specific assignee or approver, simulating their experience.
- This feature is valuable when you want to ensure that each assignee or approver sees the correct information and workflow within the form.
"Preview As" ensures that you can verify how the form appears to different user roles.
4. Publish: The "Publish" function makes your form accessible to respondents. It generates a unique URL for your form that you can share with users to collect their responses.
- Only forms that are published can receive data submissions from respondents. You must publish your form when you're ready to make it live.
- If a form is not published, respondents won't be able to access it through the provided URL. Make sure to publish your form when it's complete and ready for use.
ο»Ώ
ο»Ώ
For support, please join our Discord community for further assistance and support.
