DHTMLX Form Builder is an online tool intended for making the process of creating forms easier. It allows you not to write huge amounts of code for positioning and arranging elements in a form.
You just add columns and blocks and fill them up with desired controls. Then take the ready-made code and insert it into your application. As simple as that. Try and enjoy!
Form Builder consists of 4 main parts:
Start creating the layout of your future form in the Mockup tab of the Editor view.
To add a new block, a column or a separate control click the icon.
You can also import form configuration into Form Builder in JSON format.
Click the Import button and choose one of the two options:
To remove a column or a block, click the icon. To delete an unnecessary item, use the cross sign in the input container.
You can also add, delete or copy a column, a block or an item in the Tree view. Just call the context menu by right-clicking the needed form element and choose the corresponding menu item.
By default, all items are added into the mockup as inputs.
To set the desired type of the control, select it in the Mockup tab or the Tree view and choose the type you need in the Items Config view.
To tune the appearance and position of a form control in a proper way, define values of other control's properties in the Items Config view.
To see the current result and fix the elements position and arrangement, go to the Preview tab of the Editor.
To save the created form configuration, click the Export button. The resulting code of your form will appear in the popup window.
Click "Save to File" and form structure will be exported into a file as a JSON object.Back to top