Understand how to create user-friendly forms and capture valid data
Forms are the basic component of any app to capture data from the user. Using our no-code platform, you can easily build your custom forms, add all necessary controls, apply validations and rules, and submit the data to a sheet. You can simply drag and drop controls on the form and build workflows to handle business logic. Moreover, the forms have a responsive design enabling your user to run them on any screen size.
Let us first have a look at this video to understand how we can build a basic form.
Thus to create the form simply follow these three steps, and you are ready to go.
- Adding controls
- Adding a workflow or actionflow.
- If you are adding a workflow then Linking a workflow to the Submit action button
To understand how to create a Form, let us build a Product details form for an Inventory management system. We are assuming that the Sheet for the new form is ready and named as ProductData. It contains the following columns: Product name, Product Description, Quantity, and Image.
Let us now start with adding the controls to capture the product information. From the Menu bar on the left-hand side of your screen, select Controls to get a list of all controls - Basic, Button, Featured, Native, Container, and so on. You can drag and drop the controls on your screen. Optionally you can search for the control in the Controls bar .
Now add a Text control for the Product name , TextArea control for a Detailed description , Numeric control for the Quantity, and the File Upload control for the Product image . The data is to be submitted to your ProductData Sheet . Hence you need to add a Submit button control and your form design is ready.
Now to be able to submit the data to your sheet, you need to add a workflow to this form. Select Workflow from the menu and click + (add) icon under the current Screen to add the workflow. It is important that the workflow is created under the screen where it is to be applied. Open the workflow to configure the tasks of the workflow for submitting information.
As we want to insert data to the sheet, select the Update Sheet task from the tasks list, and click Continue . Add Task name as AddProductInfo and click Next.
Now select the sheet to which the information is to be updated. From the Where to update > dropdown list, select ProductData sheet. As we are adding records, set the ‘ What to do’ for the action to be performed on the sheet as ‘ Insert Record’ .
You will also need to link the specific control from your form to the columns of your sheet . Under Insert Data , type the control name, that is available as suggestions representing the Uniquename for the control. The Uniquename is a unique identifier for the control and is auto-generated, based on the label name of the control when we added the controls.
Optionally you can select it from the Tasks option in the F option. To add a control, Click F and select Tasks > Initiated > Control’s Uniquename.
Once all the columns are bound to the respective controls, click Done and your workflow is ready.
Linking workflow to the Submit action
The last thing that remains now is to link the Workflow to the Submit Button . In the properties of the Submit button, click Select Workflow . Select the AddProductInfo workflow that we created in the previous step. Now you can set the properties as required. To have a confirmation popup before submitting data, set the Confirmation popup - ON and set a pop-up message.
As you scroll down note that you have some additional properties as well.
Success Callback: On successful submission of data we can initiate actions from Message Type like a simple confirmation popping up or enabling navigation to an external or internal page.
- To navigate to an external page URL, select the Custom Page URL, and provide the URL link to navigate.
- To initiate a popup, select Popup message and add the Title and Message confirming success.
- To navigate to an internal page, select the Internal page. You further need to Select page, set the Page Animation, and the Navigation Delay.
Style: You can set the style of the submit button like the font size, weight, background color, and so on.
Advance: There are some advanced options to validate a page and reset the page when you are navigating from one page to another. Use Validate pages to define the pages to be validated before submitting this form. Use the Reset page to reset the selected pages after submitting the form.
Now click Preview. You can add data using the form and click Submit. If you have set the submit data confirmation, a popup message appears on the click of Submit button. After submitting data confirmation, you can also set a message pop-up for successful submission to the sheet.
After you submit the record successfully, you can view the data on the sheet.
Once you have finalized the overall form and are satisfied with its look and feel, you can Publish it so that it is accessible for organizational or public access as per your need. So you see how easy and quick it is to create your forms and workflows to build your applications easily using our no-code platform.