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:

<template>
    <FormBuilder v-model="configuration"></FormBuilder>
</template>

<script>
    import {FormBuilder} from 'v-form-builder';
    
    export default {
        name: "MyAdminProMaxComponent",
        components: {FormBuilder},
        data: () => ({
            configuration: {}
        });
    }
</script>

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