This section explains how to create a form using the Office document (Excel/Word) type.
With the Office document type, you can automatically generate a web form simply by uploading your existing application format (including fields and their layout).
<Links within this article>
1. Introduction: What can be automatically generated by uploading Office documents?
2.Form Creation Flow (Office Document Type)
Step 1: Prepare Office documents (Excel / Word) in advance
Step 2: Upload Office documents and adjust the layout
Step 3: Configure input formats and controls in Styleflow
１．Introduction: What can be automatically generated by uploading Office documents?
In Styleflow, simply uploading your existing Excel or Word application formats automatically generates the layout of a web form.
In other words, the layout design can be completed entirely within Office documents, allowing you to quickly prepare the framework of an application form without building a web interface from scratch.
Form Components |
Automatically Generated |
Notes |
| Application Field Name | 〇 |
Automatically generated based on field names in Excel / Word |
| Layout of Application Fields | 〇 |
Automatically generated based on tables and borders in Excel / Word |
| Application Input Fields | 〇 |
Automatically generated based on IDs prepared in advance in Excel / Word |
| Input Format for Application Fields (e.g., formulas, checkboxes, date formats) |
Must be configured on the Styleflow interface | |
| Input Controls for Application Data (required fields and detailed rules) |
Must be configured on the Styleflow interface |
２．Form Creation Flow (Office Document Type)
▼Review the setup flow (overview) in the video
This video provides an overview to help you understand the configuration points and the overall process. It does not include detailed step-by-step instructions.
Step 1: Prepare Office documents (Excel / Word) in advance
Step 2: Upload Office documents and adjust the layout
・Create a new form
・Preview the user screen
・Edit (update) registered forms
Step 3: Configure input formats for fields in Styleflow
Step 1: Prepare Office documents (Excel / Word) in advance
1-① (Excel)
If you are using Excel, arrange the field labels and input fields by using features such as cell merging.
💡When the applicant’s input exceeds the predefined field size
If the number of characters entered exceeds the defined field size, the field width will be automatically adjusted by the system.
1-②
Enter any ID (alphanumeric characters) enclosed in ${ } in the input field.
※This ID will be automatically generated as a field ID in Styleflow and used for configuring each field.
💡Tips for Entering Field IDs
By using the specified IDs (reserved keywords) below, the data entered by applicants will be displayed in various fields on the Styleflow Task List and Application Data List screens.
<Where do reserved keywords appear? | User screen view>
They are displayed in each field of the Task List and Application Data List. If not configured, the fields will appear blank.
▼ Task List Screen | User Screen
▼ Reserved Keywords List (Available in Forms)
Reserved Keyword |
Reserved Keyword |
| ${f_management_id} | Management ID (An ID that uniquely identifies the application is automatically assigned. Not editable) |
| ${f_apply_date} | Application Date (Automatically generated date is entered) |
| ${f_apply_title} | Title (If “Use document name as title” is enabled, the document name is automatically entered) |
| ${f_apply_user_id} | Applicant (The applicant’s name is automatically entered) |
| ${f_apply_dept_code} | Applicant Department (The applicant’s department is automatically entered) |
| ${f_apply_tel1} | Contact 1 (The contact information set in employee data is automatically entered) |
| ${f_apply_tel2} | Contact 2 (The contact information set in employee data is automatically entered) |
| ${f_apply_notes} | Notes |
| ${f_document_name} | Document Name (Automatically entered. Not editable) |
| ${f_base1}～${f_base10} | Common Fields 1–10 Even if not configured, workflow features can still be used. |
※ ${f_apply_user_id} is required.
※ If users belong to multiple departments (concurrent roles), or if proxy applications are expected (when the applicant and proxy belong to different departments), this field is required.
※ Data fields (IDs) can be created up to a maximum of 140, excluding reserved keywords, common fields, and file fields (fields with file input format). Up to 10 file fields can be created.
Step 2: Upload Office Documents and Adjust the Layout
<Overview of Step 2>
2-2. Preview the user screen of the created form
2-1. Create a New Form
2-1-①. Click “Form” from the “Admin” menu to open the form creation screen.
2-1-②. Click the “Create New” button to open the “Form Information | Details” screen on the form creation page.
2-1-③. Enter the “Form Name”, select “Form Type (Office Document)”, upload the Office document prepared in Step ①, and click the “Register” button.
※ The items configured on the form creation screen are not displayed to users (applicants or approvers). Please use names that are easy to manage.
2-2. Preview the User Screen of the Registered Form
2-2-①. After clicking “Register”, you will be redirected to the “Form Information | List” screen. Open the form you created earlier.
2-2-②. On the “Form Information | Details” screen of the selected form, click the “Item Settings” button located at the top or bottom, then click the “Preview” button that appears.
▼ The preview screen of the form automatically generated from the uploaded Office document will be displayed.
2-3. Edit the Registered Form
After reviewing the form preview screen, if layout or content adjustments are needed, edit the uploaded Office document and upload it again.
When editing the Office document, if you do not change the IDs of the input fields entered in Step 1, the existing settings in Styleflow will be retained.
The behavior when IDs are changed is as follows:
- If an ID is deleted: The corresponding field information (field ID) already generated in Styleflow will be deleted.
-
If a new ID is entered: It will be automatically generated as a new field.
Step 3: Configure Input Formats for Fields in Styleflow
All application fields automatically generated by uploading the Office document in Step 2 will be set as “Text Input” fields by default.
By configuring settings such as “Dropdown,” “Formula,” “Calendar,” etc., according to each field, you can improve input efficiency and reduce input errors.
3-①. On the “Form Information | Details” screen of the selected form, click the “Item Settings” button located at the top or bottom.
3-②. Click the "Edit" button for the item whose input format you want to set.
3-③. Select the desired input format from the pull-down menu, then click "Update".
For items such as “Checkbox” or “Calculation” that require detailed settings (e.g., options or formulas), selecting the input format will display additional configuration fields at the bottom of the same screen.
3-④. You can also check the configured input format on the preview screen.
💡If the number of characters entered by the applicant exceeds the set field limit
If the number of characters entered by the applicant exceeds the configured field size, the width of the field will be automatically adjusted by the system.
<Related Videos>