Mayd/Forms Assets

Frontend Helpers

Prerendered Form

First render your form via Twig:

{{- mayd_forms_render(frontendForm) -}}

Then you can just mount the FormController, it will automatically pick up all rendered forms:

import {FormController} from "@mayd/forms/frontend/js/FormController";

// the rendered form automatically has the correct class
mount("._mayd-form", FormController);

Loading the form programmatically

import {FormLoader} from "@mayd/forms/frontend/js/FormLoader";
import {FormController} from "@mayd/forms/frontend/js/FormController";


let container = find(".some-container");

// display loader
let message = createUnstyledElement("span", {
    text: "Loading...",
});
container.appendChild(message);

// load form
let formLoader = new FormLoader();

formLoader
    .loadForm(container, "/mayd/api/form/endpoint/123")
    .then(
        (controller) => 
        {
            // controller is the already initialized FormController
            // you don't need to do anything with it
            
            // hide loading message
            container.removeChild(message);
        },
        () => 
        {
            // request to fetch the form failed, display an error message
            message.textContent = "Loading the form failed. Reload the page and try again.";
        }
    );