How to create an object from the UI form with the FormBuilder

This is an empty form

Press the Design button to start design your form. You can drag layout elements on the form and set their data attributes via popup menu. After you press the View button you will get a ready-to use form with the layout and live object to edit.

Source code

You can create an empty form on the DOM element and the result JSON data in the update callback function passed to the Form.show() method:

var model = FormBuilder.Form.show(null, null, document.getElementById("form-builder-container"),
    function(object, json) {
        document.getElementById("form-builder-model-container").value = json;
    },
    function(layout) {
        document.getElementById("form-builder-layout-container").value = JSON.stringify(layout, null, 4);
    }
);

Created object content

Here you can see the content object:

Designed form layout JSON

Here you can see the current form layout JSON: