A native JS form builder inspired by Google Forms.
To create a form builder just insert the x-div
element to the page as such:
<x-div data-controller="../dist/fl-form-builder"> </x-div>
The form-builder element will emmit an event called formBuilderLoaded
, which will contain an instance of the ModuleCoordinator
element used to control the form. You can retrieve this instance like this:
document.addEventListener('formBuilderLoaded', (e) => {
const formBuilder = e.detail.instance;
});
When the user clicks on the save button the formBuilderSave
event will be fired containing an object representing the current form state. This is the element that you will want to save in the database so that you can later reconstruct the form that was built.
document.addEventListener('formBuilderSave', (e) => {
const formState = e.detail.formState;
});
You can also retrieve the current form state at any moment by calling the exportState
method on your formBuilder
instance.
const formState = formBuilder.exportState();
If you want to get the form-builder back to the way it was when the user last used it, you can just import the state you saved with the importState
method. You could, for example, do that when the form loads.
document.addEventListener('formBuilderLoaded', (e) => {
const formBuilder = e.detail.instance;
formBuilder.importState(mySavedState);
});
Give a look at the documentation to see a bit more of importState
and exportState