Form page

Form pages are 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 engage with your application actively.

This article will guide you through creating and optimizing form pages in your app with Starion. Incorporating well-designed form pages into your app design can significantly boost user engagement and enhance user experience.

Accessing the form page

Like the detail pages, Starion 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, follow these steps:

• Click the "+" button on the right sidebar.

• Choose "Form page."

• Select a data table to link with your new form page.

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:

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.

5. Badge: Configure the page's badge number if it is on display, giving users a notification on quick updates.

Designing the Form Page

Adding an input field

Based on the columns and their data type in the table, Starion generated a list of input fields by default for your form page. However, they are all hidden, so you can start from scratch to design your page according to your preference.

A set of input fields is ready to add into your form page

To add a component, drag & drop it up or click it.

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:

pageData input field

Organizing input fields

In Starion, organizing the field is also simple. Just drag & drop it up or down in the list.

Organizing the order of input fields in a data-collecting form is important for a user-friendly experience. Placing fields in 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.

Removing an input field

You cannot get rid of an input field. But you can remove it from your form page by returning it to the Hidden Fields list in one of the following ways:

• Drag the input field back down to the "Hidden Fields" section, or

• Click the eye icon to bring it back to hidden.

A way to hide a field: click the eye

When creating a form page, it's essential to consider which fields are necessary, especially when building an external app for public users. Too many fields can overwhelm users and make completing the form difficult. A shorter, more focused form is more likely to be completed. Users are more likely to engage with a form that doesn't feel like a time-consuming task.

Data validation on input

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 you prefer. The validation is from basic ones such as "Required?" to the ones tailored for each data type.

Dive into the documentation for each supported input field type found in form pages to discover each validation type.

pageData input field