WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Visual Form Builder

Build beautiful, fully functional contact forms in only a few minutes without writing PHP, CSS, or HTML.

How do I create a form?

  1. Click on the Visual Form Builder > Add New link and enter a few form details
  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 sort them.
  5. Click Save Form to save your changes.

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

reCAPTCHA is available with Visual Form Builder Pro.

Visual Form Builder uses a text CAPTCHA. If you decide to upgrade to Visual Form Builder Pro, you will gain Akismet support.

Emails are not being sent

Note: Form submissions will always be saved in the database whether or not the email was sent.

Check SPAM folder

A quick look in the SPAM folder will tell you if the emails are being routed into the folder. If so, simply train your email client to not treat those emails as SPAM

Configure your site to use SMTP

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.

Set the Reply-To email to a same domain email

Setting up SMTP will get you part of the way there. For most, it solves the problem. For others, it requires additional configuration

If you find that emails are not being sent, you should first confirm that you have completed all of the details in the Form Settings > Email section. Next, be sure to set the Reply-To option to an email that exists on the same domain as your WordPress site.

Set the Sender email to an email that exists on the domain

In addition to the Reply-To header, some hosts require that the Sender header is also set to an email that exists on the domain. By default, the Sender email is automatically set to either your admin email if the domain matches. If it does not match, then a local email address is created (wordpress@yoursitename.com).

To change this behavior to use an email that exists on the domain, you will need to set the Sender Mail Header option on the Visual Form Builder > Settings page.

Possible mod_security conflict

Some servers are overzealous in their restrictions on the $_POST object and will block anything with certain keywords. Check your server logs and look for any 403 Forbidden or 500 Internal Server errors. If you notice these errors when submitting a form, contact your host and find out if there are any restrictions.

Enable local mail for your domain

Be sure to enable local mail delivery for your domain. Disabling local mail delivery is common if you are using an external mail server, but can cause bounce-backs saying the email user does not exist.

Also, if possible, check your server’s email logs or have your host check them for you and see if it’s refusing to send an email. It’s possible your email server is attempting to send the emails but can’t for missing mail resources, security, SPAM filtering, or other technical problems.

Resolving Theme or Plugin Conflicts

Visual Form Builder is built using preferred WordPress coding standards. In many cases, some theme authors or plugin developers do not follow these standards and it causes conflicts with those that do follow the standards. The two most common issues have to do with either jQuery or CSS.

jQuery conflicts

Visual Form Builder requires at least jQuery version 1.7. Please make sure your theme is updated to use the latest version of jQuery.

CSS conflicts

If your forms do not look as expected, chances are there's some CSS in your theme conflicting with the built-in CSS of Visual Form Builder. Please follow the tutorial on how to customize the CSS.

Theme conflicts

If you have confirmed that you are using the latest version of jQuery and can rule out CSS conflicts, there's probably something in your theme still causing problems.

  1. Activate the default Twenty Eleven theme
  2. Test your site to see if the issue still occurs

Still having problems even with Twenty Eleven running? If not, it's a conflict with your theme. Otherwise, it's probably a plugin conflict.

Plugin conflicts

Before following this process, make sure you have updated all plugins to their latest version (yes, even Visual Form Builder).

  1. Deactivate ALL plugins
  2. Activate Visual Form Builder
  3. Test your site to see if the issue still occurs

If everything works with only Visual Form Builder activated, you have a plugin conflict. Re-activate the plugins one by one until you find the problematic plugin(s).

If, after following the above procedures, you are still having problems please report this issue on the Support Forum.

Customizing the form design

Please follow the tutorial on how to customize the CSS.

By upgrading to Visual Form Builder Pro, you be able to purchase the Form Designer add-on which will let you easily customize the design.

Customizing the Date Picker

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, please read these tutorials from the blog:

  1. How to customize the Date Picker
  2. Even more Date Picker customizations.

How do I translate the error messages 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 can either use the free add-on Custom Validation Messages or follow the manual JavaScript method.

The recommended method to translate the messages is by installing the free Custom Validation Messages add-on. This will let you easily change the messages for all forms from within the WordPress admin.

If you would rather use the manual method, you will need to follow the instructions below.

Follow these instructions:

In your theme folder, create a JavaScript file. In this example, I'm using myjs.js. Add the following code to it and customize the language to what you need:

jQuery(document).ready(function($) {
    $.extend($.validator.messages, {
        required: "Eingabe nötig",
        email: "Bitte eine gültige E-Mail-Adresse eingeben"
    });
});

Now, in your functions.php file, add the following piece of code:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
   wp_register_script( 'my-vfb-validation',
       get_template_directory_uri() . '/js/my-js.js',
       array( 'jquery', 'jquery-form-validation' ),
       '1.0',
       false );

   wp_enqueue_script( 'my-vfb-validation' );
}

Requires: 3.5 or higher
Compatible up to: 3.9.1
Last Updated: 2014-4-12
Downloads: 403,600

Ratings

4 stars
4.5 out of 5 stars

Support

3 of 42 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

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

0,1,0
100,1,1 100,1,1 0,1,0
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,6,6 100,9,9 60,10,6
100,1,1 100,1,1 100,1,1 100,7,7 100,6,6
100,2,2
83,6,5 100,13,13
100,10,10 0,1,0 80,5,4 100,3,3 100,1,1 100,1,1 100,1,1 100,1,1 0,1,0
90,10,9
100,3,3 100,1,1 83,6,5 100,4,4 88,17,15 100,2,2 100,1,1 100,3,3 100,2,2 100,1,1
100,2,2 100,2,2
100,2,2 100,9,9
100,2,2 100,3,3
0,1,0
86,7,6 100,3,3
75,4,3
100,5,5
100,1,1
100,1,1
100,2,2
100,3,3