Comment on page
Form page
Form pages are essentially the digital forms within your app where users can submit valuable information. From feedback and inquiries, such as orders and reservations, Form pages facilitate seamless data interaction, allowing users to actively engage with your application.
In this article, we'll guide you through the process of creating and optimizing Form pages in Starion. Incorporating well-designed Form pages into your app design can significantly boost user engagement and enhance the overall user experience.
Like the detail pages, Starion also automatically generates a Form page for each of your data tables, simplifying development and saving you time. You can access this feature in the "CMS Pages" category on the left sidebar of the App Editor. The form page is named with the format " Name of the table it linked + Form" so you can know exactly which CMS detail page you are about to work with.
In case you want to add more form pages linked with the same data table for different kinds of collecting data through your app, Starion allows you to add a custom Form page. Follow these steps:
- Click the "+" button on the right sidebar.
- Choose "Form page"
- Select a data table to link with your new form page
.jpg?alt=media&token=52d676db-5683-4501-a200-8d225f5d2a5e)
Fine-tuning your collection page's specifications ensures it aligns perfectly with your app's goals and branding. Here are the key settings to configure:
.jpg?alt=media&token=84c37d11-c136-4686-80c6-618be4a91309)
- 1.Assign a meaningful name for easy management in the App Editor.
- 2.Title and Icon: Define the title and icon of the page in case it appears on the in-app menu bar, ensuring quick navigation.
- 3.Submit a New Item To: Modify the data table where submissions via the Form page will be saved for later retrieval.
- 4.Hidden: Specify whether you want the page to appear on the bottom menu bar or not.
- 5.Badge: Configure the page's badge number in case it is on display, providing users with a kind of notification on quick updates.
Based on the columns and their data type in your data table, Starion generated a list of input fields by default for your form page. However, they are all hidden so you still can start from scratch to design your page with your preference.
To add a component to your page, you can drag & drop it up or just simply click on it.
A set of input fields is ready to add into your form page
Click on a component and go to the right sidebar of the App Editor to configure the settings further for the appearance and input validation of the input field.
For the effective data collecting of your form page, we develop and proudly offer you a rich collection of input field types. They can cover all types of data-collecting requirements. Examples include choosing a date & time, uploading files & media, and locating a location. Settings for each are different so let's explore all available types and guide to working on them for best practices here:
Organizing the order of input fields in a data-collecting form is important for a user-friendly experience. Placing fields in a logical order helps users navigate the form smoothly. They should progress naturally from one field to the next, mirroring the sequence of their thought process.
In Starion, organizing the field is, also, simple. Just drag & drop it up or down in the list.
You cannot totally get rid of an input field. But you can remove it from your form page by putting it back in the Hidden Fields list. You can:
- Drag the input field back down to the "Hidden Fields" section, or
- Click the eye icon to bring it back to hidden.
.jpg?alt=media&token=0feea42b-ace0-4929-9f27-80bd4642db35)
A way to hide a field: click the eye
Considering which fields are truly essential is highly recommended when you build a form page, especially when you build an external app to communicate with public users. Too many fields can overwhelm users, making it harder for them to process information and complete the form accurately. A shorter, more focused form is more likely to be completed. Users are more inclined to engage with a form that doesn't feel like a time-consuming task.
Input validation ensures that data entered by users adheres to predefined rules and conditions, thereby maintaining data quality, preventing erroneous submissions, and safeguarding your app's integrity.
We empower the input fields of the form page with different types of data validation, ensuring you have complete tools to collect the data as your preference. The validation is from basic ones such as "Required?" to the ones tailored for each type of data.
For example, the barcode scanner input field has an input validation setting where you can set what exact type of barcode you want to collect: QR code, CODE 128, or EAN-13.
.jpg?alt=media&token=6d40e9c8-86e8-4dc3-8bd6-bf7732fe35fa)
Last modified 1mo ago