Plugin Directory

Visual Form Builder

Dynamically build forms using a simple interface. Forms include jQuery validation, a basic logic-based verification system, and entry tracking.

Download Version 2.0

How do I build my form?

  1. Click on the + tab, give your form a name and click Create Form.
  2. Click the form fields from the box on the left to add it to your form.
  3. Edit the information for each form field by clicking on the down arrow.
  4. Drag and drop the elements to put them in order.
  5. Click Save Form to save your changes.

What's the deal with the fieldsets?

Fieldsets, a way to group form fields, are an essential piece of this plugin's HTML. As such, at least one fieldset is required and must be first in the order. Subsequent fieldsets may be placed wherever you would like to start your next grouping of fields.

Can I use my own verification system such as a CAPTCHA?

At this time, there is no alternative to the built-in anti-spam system.

I'm not getting any emails! What's wrong?

Some people have reported that after the form is submitted, no email is received. If this is the case for you, it typically means that your server or web host has not properly configured their SMTP settings.

Try using a plugin such as WP Mail SMTP to correct the issue.

How do I customize the CSS?

If you want to customize the appearance of the forms using your own CSS, here's how to do it:

  1. Add this code to your theme's functions.php file: add_filter( 'visual-form-builder-css', '__return_false' );
  2. Copy everything from css/visual-form-builder.css into your theme's style.css
  3. Change the CSS properties in your theme's style.css as needed

If you want to customize the jQuery date picker CSS, follow these steps:

  1. Add this code to your theme's functions.php file: add_filter( 'vfb-date-picker-css', '__return_false' );
  2. Refer to the jQuery UI Date Picker documentation on theming

How do I change the Date Picker configuration?

The jQuery UI Date Picker is a complex and highly configurable plugin. By default, Visual Form Builder's date field will use the default options and configuration.

To use the more complex features of the Date Picker plugin, you will need to:

  1. Add a text field using Visual Form Builder
  2. Save the form and use the shortcode to add it to a page
  3. Use your browser to view the HTML source code
  4. Find the text field you want to use and copy the ID (ex: start-date)
  5. Using the above example ID, paste the following into your javascript file: $( '#start-date' ).datepicker();
  6. Add and customize the jQuery UI Date Picker configuration options

How do I translate the field validation text to my language?

The validation messages (ex: 'This field is required' or 'Please enter a valid email address') are generated by the jQuery Form Validation plugin.

By default, these messages are in English. To translate them, you must create a JavaScript file that contains your translations and insert it into your theme.

For instructions, please go here.

How do I export my entries to a CSV?

There are two ways to export your entries to a CSV: Export All or Export Selected.

To Export All:

  1. Go to the Entries screen
  2. Select the Export All option under the Bulk Actions dropdown
  3. Click Apply and save the file

To Export Selected:

  1. Go to the Entries screen
  2. Check boxes next to the entries you wish to export
  3. Select the Export Selected option under the Bulk Actions dropdown
  4. Click Apply and save the file

Requires: 3.1 or higher
Compatible up to: 3.3.1
Last Updated: 2012-2-10 Downloads: 35,058

Average Rating

5 stars
4 stars
3 stars
2 stars
1 star
(36 ratings)

Compatibility

+
=
Not enough data

4 people say it works.
0 people say it's broken.

Log in to vote.

0,1,0
100,1,1 100,1,1
100,1,1
100,1,1 100,3,3 100,1,1 100,1,1
100,2,2 100,2,2 100,3,3 100,1,1 75,4,3 100,5,5 88,8,7 90,10,9
100,6,6 100,1,1 100,1,1
67,6,4 90,10,9 100,4,4