Form Builder Starter
Let's find out what the heck is Form Builder and how can you use it?
Introduction
The name said it all, Form Builder is a part of the Vue Form Builder. It IS a Vue Component which will help you to create / configure your Form.
In the Back-end (in Administration Mode / CMS), it's like where you set the configuration. And after you got your Form Configuration, your Form can be rendered in the Front-end and your users start to use it.
Basic Implementation
Import the Form Builder
You can locally register the Form Builder like this:
For everybody who injects the Form Builder globally. You can simply use the component
<FormBuilder></FormBuilder>
without any concerns :D
Walking through the Form Builder
See the Form Builder for the first time
Start your project in development mode and check it out :D
Basically, you will see the Configuration View like this:
Then you can start to design your own form right away. By adding:
Section
Control in Section
Form Basic Configuration
Some very basic configuration for your form. By clicking the "Form Configurations" button, a right-sidebar will be displayed with these fields:
I think those field's title is clearly enough so I don't need a detail explanation :D
Section
By clicking the "Add Section" zone, it'll ask you to choose the Section type:
Choose one and a new section will be created instantly (picture below)
The buttons on the right side, it allows you to:
Push the current Section up
Push the current Section down
Configure the Section
Delete the Section
And for the Section Configuration, basically, it's the same as the Form Configuration but more fields:
As same as Form Configuration, you know what do put in there, don't you? :3
Control
Control can:
Only created inside a Section.
Drag & drop in the current section's body to re-position.
Drag & drop into another Section's body.
Vue Form Builder has different types of control. And basically, 90% of cases in the real-world application can use those controls.
To create a new Control, simply click the "Add Control" zone inside Section's body.
You will see Vue Form Builder has a long list of Controls made only just for you.
Each of the controls had a different configuration. But these 3 are the same:
Basic Detail
Styling/Classes
Validation
And if the control has a specific configuration. It'll show up below the Styling/Classes as "Control Specific Configuration"
All of the controls always re-update every time you pressed "Save" / "Save / Close" button. And as the main title of the Vue Form Builder said: "What you BUILD is what you GOT / WYBIWYG"
To make sure the Form get the right data for each field in the Form Renderer, you should define the "name" of the field uniquely.
If the control doesn't have a name, Vue Form Builder will use the UniqueID of the Control instead to store the field value (on Form Renderer)
Re-position the Control(s) inside a Section
Move a Control to another Section
Last updated