Forms
Stratox comes with a highly dynamic form builder that helps you create dynamic, responsive, and engaging web forms with ease. Out of the box there will be a form template view that will help you get started, you can change that view to your needs.
Begin by opening the controller file src/controllers/Pages.js
. Then, import the form view (src/templates/views/form.js
) at the top of the document.
Note: that the form.js
view comes pre-installed, so you do not need to create it yourself.
And then add contact
method to the Pages controller. We will first add the form view then add form field to it.
This time, I encourage you to connect the contact method in the controller to the router (router.get('/contact', [Pages, "contact"]);
) and add it to the navigation yourself. Once you're done, visit your browser to see the results.
Adding the Submit Page
Next, let's add the form submit page to the controller and router.
Controller
First, create a new method called contactPost
inside the Pages controller.
This view will display the form fields once the form has been submitted.
Router
Next, connect contactPost
in Pages to a route as follows:
Note: We're using "post" instead of "get" because the form uses post, and the router needs to handle post requests to catch it. If you have different methods, you can add duplicate URI paths without any risk of collision.
You can add this just below your own created route, which hopefully looks like this: router.get('/contact', [Pages, "contact"]);
.
Visit your browser, and click the submit button on the contect page to see the results.
Available form fields
Available form fields out of the box:
text (password, tel, email, number... and so on)
textarea
date
datetime
hidden
select
radio
checkbox
submit (button)
group
views/componets
And can be combined with all views and components the you have created!
Form field settings
Available form fields settings/configs out of the box. Se working examples bellow.
Views in form
To pass a template view as a form field using Startox, follow these steps:
Import the view at the top of the document:
Utilize the Startox function getViewComponent
to set the view at your specified position in the form
In this example:
The object key "textComponent" can be any identifier you choose.
Inside
getViewComponent
, the key "myText" is used to refer to the imported view "text", it can be any identifier you choose. Ensure that "text" represents the view and is correctly imported into the function
Last updated