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, container, 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, container, 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:

1. 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!

1. 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",
  }
});