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.

import { form } from "@/templates/views/form";

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.

contact(request, container, helper, builder) {

    const formItem = this.view(form, {
        action: "#contact",
        method: "post",
        ingress: {
            headline: "Contact us", 
            content: "Lorem ipsum dolor"
        }
    });

    formItem.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', [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.

contactPost(request, container, helper, builder) {
    const postData = request.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 Pages to a route as follows:

router.post('/contact', [Pages, "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 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.

{
    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"
}

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:

import { text } from "@/templates/views/text";

Utilize the Startox function getViewComponent to set the view at your specified position in the form

form.setFields({
    firstname: {
        type: "text",
        label: "First name",
        conAttr: {
            class: "grow"
        }
    },
    textComponent: this.getViewComponent({ myText: text }, {
        headline: "Lorem ipsum dolor",
        content: "Lorem ipsum dolor sit amet"
    })
});

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