Form Builder
You can of course create forms with regular HTML if you want, but for your information, 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 is a form template view that will help you get started, which you can change to suit your needs.
Setting Up the Form
Begin by opening the controller file src/controllers/PagesController.js
. Then, import the form view (src/templates/views/Form.js
) at the top of the document:
import Form from "@/templates/views/blocks/Form";
Note: The Form.js
view comes pre-installed, so you do not need to create it yourself.
Then add a contact
method to the PagesController
. We will first add the form view and then add form fields to it:
contact({ http, services, helper, context }) {
const { view, item } = this.layout(Form, {
action: "#contact",
method: "post",
ingress: {
headline: "Contact us",
content: "Lorem ipsum dolor"
}
});
item.setFields({
firstname: {
type: "text",
label: "First name",
conAttr: {
class: "grow"
}
},
lastname: {
type: "text",
label: "Last name",
conAttr: {
class: "grow"
}
},
message: {
type: "textarea",
label: "Message",
},
custom: {
label: "Contact information",
type: "group",
fields: {
email: {
type: "text",
label: "E-mail",
attr: {
type: "email"
}
},
phone: {
type: "text",
label: "Phone",
attr: {
type: "tel"
}
}
},
config: {
// Recommended configs
nestedNames: true,
controls: true
}
},
submit: {
type: "submit",
value: "Send"
}
});
return this;
}
This time, I encourage you to connect the contact
method in the controller to the router (router.get('/contact', [PagesController, "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 PagesController
.
contactPost({ http, services, helper, context }) {
const postData = http.request.post;
return `
<div class="wrapper md card-1">
<header class="mb">
<h2 class="headline-1">Post request</h2>
<p>Below is the received request data:</p>
</header>
<pre>${JSON.stringify(postData, null, 2)}</pre>
</div>
`;
}
This view will display the form fields once the form has been submitted.
Router
Next, connect contactPost
in PagesController
to a route as follows:
router.post('/contact', [PagesController, "contactPost"]);
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 created route, which hopefully looks like this: router.get('/contact', [PagesController, "contact"])
.
Visit your browser, and click the submit button on the contact page to see the results.
Available Form Fields
Available form fields out of the box:
text (password, tel, email, number, etc.)
textarea
date
datetime
hidden
select
radio
checkbox
submit (button)
group
views/components
These fields can be combined with all views and components that you have created!
Form Field Settings
Available form field settings/configs out of the box. See working examples below:
{
type: "text", // Default is "text"
label: "Message",
description: "Add a field description",
conAttr: { class: "w-full", ["data-status"]: "1" }, // Create container HTML attributes
attr: { type: "email", id: "inp-email" }, // Create or overwrite HTML attributes
config: { pass: "configs" }, // Pass/create configs to your component
items: { yes: "Yes", no: "No" }, // Add (checkbox, radio, or select list items)
fields: { ... }, // Group fields, see above example
value: "Field value"
}
Adding Template Blocks in Form
To pass template layout blocks to a form using Stratox, follow these steps:
Import the view at the top of the document/PageController:
import Ingress from "@/templates/views/blocks/Ingress";
Note: The Ingress component does not exists by default, it is just an example. You will need to use a view component that you have created!
Utilize the Stratox function
partial
to set the view at your specified position in the form:
const { view, item } = this.layout(Form, {
action: "#contact",
method: "post",
ingress: {
headline: "Contact us",
content: "Lorem ipsum dolor"
}
});
item.setFields({
textComponent: this.partial(Ingress, {
title: "Lorem ipsum dolor",
description: "Lorem ipsum dolor sit amet"
}).item,
firstname: {
type: "text",
label: "Headline",
}
});
Last updated