How to customize the Date Picker

Getting a properly formatted date from a user can be a pain.  Did they type with dashes, slashes, spaces, commas, or a combination of everything?

This is where a Date Picker comes in handy.  A Date Picker is a JavaScript tool that pops up a little calendar that lets a user click the date they want and it will format the date in the way you desire.  In Visual Form Builder’s case, the Date Picker is built using the jQuery UI Date Picker.

Default Date Picker Configuration

This Date Picker is a highly complex and customizable jQuery plugin.  So, in order to meet the needs of the many, Visual Form Builder uses the default configuration.  Today, I’m going to explain how to customize the calendar to work like you want it to.

Before we begin, you need to decide what you want to do:

  1. Change the configuration for all Date Pickers on all forms
  2. Change the configuration for each Date Picker on each form (if desired)

In either case, you’ll need to create a JavaScript file and properly add it to your theme via the functions.php file.

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 my-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( 'my-js-file',
       get_template_directory_uri() . '/js/my-js.js',
       array( 'jquery' ),
       '1.0',
       false );

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

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

You are now ready to configure your JavaScript file.

Configure All Date Pickers on All Forms

This option will change all Date Pickers on any form you happen to create.  This is handy if you like the default configuration but perhaps need to change a few things about it.  For a full list of Date Picker configuration options, please see the documentation.

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

jQuery(document).ready(function($) {
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd'
    });
});

Configured Date Picker with global defaults

Configure a Single Date Picker on a Single Form

This option will change a single Date Picker on a single form.  This is useful is you have multiple Date Pickers on a single form and require different configurations for each.

First, you will need to use your browser to View Source.  Find the ID on the Date Picker you want to configure.  Here, I am using Firebug to find that out, but View Source works just as well.

Using Firebug to get the ID

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

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

Configured Date Picker for a single field

Bonus: Use Both Configuration Methods

You can use the two methods above to your advantage by combining each technique.  This can be used when you need to set defaults for all Date Pickers yet still be able to configure a single Date Picker on a form.

jQuery(document).ready(function($) {
    $.datepicker.setDefaults({
        minDate: -20,
        dateFormat: 'yy-mm-dd'
    });

    $( '#vfb-date-318' ).datepicker({
        numberOfMonths: 2
    });
});

Configured Date Picker using global defaults with a single field

As you can see, the Date Picker can be complex but it’s also really powerful.

How to use the Page Break field in Visual Form Builder Pro

One of the cool new features in Visual Form Builder Pro is the Page Break.

Long forms are better broken up into smaller chunks so as not to overwhelm the user.  You see this technique more often in online surveys or shopping carts.  One disadvantage to the traditional form page break is that you are usually shuffled off to a completely different page, forcing the user to page back if he forgets something on the previous screen.

Visual Form Builder Pro fixes this by using jQuery to hide the next “page” and reveal each section only when the user is ready.  Because it is such a new concept, I’m going to show you how to use it.

First, go to the form builder and click on the Advanced tab and then click on the Page Break item to add it to your form.

Treat Fieldsets as your logical break

The Page Break navigation is added to the end of fieldsets, so treat these as logical breaks in your form.

A Page Break should be placed at the end of a fieldset group but immediately before the next fieldset.

A Page Break inserted in between two fieldsets

You may change the name of the Page Break navigation to whatever you like.  Once you save the form, visit your form and this is what you should see:

A form with a rendered Page Break

As you can see, the Next button has been added along with a counter of which page your are on and the total pages of this form.  Clicking on the Next button nicely fades in the next page while fading out the Next button that was just clicked on.

There is no limit to the number of fieldset groups under a page

Once you have added a Page Break to a form, you are not limited to the number of fieldset groups that follow it.  So, in my example I only have a single fieldset before adding a Page Break.  The next page holds two more fieldsets and the verification, which is the end of the form.  If I wanted to, I could add another Page Break in between one of those fieldsets and I’d have three pages instead of two.

By using a Page Break, those long forms won’t look so intimidating, mistakes will be limited, and all input is validated on the same page to increase conversions.

That’s it!  Simple, right?

Introducing Visual Form Builder Pro

Today, I am proud to introduce to you Visual Form Builder Pro, the result of many, many hours of hard work (and surely the mark of many more to come).  The price?  $10.

For those of you that are current users of Visual Form Builder (Free), this is an update with tons of new features, which I will detail below.  For those who have never heard of Visual Form Builder, this is a premium WordPress plugin that helps you build and manage all kinds of web forms for your site in a single place.  You don’t need to know any PHP, CSS, or HTML to get a beautiful, safe, and fully functional form.

Update (10/17/12): Visual Form Builder Pro has added even more features than the ones listed below.  Check out all of the new things that have been added over the last few months.

New Features of Visual Form Builder Pro

  • 10 new Form Fields (Username, Password, Color Picker, Autocomplete, and more)
  • Edit and Update Entries
  • Quality HTML Email Template
  • Email Designer
  • Analytics
  • Data & Form Migration
  • PayPal Integration
  • Form Paging
  • No License Key
  • Unlimited Use
  • Automatic Updates

Looking at that list, it could very well be a plugin on its own.  But, these are additions to the core of Visual Form Builder, which includes: 20 Standard Form Fields, Rock Solid jQuery Validation, Drag ‘n Drop interface, Stores and manages Entries, CSV Entries Export, Customized Confirmation Messages, SPAM Protection, and much, much more….

Let’s talk about some of those new features in a little more detail.

New Form Fields

Some of these new form fields are a little more advanced than the standard fields, but the functionality can really open up what you can use Visual Form Builder for.  For example, the Password field includes a strength meter to let the user know how strong their password is.  The Autocomplete field allows you to define a list of terms that will be displayed when the user starts typing, which is great when you have a large data set.  Other fields include Username that check if that username exists in WordPress; Min, Max, and Range; a Color Picker; a Hidden field with pre-made variables or create your own; IP Address; and a Page Break.

Data & Form Migration

If you are new to Visual Form Builder and not sure if you want to upgrade just yet, no problem.  You are welcome to try the free version for as long as you want and, when you are ready to upgrade, download Visual Form Builder Pro and it will transfer everything you have into the new system.

Email Designer

Not only have I improved the quality of the HTML email output, but I have added the ability to customize the look to match your brand or style.

Analytics

To get a better idea of how your forms are performing, Visual Form Builder Pro utilizes a variety of charting tools to visualize your data.  All without having to export entries and mess with Excel.

PayPal Integration

Now you can collect payments or registration fees by linking a field on your form with PayPal.  Your forms will seamlessly collect your data and redirect to PayPal for a worry free experience.

Moving Forward

There’s plenty of features on the road map for Visual Form Builder Pro.  Of course, those who buy will automatically get the updates free of charge.  I also plan to add detailed Documentation to the website.

On a personal note, I’d like to thank my wife and future baby girl who put up with the long days and nights of me staring into a computer screen.  I did this for them, after all.

With all of that being said, I hope you enjoy Visual Form Builder Pro and if you have any pre-purchase questions, please use my contact form.

Buy Now for $10