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.