Visual Form Builder Pro: Customizing the form design

One of the most common questions I’m asked about on the Support Forums is how to customize the look of the forms built with Visual Form Builder Pro.  It could be that the theme installed causes conflicts with the CSS and inserts something weird that VFB is not expecting.  Or, you could just be looking to change the background color of the fieldsets.

This tutorial is going to explain how to load your own stylesheet to change some of the standard form design.

Create a CSS file and add to your theme via functions.php

Go into your theme’s folder and create a new file called vfb-custom-css.css in a folder called css.  Create that folder if it doesn’t exist.

Now, go to your theme’s functions.php file and add the following code:

function vfb_add_styles() {
    wp_register_style( 'vfb-custom-css', 
        get_template_directory_uri() . '/css/vfb-custom-css.css',
        array( 'visual-form-builder-css' ),
        false,
        'all'
    );

    wp_enqueue_style( 'vfb-custom-css' );
}

add_action( 'wp_enqueue_scripts', 'vfb_add_styles' );

You are now ready to configure your CSS file.

Working from the main Visual Form Builder CSS file

All styles that we are going to override can be found in visual-form-builder-pro/css/visual-form-builder.css.  If you don’t understand or can’t find the specific CSS class you are looking for, I suggest using a browser inspector tool like Firebug and inspecting the form’s source.

Getting a class name using Firebug

Remember: all of the CSS that follows will be placed in the vfb-custom-css.css file we created.

Customize the form’s font

form.visual-form-builder {
    font-family: monospace;
}

Customize the fieldset background color

.visual-form-builder fieldset {
     background-color: #222222;
 }

Customize the error message color and font size

.visual-form-builder li div label,
.visual-form-builder li span label {
    font-size: 14px;
}
label.error {
	color: black;
}

Customize the submit button

.submit {
    padding-bottom: 4px 12px;
    border: 1px solid #A2A2A2;
    border-radius: 4px;
    background-color: #5BB75B;
    background-image: linear-gradient(to bottom, #62C462, #51A351);
    background-repeat: repeat-x;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    font-size: 14px;
}
.submit:hover {
    background-color: #51A351;
    color: #FFFFFF;
    cursor: pointer;
}

Customize the next page link

.vfb-page-next {
    background-color: #0088CC;
    padding: 8px 12px;
}
.vfb-page-next:hover {
    background-color: #0081C2;
}

These are just a few examples of the kinds of things that you can do to customize the form design. With many things CSS-related, the design possibilities are only limited by your creativity, skill and imagination.

The best part about using your own CSS file is that it’s like using a child theme.  You can place overrides or new styles in this file and it does not affect the main CSS file.

If you have any questions about this, leave a comment.

Migrating from the free to Pro version of Visual Form Builder

In many cases, those who purchase Visual Form Builder Pro are already users of the free version of the plugin.  One of the great features of Pro is that there is a migration process built into it.  This is not entirely obvious and only appears after you have installed and activated the Pro version.

What to expect

All forms, settings, and entries will be migrated over to the Pro version.

How to migrate

Migration happens after you’ve activated the Pro version.  You will see a banner in the admin explaining a little bit about the process and includes a link to upgrade.  If you’d rather skip this process and start from scratch, you can also click on the link to Dismiss the message (note: clicking this link will opt you out of the migration process and will not reappear).

What happens after migration

If you clicked the Upgrade link, all forms, settings, and entries will be ported over to the Pro version.  Also, the free version will be automatically deactivated.

You are free to start using the Pro version at this point.  There is no need to change the shortcodes in your Posts/Pages as those will continue to work with the Pro version.

Any pitfalls?

If you decide to try out the Pro version before clicking the Upgrade link, know that should you choose to perform the upgrade, it will wipe out any work you’ve done in the Pro up to that point.

Also, if you leave the free and Pro versions active at the same time, it will cause conflicts with the shortcodes, so be sure to only have Pro active.  In fact, if you are comfortable with Visual Form Builder Pro, you can uninstall the free version completely.

Remember, the migration only happens if you have been using the free version and decided to upgrade to the Pro version.

Even more Date Picker customizations

In the first post on customizing the jQuery UI Date Picker, I only discussed a few of the many, many options available.

Before we begin to go through some more of these options, please read the first post on How to customize the Date Picker to learn how to get the field ID and to create/add a new JS file to your theme.

Done?  Okay, let’s get started.

Display Month or Year dropdown menus

Add a month or year dropdown to make jumping backward or forward large periods much quicker.

jQuery(document).ready(function($) {
    $( '#vfb-date-318' ).datepicker({
        changeMonth: true,
        changeYear: true
    });
});

Displaying a month and a year dropdown menu

Translate to your language

To download the default translations in your language, you will need to go to the jQuery UI page and download the entire package. Once you unzip the file, go to the ui > i18n folder. Here, I’m localizing into German.

jQuery(document).ready(function($) {
    $.datepicker.regional['de'] = {
	closeText: 'schließen',
	prevText: '<zurück',
	nextText: 'Vor>',
	currentText: 'heute',
	monthNames: ['Januar','Februar','März','April','Mai','Juni',
	'Juli','August','September','Oktober','November','Dezember'],
	monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
	'Jul','Aug','Sep','Okt','Nov','Dez'],
	dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
	dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
	dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
	weekHeader: 'KW',
	dateFormat: 'dd.mm.yy',
	firstDay: 1,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: ''};

	$.datepicker.setDefaults($.datepicker.regional['de']);
});

