Form Builder

Automatic form builder will help you to create different forms without having to write a single line of code. There are all necessary controls you need for creating any type of form. From the list of all available controls, you may choose those you want your form to contain and by dragging and dropping them you will easily add or reorder them. For any control you will get additional labels to fill or set.

You may add as many forms as you need for your Vivvo website. You may also change options for previously created forms anytime from the administration area.

After the form is successfully created and saved, you will get automatically generated code which has to be placed on desired place in some template file in case you want it to be a part of any page, or it can also be used independently, as a single page.

You need to access the Plug-ins section. Click on the Plug-ins link which is located in the second level Menu on the right side at the top of your administration panel.

A list of all plug-ins currently registered to the system is displayed on the right hand side of the screen on Downloaded plug-ins tab.

To install Form builder plug-in you need to click on the install icon on the right side of the plug-ins name.

This will take you to the page with the installation link: Click here to Install the plug-in

After you run the installation, you will be informed that the plug-in was successfully installed.

You may easily go back to the Plug-ins page, by following the link: Click here to go to Plug-in

To uninstall Form builder plug-in you need to click on the uninstall icon on the right side of the plug-in name.

This will take you to the page with the link for uninstall: Click here to uninstall the plug-in

You will be informed that the plug-in was successfully uninstalled and you may return to the Plug-ins page by clicking the link: Click here to return to Plug-in home page.

The path to the Form builder plug-in:

Click on the Plug-ins link (which is located in the second level Menu on the right side at the top of your administration panel).

Choose Form builder from the list of all installed plug-ins (on the left side of the screen).

This plug-in can be accessed only by users belonging to groups that are allowed to manage Form builder plug-in.

This is the starting tab with list of all previously created forms (you may choose to access and edit them) and Add new form link for creating and adding new forms.

Add new form link loads the page for creating form. On the left-hand side, in the Toolbox tab, there is a list of all control types, the central area is reserved for adding, editing and previewing controls and in the column right to it you set parameters for your controls.

From the Toolbox tab choose elements for the form that you are creating and add them (drag and drop) to the area for editing form. If you decide later to reorder elements just drag and drop them to change their position.

To add or edit options for any element, you can click on its name on the editing form area and you will get a list of options available for this element on the right-hand side.

PlainText Control

• Text → add some custom text, about the form for example

Click on the Apply button to save applied settings for this control.

Heading Control

• Label → add 'title' for your form.

Click on the Apply button to save applied settings for this control.

Button Control

• Name → enter the name for this control

• Label → enter the label for this control

Click on the Apply button to save applied settings for this control.

TextBox Control

• Name → enter the name for this control

• Label → enter the label for this control

• Required → select if this field is required (visitor needs to fill it). The red star will display next to label.

• Size → initial width of the control defined in number of characters

• Max size → specifies the maximum number of characters the user may enter

• Validation → from validation drop down menu you may choose the specific set of characters allowed to be entered in this field

• Description → enter some further explanation for this field to your visitors. It will show as a tooltip.

• Error message → enter the message that will be displayed in case visitor hasn't filled the field properly

Click on the Apply button to save applied settings for this control.

Textarea Control

• Name → enter the name for this control

• Label → enter the label for this control

• Required → select if this field is required (visitor needs to fill it). The red star will display next to label.

• Rows → specify the number of the rows that will show up on the screen (if content exceeds the specified number of rows, the scrolling mechanism should show up)

• Validation → from validation drop down menu you may choose the specific set of characters allowed to be entered in this field

• Description → enter some further explanation for this field to your visitors. It will show as a tooltip.

• Error message → enter the message that will be displayed in case visitor hasn't filled the field properly

Click on the Apply button to save applied settings for this control.

Dropdown Control

• Name → enter the name for this control

• Label → enter the label for this control

• Required → select if this field is required (visitor needs to fill it). The red star will display next to label.

• Size → initial width of the control defined in number of characters

• Description → enter some further explanation for this field to your visitors. It will show as a tooltip.

• Options → add the list of available options to choose from (only one can be selected)

• Error message → enter the message that will be displayed in case visitor hasn't filled the field properly

Click on the Apply button to save applied settings for this control.

Checkbox Control

• Name → enter the name for this control

• Label → enter the label for this control

• Required → select if this field is required (visitor needs to fill it). The red star will display next to label.

• Description → enter some further explanation for this field to your visitors. It will show as a tooltip.

• Options → add the list of available options to choose from (only one can be selected)

• Error message → enter the message that will be displayed in case visitor hasn't filled the field properly

Click on the Apply button to save applied settings for this control.

RadioButton Control

• Name → enter the name for this control

• Label → enter the label for this control

• Required → select if this field is required (visitor needs to fill it). The red star will display next to label.

• Description → enter some further explanation for this field to your visitors. It will show as a tooltip.

• Options → add the list of available options to choose from (only one can be selected)

• Error message → enter the message that will be displayed in case visitor hasn't filled the field properly

Click on the Apply button to save applied settings for this control.

FileUpload Control

• Name → enter the name for this control

• Label → enter the label for this control

• Required → select if this field is required (visitor needs to fill it). The red star will display next to label.

• Description → enter some further explanation for this field to your visitors. It will show as a tooltip.

• Error message → enter the message that will be displayed in case visitor hasn't filled the field properly

Click on the Apply button to save applied settings for this control.

When you are satisfied with created form you should set some properties for this form in Form properties tab.

• Title → enter the title of the form

• Form page (no extension!) → form may also be accessed by entering (for example): http://www.yoursite.com/contact

• Email → specify the email address to receive the form after it is successfully submitted

* Form Status → set the status to 'Active' or 'Pending'

• Thank You Message → the message that will be displayed on the site after the form is successfully submitted

• Thank You URL → you may create static page and enter its URL, so the user will be redirected to it after the form is successfully submitted

After you are done, click on the Save button and your form will be saved and ready to use.

After Form builder has generated code for a form, you need to paste it in your template file to have form showing on your website. You may insert infinite number of forms in different pages and areas of your pages.

You can learn how to change template files referring to our User manual.

Get additional help on template files and explanation of template system in the Developer manual.