We will guide you through the steps to create a form using the standard method.
With the standard method, you will create a web form (application input screen) from scratch within Styleflow.
＜Links in this article＞
１．Introduction: Prepare in advance to ensure a smooth setup
２． Form (Standard Type): Creation process
１． Introduction: Prepare in advance to ensure a smooth setup
Before starting to create a standard-type form, organizing the content and structure of the application items in advance will help the setup process proceed smoothly.
Please prepare with the following two points in mind.
① Identify application items
First, list up the information required for the application and the items that need to be managed.
What information do you want applicants to enter?
What information will the administrative department or approvers review and use?
If integrating with other systems (e.g., Excel, accounting systems, master databases), what items are required?
By organizing items from these perspectives, it will also help with structuring integrations and naming items later.
⚠ Note: Distinguish between items and options
For example:
Within a single item called “Application Category,”
you would set options such as “New,” “Update,” and “Delete.”
As shown above, be careful not to confuse the “item itself” with the “options set within it” (e.g., radio buttons, dropdowns, etc.).
② Layout arrangement of application items (categorization)
In Styleflow, form items can be grouped by category.
Therefore, considering the visibility and usability of the application screen, let’s roughly define the item structure as follows:
Categories (e.g., Basic Information / Application Details / Attachments, etc.)
Display order within each category (From top left to bottom right)
If the structure is defined in advance, the setup during form creation will proceed more smoothly.
２． Form (Standard Type): Creation Process
▼ Check the setup flow (overview) via video
This video provides an overview to help you understand the setup points and the overall process.
Detailed step-by-step instructions are not included.
Step 1: Create application items
Step 2: Create application item categories (layout groups)
Step 3: Place application items into layout groups
Check as you configure: Preview the user screen
Step 1: Create application items
1-1. Register a new form
1-1-①. Click “Forms” from the “Admin” menu to open the form creation screen.
1-1-②. Click the “Create New” button to open the form creation screen: “Form Information | Details.”
1-1-③. Enter the “Form Name,” select “Form Type (Standard),” and then click the “Register” button.
※The items configured on the form creation screen are not displayed to users (applicants or approvers).
1-2. Create application items
1-2-①. After clicking “Register” in Step 1-1, you will be redirected to the “Form Information | List” screen. Open the form you created earlier.
1-2-②. On the “Form Information | Details” screen of the relevant form, click the “Item Settings” button located in the upper or lower section of the screen.
At this point, some items that are preconfigured by the system will already be displayed as created. For these items, you can choose whether to “Use” or “Not Use” them in Step 3.
In addition, “Management ID,” “Application Date,” “Subject,” and “Applicant (required)” are standard items that are automatically displayed on the user’s task list screen.
If you plan to include input fields with the same content in your application process, we recommend using these existing items rather than creating new ones.
▼ Task List Screen | User Screen
1-2-③. Click the “Create New” button and create the application items one by one.
1-2-④. Enter the “Display Label (Item Name)” and click the “Register” button.
At this time, the default input format is set to “Japanese full-width characters,” but you can select options such as “Checkbox” or “Calendar” depending on the item. By configuring settings appropriate to each input field, you can improve input efficiency and reduce input errors.
For options such as “Checkbox” or “Calculation,” where detailed settings like choices or formulas are required, selecting the input format will display additional detailed configuration fields at the bottom of the same screen.
Step 2: Create application item categories (layout groups)
In Styleflow, input items on a form can be grouped and displayed by category. These categories are managed as “layout groups” and are an important element in creating an application screen with high visibility for users.
<Steps to create a layout group>
2-①. On the “Form Information | Details” screen of the relevant form, click the “Layout Settings” button located in the upper or lower section of the screen.
At this point, the “Application Information” group, which is preconfigured by the system, will already be displayed as created.
If there are only a few application items, you can configure them within this “Application Information” group, so there is no need to create a new group.
On the other hand, if there are many input items or if you want to organize them by category, proceed to the next step [2-②] to add layout groups.
2-②. Click the “Create New” button and create layout groups one by one.
2-③. Enter the “Display Label (Item Name)” and click the “Register” button.
Step 3: Place application items into layout groups
Assign and organize the application items created in Step 1 into the “layout groups (categories)” created in Step 2. By doing so, each item will be displayed in the appropriate position on the user’s application screen.
※Please note that items that are not assigned will not be displayed on the user screen.
3-①. From the “Layout Settings | List” screen, click the “Layout ID” of the layout group created in Step 2.
3-②. Click the “Create New” button on the “Placement Items | List” screen and add the items you want to place in the selected layout group one by one.
Check as you configure: Preview the user screen
On the “Form Information | Details” screen of the relevant form, click the “Layout Settings” button at the bottom of the screen to display the “Layout Settings | List” screen.
By clicking the “Preview” button on this screen, you can check the application screen as it will actually appear to users.
▼The preview screen of the created form will be displayed.
＜Related Videos＞