NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

New Webix Developer Tool – Form Builder

It is believed that one of the most boring tasks in web-development is a form creating. Nowadays nearly any web app contains at least one form inside. The process of creating them over and over again isn’t much fun. That’s why we have created Form Builder.

This tool is intended to speed up the process of form creating. You just need to define the necessary fields as well as the desired form layout and then customize the auto generated form through the visual editor.

Webix Form Builder Tool

Let’s check out the way it works in details. There is a text area in the top right corner of the tool where you can type the list of the desired form fields (you can separate these fields by commas or write each new field in a new line).

Below you can see the group of controls that define the form layout. When you press the “Generate” button you will see the form preview.

If you need to customize some form details, you should click on one of the inputs and edit its properties in the property sheet. With the help of property sheet you can change a type of input, its size, a default value, a placeholder, a label and some other properties.

form builder property sheet

To get the final code you need to click on the “Generated code” tab. This code has JSON Webix UI configuration and can be used along with webix.ui command to construct the same UI as you see in the preview tab.

generated in form builder code

If you are lost – just click on the “Question”icon and start to study the small in-app tutorial. Such in-built hints are possible thanks to using enjoy hint library.

enjoy hint in webix form builder

We hope that this new tool will simplify your web development process relieving you from routine coding.