Date picker text translated into German

Show Week Number

Adds a week number column.

jQuery(document).ready(function($) {
    $( '#vfb-date-318' ).datepicker({
        showWeek: true
    });
});

A week column is added to the date picker display

Default Date

Set the date to highlight when the date picker first appears.

jQuery(document).ready(function($) {
    $( '#vfb-date-318' ).datepicker({
        defaultDate: '+6w'
    });
});

Other sample date ranges to use here

  • 7 days in the future: +7
  • 6 months in the past: '-6m'
  • 1 month and 7 days in the future: '+1m +7d'

The default highlighted date is set for 6 weeks into the future

Change Animation

Change the type of animation performed when the date picker is opened or closed.

jQuery(document).ready(function($) {
    $( '#vfb-date-318' ).datepicker({
        showAnim: 'drop'
    });
});

List of animations to use here

  • show (default)
  • slideDown
  • fadeIn
  • blind
  • bounce
  • clip
  • drop
  • fold
  • slide
  • To disable, use empty quotes ''

Date Range

By adding two Date Picker fields to your form, you can create a date range to select from. In our example, we have a Start Date and an End Date and we don’t want the End Date to be selected before the Start Date.

jQuery(document).ready(function($) {
    $( '#vfb-start-date-318' ).datepicker({
	changeMonth: true,
	onSelect: function( selectedDate ) {
		$( '#vfb-end-date-622' ).datepicker( 'option', 'minDate', selectedDate );
	}
     });

     $( '#vfb-end-date-622' ).datepicker({
	changeMonth: true,
	onSelect: function( selectedDate ) {
		$( '#vfb-start-date-318' ).datepicker( 'option', 'maxDate', selectedDate );
	}
     });
});

Date Range

There’s lots of other things you can do with the Datepicker and for a complete list of options, check the documentation.

How to use the Autocomplete field

One of the advanced fields in Visual Form Builder Pro is the Autocomplete field.  This field allows you to define a list of options which is then displayed as a suggestion list when the user types in the box.

A list of suggestions in an autocomplete field

To find this field, go to the Form Items and click on the Advanced tab.  You’ll find the Autocomplete field on the left column.  Drag and drop the button to a spot on your form where you want this field to appear.

You are free to type in your options, but I recommend using the Bulk Add Options feature.  Using our example, let’s say we want to add a list of all U.S. States.  Easy enough with Visual Form Builder Pro.  Click the Bulk Add Options button which pops up the customization screen.  Either select from the list of predefined categories or you can type in your own list.  I’m going to select the U.S. States category which loads all of the states in my Autocomplete field for me.

Adding my list using the Bulk Add Options feature

Once you save the form, go to your site and test it out.  Typing in the partial name of a state such as carolina will display North Carolina and South Carolina.

Now, something to keep in mind is that this is a list of suggestions.  In most cases, there’s not much preventing users from entering their own values.  If you want to require a value from a list of values, you’ll have to work on adding some custom jQuery. That’s another post for later :)

Including an image (or any other HTML) in your descriptions

Did you know that the Description option can handle HTML?  With just a basic understanding of HTML tags, you can customize your descriptions to achieve all sorts of different looks.

