Introduction
Instead of using the default “+” button to prompt the form in a dialogue window, we want to redirect users to a new page where the form will take the full screen.
.png "image(95).png")
.png "image(96).png")
Step-by-step instructions
1. Setting Up a New Custom Page for the Form
Under the Pages section in the left-hand side panel, click on Add custom page to create a new page. It will later host the Account creation form.
.png "image(97).png")
2. Configuring the URL and Layout of the Page
Configure the page from the dialog box :
• For Layout, choose Main
• Define the URL of the new page by filling in the Route field with a relevant address, such as /new-account.
• You can also add a title for this new page in the Title field (optional).
• Finally, click on Create to create the page.
3. Redirecting Button Behavior to the Full-Screen Form
a) First select the button, then delete its Behavior
.png "image(98).png")
b) Click Add a Behavior (Ajouter un comportement) et sélectionne Navigate to another page (Naviguer vers une autre page).
c) In the To field, select the previously created page, here /new-account.
.png "image(99).png")
c) To test the button's functionality, click on the button with the “+” icon in Live mode.
.png "image(100).png")
Once you've clicked on the button, you'll be redirected to the new page, here entitled new-account. At this stage, the page is still empty, displaying only the message Page content, as no content (such as the form) has yet been added.
This confirms that the redirection is working and that the page is ready to receive the full-screen form.
4. Adding the form to the new page
a. To add the form to the page, drag and drop the “Create” command onto the new blank page.
.png "image(101).png")
b. And select the “Command form” option.
.png "image(102).png")
c. All fields associated with the command are automatically included in the form, in full-screen mode.
.png "image(103).png")
5. Adding and Styling the Full-Screen Form
Let's modify the form's styling parameters to achieve a cleaner look:
Adjust the margins and padding to make the form more centered and spaced out in the right-hand side panel.
Set the left and right margins to auto so that the form is centered horizontally on the page.
Set the form's width to 680px to occupy the optimum width without being too narrow or too wide.
Add uniform spacing around the form, with 10px values for padding and internal element spacing.
.png "image(104).png")
6. Adding Titles and Styling for Sections
a. Add a title to your page by selecting the text component that displays “Page Content” above the form. In the right-hand side panel, replace the value with a more appropriate title, such as New Account. The title should describe the form to the user.
.png "image(105).png")
b. After modifying the title, apply styles to improve readability: choose a larger font size (e.g. huge), bold the text to give the title more weight, and center the title.
.png "image(106).png")
c. To structure the interface visually, let's separate the fields in the form into sections. To group fields, select several form fields simultaneously (for example, Name, Phone number, etc.), then right-click and choose the “Vertical box” option:
.png "image(107).png")
d. After grouping the fields in a box, the standard spacing gets lost. To correct this, apply “Item Spacing” to the box, then set a Padding of 16px. In the “Background” section, select a background color for the box. Here, the chosen color is themeComplementaryDark. Add a “small” border-radius and adjust the thickness and color of the border if necessary. Then repeat this step for the other sections. This helps to visually organize the form and provide a more legible structure for users.
.png "image(108).png")
e. Add the title “Identification” for the first section. You have the option of simply duplicating the main title and adapting its style to that of a section title. Then repeat this step for the other sections
.png "image(109).png")
7. Configuring the Submit Button to Redirect After Submission
a. At the bottom of the form, the Submit button is used to send the information entered. We'll now configure it to automatically redirect the user to the list of new accounts after submission. To do this, start by copying the URL of the list page.
b. Then, once back on the new form page, select the box with the “command form” behavior, which calls the “create” command. In the “on success” section, add a JS navigation expression:
()=> navigate( ' /list/account').png "image(110).png")
c. Once the configuration is complete, test the entire workflow. Fill in the form and Submit it to see if the user will be automatically redirected to the new employee list.
.png "image(111).png")
Additional Tips / Notes
The characteristics of the fields themselves are not defined from the page; fields will only be required if configured as such in the command.
Conclusion
Creating a full-screen form enhances user engagement by providing a clean, distraction-free interface. By setting up custom layouts, adjusting styles, and properly redirecting after form submission, you ensure a smooth and user-friendly experience for form handling.