Create form

form designer page 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 form types 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 add logo/header personalize your form by adding a logo/header the topbar 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) form settings panel 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 technical customization with code 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 toolbar 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 general particularities for controls (fields & structure) 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 \[ { "label" "yes", "value" "yes" }, { "label" "no", "value" "no" } ] text input the text input field can be used for short and general text input number input the number input field permits input of numeric values, restricting non numeric characters date time input the date time input can be used to display or capture date/time information textarea 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 select input 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 checkbox the checkbox field allows users to choose only one item from a list of options radio button the radio allows users to select one option from a predefined set of choices button the button enables you to trigger actions or perform specific tasks with a simple click file upload 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 section 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 list the "list" component is a fundamental element within the form builder toolkit, empowering users to organize and display collections of items with efficiency and clarity this component excels in scenarios where users need to present lists of data, such as product catalogs, task lists, or contact directories effortlessly integrate the "list" component into your forms to streamline data presentation and enhance user experience with its intuitive interface and robust functionality, you can effortlessly create dynamic and interactive lists tailored to your specific requirements columns 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 stepper 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 divider 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 tabs 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 ​ https //docs appsmith com/reference/widgets/tabs#default tab string heading use the "heading" control to create structured and organized forms by adding headings or section titles now with html support, customize your headings with enhanced formatting options paragraph 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 with html support, you can enrich your forms utilize this control to provide instructions, descriptions, or any other textual information within your forms list, select input, radio button source types the url data source type enables fetching data from a remote server using a provided url endpoint this feature is particularly useful for retrieving dynamic data sets, such as product listings, user profiles, or real time statistics, directly into your application for testing purposes you can use the url https //procesio email hosting fra1 cdn digitaloceanspaces com/test json https //procesio email hosting fra1 cdn digitaloceanspaces com/test json to utilize the url data source type, follow these steps specify url endpoint provide the url endpoint that returns the desired json data ensure the endpoint is accessible and returns data in the expected format jarray format requirement the json data retrieved from the url endpoint must adhere to the jarray format each item in the array should include "label" and "value" properties, providing both display text and corresponding values, respectively here's an example of the expected json format \[ { "label" "item 1", "value" "value1" }, { "label" "item 2", "value" "value2" }, { "label" "item 3", "value" "value3" } ] save, preview, publish 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