But one thing that’s pretty cool is that you can even include images.

First, begin by uploading the image to your site or finding an image that has already been uploaded.  What we need is the File URL of the image.  If you have uploaded the image through your WordPress Media Library, you can click on the image and the File URL will be listed at the bottom.

Next, go to your form and find the field you want to customize.  In the Description option, enter the following, changing the src attribute with the File URL you copied:

<img src="http://mysite.com/wp-content/uploads/2011/04/muro.jpg" />

You can input any HTML you want here so if you need an ordered list, an image, and some headings, you can totally do that. It may not be the best way, but it’s certainly a way. :)

Visual Form Builder Pro: Customize the upload directory

Are you annoyed that Visual Form Builder Pro places your file uploads mixed in with the uploads for your Posts and Pages?  If so, this bit of code is for you.

Visual Form Builder Pro uses a WordPress function called wp_handle_upload to handle uploading and moving the file to the appropriate content directory.  The upside (or downside, depending on how you look at it) is that is handles everything you need in a single function.  You just need to pass it the $_FILES reference.  With this simplification comes a price and the reason for this tutorial: customizing where the files goes is handled outside this function.

upload_dir filter

The upload_dir filter takes an array of all the path and URL info it needs to upload a file.  For our purposes, though, we only want to affect uploads that happen through Visual Form Builder Pro and not every upload. This is done by checking to see if our file upload field is set and, if so, change the upload directory. Otherwise, leave as is and continue as normal.

add_filter( 'upload_dir', 'vfb_upload_dir' );

function vfb_upload_dir( $upload ){

    /* If our File Upload field is detected.
       To change all forms, use $_POST['vfb-submit']
    */
    if ( isset( $_FILES['vfb-611'] ) ) {
        /* Customize this to fit your needs */
        $dir = WP_CONTENT_DIR . '/vfb-uploads';
        $url = WP_CONTENT_URL . '/vfb-uploads';

        $bdir = $dir;
        $burl = $url;

        $subdir = '';

        /* Append year/month folders if that option is set */
        if ( get_option( 'uploads_use_yearmonth_folders' ) ) {
            if ( !$time )
                $time = current_time( 'mysql' );

            $y = substr( $time, 0, 4 );
            $m = substr( $time, 5, 2 );

            $subdir = "/$y/$m";    
        }

        $dir .= $subdir;
        $url .= $subdir;

        /* Set the $uploads array with our new paths */
        $upload['path'] = $dir;
        $upload['url'] = $url;
        $upload['subdir'] = $subdir;
        $upload['basedir'] = $bdir;
        $upload['baseurl'] = $burl;
        $upload['error'] = false;
    }

	return $upload;
}

This function can be customized to fit your needs as you see fit.  This particular function will only run for the form that has the ‘vfb-611′ field, but you can expand it to include or exclude more forms.  You can even change it to pick up on all VFB forms if that’s what you want to do.

IMPORTANT NOTE!

Changing the upload directory in this way will affect how these uploads work in the Media Library.  In other words, you won’t see the thumbnail and the links in the Media Library will be pointing to the wrong file location.  WordPress stores the file location attachment metadata as a relative path, so it’s always going to be in reference to your default upload directory.

If customizing the upload path is more important than seeing thumbnails in the Media Library, then this detail can be overlooked.

Adding custom jQuery validation to your form

In most cases, the standard validation options that ship with Visual Form Builder will cover most of your needs.  However, there are those occasions where you need something customized and the standard options just don’t cut it.  Today, we’re going to look at how you can add your own jQuery validation rules.

Before we begin, you might want to head over to the jQuery Form Validation plugin page and read through some of the documentation to get a better idea of what we’ll be talking about.

Create a JS file and add to your theme via functions.php file

Go into your theme’s folder and create a new file called vfb-js.js in a folder called js.  Create that folder if it doesn’t exist.

