How to add a jQuery datepicker to your contact form 7
June 7, 2011 
50 Comments
I really love the contact form 7 plugin, but there is 1 big thing missing: a datepicker. A datepicker is an easy way to select a date from a popup calendar. Luckily there is jQuery, and with a little bit of php code it’s possible to add a datepicker to your form.
Introduction on the jQuery datepicker
What is jQuery?
JQuery is one of the best javascript libraries at the moment. Web developers use it to create user friendly interfaces. Thanks to jQuery you only have to add a couple of lines of code to add interaction. If you want to know more about jQuery, please visit www.jquery.com.
About the datepicker
The datepicker is actually a plugin for jQuery. You can download it from jqueryui.com. This jQueryUI is a bundle of useful plugins for jQuery.
Demo
Check out the demo on jqueryui.com. In the “Demos & Documentation” section, click “Datepicker” under “Widgets”:
In this demo section you can select your theme (1). This theme will define how your datepicker will look like. Select the desired example (2) and check out the result (3). At this stage you have an idea what you can do with jQuery. For this tutorial, basic functionality will be just fine.
Installation of jQueryUI
Download jQueryUI
To download jQuery AND jqueryUI visit jqueryui.com and go to the “Download” section:
The great thing here is that you can “build” your own download. You can select which options to include / exclude, and also to select a theme.
In this case we’re just going to build a basic package (including all the options). First, select a theme (1) and after that click the “Download” button (2).
It’s also possible to build your own theme, so if can’t find the right theme, you just can create your own here. Just click the “design a custom theme” link above the theme selection (1).
Upload the downloaded folder with FTP
Once you downloaded jQueryUI, unzip it and upload the jquery-ui-1 folder to the root of your website (another location is also fine, but in this example I use the rood folder).
At this point, you can check if everything is fine. Just go to www.yourdomain.com/jquery-ui-1/ and check if you get the following result:
Create your contact page
Add a new “contact page”
The next step is quite simple. Just add a new page and publish this page (without any content). It’s also important to know the page id. There are a couple of ways to find the page id. An easy way is to do the following:
- Edit your contact page
- In the url bar you will see the following:
http://www.mydomain.com/wp-admin/post.php?post=21&action=edit - The number after “post=” is the id of the page
Create a new form
Add a new simple contact form. If you don’t know how to do this, please read my Contact Form 7 Step By Step Tutorial.
It’s important to create a new text field:
As you can see in the example above, I added a text field with the name “start-date”. Also, don’t forget the id (“id:start-date”), this id will be used by jQuery.
If you should test this right now, you’d see this field is nothing more then a regular text field.
Don’t forget to add the form to the Contact page.
Connect the contact form date field with the jQueryUI datepicker
Okay, we uploaded jQuery, we created a new text field called “start-date”… now let the magic begin!
Changing header.php
Open header.php (you can find this under /wp-content/themes/name-of-your-theme/) with your favorite PHP editor. I work on Mac and I use Panic Coda as a PHP editor.
The following lines of code we are going to add between the <head>-tags.
First of all, we are going to define that this is a php script:
<?php //jQuery ?>
Next we are going to build an if structure, this script may only run if the current page is our contact page. That’s why we need the page id:
<?php
//jQuery
if($post->ID==21){
//this code only runs when the current page is our contact page!
}
?>In the next step we are going to include all the necessary files:
- the jQueryUI css file
- the jQuery javascript file
- the jQueryUI core
- the jQueryUI datepicker
<?php
//jQuery
if($post->ID==21){
//this code only runs when the current page is our contact page!
//add the necessary files
// --> css
echo '<link rel="stylesheet" <link rel="stylesheet" href="http://www.mydomain.com/jquery-ui-1/development-bundle/themes/ui-lightness/jquery.ui.all.css">';
// --> jQuery javascript
echo '<script src="http://www.mydomain.com/jquery-ui-1/development-bundle/jquery-1.5.1.js"></script>';
// --> jQueryUI core
echo '<script src="http://www.mydomain.com/jquery-ui-1/development-bundle/ui/jquery.ui.core.js"></script>';
// --> jQueryUI datepicker
echo '<script src="http://www.mydomain.com/jquery-ui-1/development-bundle/ui/jquery.ui.datepicker.js"></script>';
} ?>Okay, for the moment all the necessary files are loaded only when visiting the contact page. Now let’s add the function to turn our text field into a datepicker:
<?php
//jQuery
if($post->ID==21){
//this code only runs when the current page is our contact page!
//ADD THE NECESSARY FILES
// --> css
echo '<link rel="stylesheet" <link rel="stylesheet" href="http://www.mydomain.com/jquery-ui-1/development-bundle/themes/ui-lightness/jquery.ui.all.css">';
// --> jQuery javascript
echo '<script src="http://www.mydomain.com/jquery-ui-1/development-bundle/jquery-1.5.1.js"></script>';
// --> jQueryUI core
echo '<script src="http://www.mydomain.com/jquery-ui-1/development-bundle/ui/jquery.ui.core.js"></script>';
// --> jQueryUI datepicker
echo '<script src="http://www.mydomain.com/jquery-ui-1/development-bundle/ui/jquery.ui.datepicker.js"></script>';
//TURN TEXT FIELD INTO DATEPICKER
echo '<script type="text/javascript">';
echo 'jQuery(function($){';
echo '$( "#start-date" ).datepicker({});';
echo '});';
echo '</script>';
}
?>Notice “start-date” is the name of our text field we want to turn into a datepicker. If you save all this and go to the contact page, you should see this datepicker when clicking in the “Start date” field:
Localisation
One last detail is the language of the datepicker. Standard the language is English but it’s easy to change this. Just add an extra line of code with the language file. In the following example we will add the French language file:
<?php
//jQuery
if($post->ID==21){
//this code only runs when the current page is our contact page!
//ADD THE NECESSARY FILES
// --> css
echo '<link rel="stylesheet" <link rel="stylesheet" href="http://www.mydomain.com/jquery-ui-1/development-bundle/themes/ui-lightness/jquery.ui.all.css">';
// --> jQuery javascript
echo '<script src="http://www.mydomain.com/jquery-ui-1/development-bundle/jquery-1.5.1.js"></script>';
// --> jQueryUI core
echo '<script src="http://www.mydomain.com/jquery-ui-1/development-bundle/ui/jquery.ui.core.js"></script>';
// --> jQueryUI datepicker
echo '<script src="http://www.mydomain.com/jquery-ui-1/development-bundle/ui/jquery.ui.datepicker.js"></script>';
//TURN TEXT FIELD INTO DATEPICKER
echo '<script type="text/javascript">';
echo 'jQuery(function($){';
echo '$( "#start-date" ).datepicker({});';
echo '});';
echo '</script>';
//ADD FRENCH LANGUAGE FILE
echo '<script src="http://www.mydomain.com/jquery-ui-1/development-bundle/ui/i18n/jquery.ui.datepicker-fr.js"></script>';
}
?>You can find all the language files in the following folder: /jquery-ui-1/development-bundle/ui/i18n/
Conclusion
As you can see it’s not that difficult to add a datepicker to our existing contact form made with the Contact Form 7 plugin. What do you say, there are some other options that are more simple? That’s right, but jQuery is very powerful and flexible (choose your own theme / colors) so that’s why this combination is my favorite datepicker!
