Form builder
Form generation and processing module that helps you create and style unlimited HTML contact forms and various other forms with simple drag & drop.
Description
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.
For general install and uninstall instructions, please refer to Manage plug-ins section of user guide
Access
The path to the Form builder plug-in:
Choose Plug-ins from the secondary administrative menu located at the top right side in your web browser right above the main administrative menu.
Choose Form builder from the list of all installed plug-ins (on the left side of the screen).
User level
This plug-in can be accessed only by users belonging to groups that are allowed to manage Form builder plug-in.
Actions
Forms tab
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.
Toolbox tab
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.
File upload 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.
Form properties tab
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
Form page will work only if mod_rewrite is installed on your server - 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.
Use generated code in templates
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.
Get additional help on template files and explanation of template system in the Developer manual.