Now, go to your theme’s functions.php file and add the following code:

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

   wp_enqueue_script( 'vfb-js-file' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

You are now ready to configure your JavaScript file.

Prepping our validation class

All custom rules that you want applied to a form will need to be placed inside the validation class.  But first you will need to find the ID of the form you want to configure.  Here, I am using Firebug to find that out, but View Source works just as well.

Getting the form ID using Firebug

Open your vfb-js.js file and add the following code:

jQuery(document).ready(function($) {
    $('#contact-us').validate({
        rules: {

        }
    });
});

Example #1: Require multiple checkboxes to be selected

For this example, let’s say that we have a form with a Checkbox field called Topics of Interest with several different topics to choose from.  This is a required field, but we also want to make sure they select at least two topics.

In the same way that we grabbed the ID of the form, we’ll need to do the same here to get the name property of the checkbox field.

Getting the name property of the checkbox field using Firebug

Open your vfb-js.js file and add the following code:

jQuery(document).ready(function($) {
    $('#contact-us').validate({
        rules:{
            'vfb-topics-of-interest-26[]':{
                required: true,
                minlength: 2
            }
        }
    });
});

But that’s not all. We can also customize the error messages for that field!

jQuery(document).ready(function($) {
    $('#contact-us').validate({
        rules:{
            'vfb-topics-of-interest-26[]':{
                required: true,
                minlength: 2
            }
        },
        messages:{
            'vfb-topics-of-interest-26[]':{
                minlength: 'Please select at least two topics.'
            }
        },
        errorPlacement: function(error, element) {
	    if ( element.is( ':radio' ) || element.is( ':checkbox' ) )
	        error.appendTo( element.parent().parent() );
	    else if ( element.is( ':password' ) )
		error.hide();
	    else
		error.insertAfter( element );
	} 
    });
});

Example #2: Require one field to be equal to another field

In this example, we have a Test Answer field but we need to be able to confirm that the user has entered the data correctly.  To do this, we’ll add a second Text field and call it Confirm Test Answer.  Now, we just need to make our first text field equal to our second one in our jQuery and throw an error message that lets them know if they don’t match.

Requiring one field to be equal to another

jQuery(document).ready(function($) {
    $('#contact-us').validate({
        rules:{
            'vfb-topics-of-interest-26[]':{
                required: true,
                minlength: 2
            },
            'vfb-confirm-test-answer-621':{
                equalTo: '#vfb-test-answer-620'
            }
        },
        messages:{
            'vfb-topics-of-interest-26[]':{
                minlength: 'Please select at least two topics.'
            },
            'vfb-confirm-test-answer-621':{
                equalTo: 'Your answers do not match'
            }
        },
        errorPlacement: function(error, element) {
	    if ( element.is( ':radio' ) || element.is( ':checkbox' ) )
		error.appendTo( element.parent().parent() );
	    else if ( element.is( ':password' ) )
		error.hide();
	    else
		error.insertAfter( element );
	}
    });
});

Example #3: Make a field required, depending on the value of another field

Let’s say that you have a form where you have a Start Date and an End Date.  If the user fills out the Start Date, the End Date needs to be required.  The End Date, in this case, is dependent on the Start Date not being left empty.

jQuery(document).ready(function($) {
    $('#contact-us').validate({
        rules:{
            'vfb-topics-of-interest-26':{
                required: true,
                minlength: 2
            },
            'vfb-confirm-test-answer-621':{
                equalTo: '#vfb-test-answer-620'
            },
            'vfb-end-date-85':{
                required: function(e){
                    return $('#vfb-start-date-80').val() !== '';
                }
            }
        },
        messages:{
            'vfb-topics-of-interest-26':{
                minlength: 'Please select at least two topics.'
            },
            'vfb-confirm-test-answer-621':{
                equalTo: 'Your answers do not match.'
            }
        },
        errorPlacement: function(error, element) {
	    if ( element.is( ':radio' ) || element.is( ':checkbox' ) )
		error.appendTo( element.parent().parent() );
	    else if ( element.is( ':password' ) )
		error.hide();
	    else
		error.insertAfter( element );
	}
    });
});

You can customize this to your needs so if you need the Start Date to have a certain value before the End Date is required, you can do that too.

As you can see, there are plenty of ways to extend your form with jQuery to accomplish some custom and complex things.

How to configure the email details in Visual Form Builder

One of the more common support questions I see for Visual Form Builder is how the Reply To Name and Email fields work.  This is probably because if you are not familiar with the process of sending an email through a server, it can seem a little obtuse.

When you make an email in a program such as Gmail or Outlook, that program controls the sending details.  It knows your display name (usually your first and last name), your email address, subject line, and all other things that go along with an email.

However, when sending an email without one of these programs we have to tell the server what each of those are.

Email configuration details

As you can see in the image above, all emails have these details in common.  You can email to one or more people, set a subject, plus the name and email of who it’s from.  Let’s go over how to do this in Visual Form Builder.

Go to your form and click on the Form Settings button. Click on Email to reveal the email details settings.

Email details settings screen

So, we can see that the same kinds of details can be customized to control what your email looks like when received in the email client.

  • E-mail Subject = Subject Line (painfully obvious, I know)
  • Your Name or Company = From Name
  • Reply-To E-mail = From E-mail
  • E-mail(s) To = To

That’s great, you say, but what about if you want to have the user’s name and email already set in the email?  This is great for when you want to reply directly to the user via email.  This is where the User’s Name (optional) and User’s E-mail (optional) fields come into play.

  • User’s Name – requires your form to have a Text field and the Required option set to Yes.
  • User’s E-mail – requires your form to have an Email field and the Required option set to Yes.

NOTE: If you have not fulfilled those requirements, the drop downs will not be populated with choices.

In the end, all we’re really doing is sending an email and we have to configure the program (in this case, the server) with all of our email details.  If you have any questions, please leave a comment!

 

Take control of your form’s look with the new Field Layout option

In Visual Form Builder, you can now customize the layout for the fields in your form by using the Field Layout option.  This is an easy way to tweak and control the look and feel of your form without having to write a bunch of new CSS.  Today, I’m going to go over how to use this powerful new feature.

Where is the Field Layout option?

All fields except for Fieldsets, Sections, and Instructions will include a Field Layout dropdown, seen below.

Field Layout option

Default Layout – Single Column

By default, all fields will be arranged in a single column.  If you have a particularly long form, or just want to change up the look to make your style, this may not be an ideal layout.

Default field layout

Left/Right Half – Two Column

To achieve a two column look, we will need to assign the Field Layout options as either Left Half or Right Half, depending on where you want that field to go.  On my example form, I change the Name item’s Field Layout to be Left Half and the Email item’s (which is arranged directly beneath Name) Field Layout to be Right Half.

It’s important that the two fields are next to each other in the form builder in order to achieve the correct look.

Left/Right Half field layout

Left/Middle/Right Third – Three Column

We can arrange even more fields on a single line using the Left, Middle, and Right Third option.  On my example form, I have three fields I want placed in one line: Start Date, End Date, and Number.  Start Date will be Left Third, End Date will be Middle Third, and Number will be Right Third.

It’s important that the three fields are next to each other in the form builder in order to achieve the correct look.

Left/Middle/Right Third field layout

Left/Right Two Thirds – Mixed columns

The last option allows us to stretch one field across two thirds of the form.  This is useful when you have one field that needs to be longer than the other on the same line.  The way we achieve this is by combining a Left/Right Two Third with a Left/Right Third.  On my example form, I will assign the URL as Left Two Third and Phone as Right Third.

It’s important that the two fields are next to each other in the form builder in order to achieve the correct look.

Left/Right Two Thirds field layout

If you wish to have the larger field on the right, simply use a Left Third with a Right Two Third.

Final Result

As you can see, our final result is a much smaller footprint for this form.

Customized fields using the Field Layout option

If you have any questions, please let me know!

How to change the layout of Radio buttons and Checkboxes

In the latest version of Visual Form Builder, you are now able to take control of how radio buttons and checkboxes are arranged.  Previously, you had no control (other than directly modifying the CSS) of the layout and it was a simple vertical list.

If you have a lot of options, this single vertical column can get pretty long.  Even if you don’t have a lot of options, perhaps you want to save a bit of space.  Whatever your reasons, being able to play around with the look and feel of your form is important.  So, in light of that, let’s see how you can customize the layout.

The Options Layout dropdown in the admin

It’s easy to change the look: go to your Radio or Checkbox field and you’ll see the Options Layout dropdown.  Choose from the different options to achieve the look you desire.  By default, all Radio and Checkbox fields are arranged in a One Column layout.

Options Layout

  • One Column: a single, vertical list
  • Two Columns: creates two equal columns
  • Three Columns: creates three equal columns
  • Auto Width: uses the width of the options to control the width

With only a few minutes, you can totally change the look of your form without ever having to touch the CSS.