Customizing custom-made or plugin forms with datepicker
So you’ve developed a basic contact form on a client’s site (or installed a lite contact form plugin, such as WPForms Lite or Contact Form 7), and they love it. Several months later, they get in touch with you because the business is expanding and they need a booking form added, and want a datepicker included so that site visitors can easily select dates whilst filling in the form.
No worries!
You have several options available to you – if you used a plugin you could either upgrade to a premium plan of the plugin you are using (for example WPForms basic) or add the extra functionality yourself. While you and your client may decide it’s better to pay a yearly price for a premium option, this is only hassle free if you went with a plugin that allows for upgrades, such as WPForms. Yes you could install a new contact form plugin, but do you really want two contact form plugins on your site?
More than likely you’ve added CSS styling to your forms, and you would have to start again with the new form. Some plugins such as Contact Form 7, require you to add another plugin to get the datepicker functionality as well (and at the time of writing the support for that plugin doesn’t look so hot) – and again, do you want all these extra plugins on your site, potentially causing issues if the developer doesn’t keep them updated? So, you decide to add the functionality yourself.
Editing the input field
So what we want to be able to do is to show the datepicker when we click on the ‘booking date’ input field. We then want to be able to select a date and for that date to be displayed in the field.
The first step then is to add an id for the form field you would like a datepicker added to. If you’ve custom built your form, just add the id to the input field you want to use. Let’s name the id #booking-date for the sake of this article. In it’s most basic form, your input field should look something like this:
<input id="booking-date" name="booking-date" type="text" />
This may be trickier if you used a plugin. For example, WPForms will allow you to create a class for your booking date field, but this class name is applied to the field container rather than the specific input field. Add the class booking-date to the field container – you will be able to access the input field directly using the jQuery extenstion: '.booking-date > :input' (we’ll use this in the jQuery function later).
In Contact Form 7, you can add an id to the field you want by adding id:booking-date within the square brackets for your date field.
Note: you can use Contact Form 7’s default date functionality – this implements the date attribute in HTML5. This article assumes you want to use jQuery’s datepicker for various reasons including styling and date formats, as well as browser compatibility. You can find out more about HTML5’s date attribute here ).
Enqueue the styles and scripts
The next thing to do is enqueue the datepicker script in your functions.php file, and also enqueue the datepicker theme styling. In functions.php, add the following to your existing wp_enqueue_scripts function (we don’t need to enqueue jQuery as WordPress includes and loads it’s own version of the jQuery library automatically):
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
Trigger the datepicker function
The final thing to do is create a function in your functions.php file that will run the jQuery code that will trigger the datepicker. You can also do this in a separate Javascript file and enqueue the script if you wish. As we want the script to load in the footer, we’ll hook the php function onto the wp_footer action hook.
So at the bottom of our functions.php file we’ll add the following:
function add_datepicker(){
?>
jQuery(document).ready(function(){
$bookingdate = '.booking-date > :input'; // use this if adding a class name to the input field container or $bookingdate = '#booking-date';
}
add_action('wp_footer','add_datepicker',10);
How does this work?
What exactly is this function doing? The PHP function includes a Javascript function which starts by creating a variable that represents either the id name of the input field (for example if you are using a custom built form or a plugin like Contact Form 7), or the class name of the input field container if you are using the WPForms Lite plugin.
Before clicking the input, we hide the datepicker.
On clicking that input, we set up the datepicker, and then show it.
And that’s all there is to it. You can customise and style the datepicker to your heart’s content (check out the jQuery datepicker API documentation to explore the API in depth). Some time back I created a demo booking form on a static HTML page using datepicker – you can check out the code on Github for some customisation ideas.
Disclaimer: The link to WPForms on this page is an affiliate link, should you decide you’d prefer to purchase any of their premium plugin versions.