GET FRESH CONTENTS FROM WPCRONS

How To Add jQuery Datepicker UI To Contact Form 7

I really love the contact form 7 plugin, but there is 1 big thing missing: a datepicker. Using jQuery Datepicker UI we can easily add our own themed datepicker.

jQuery datepicker UI

A date picker 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 UI

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 jQuery datepicker UI

The jQuery datepicker ui 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”:

jQuery Datepicker jQuery UI

In this demo section, you can select your theme. This theme will define how your datepicker will look like.

Select the desired example and check out the result as showing in the above figure. At this stage, you have an idea about what you can do with jQuery. For this tutorial, basic functionality will be just fine.

Installation of jQuery Datepicker UI

Download jQuery UI and  jQuery Datepicker UI plugin

To download jQuery UI and Datepicker plugin visit jqueryui.com and click to the big “Custom download” button:

jQuery UI

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 and after that click the “Download” button in the next page.

It’s also possible to build your own theme, so if you 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.

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 root 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:

welcome-to-jquery

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. You need to add 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 Linux and I use Atom Text 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. i.e.,

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:

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
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:
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:

Localization

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:

You can find all the language files in the following folder: /jquery-ui-1/development-bundle/ui/i18n/

Also read: 32 Step WordPress website security ultimate checklist-directory

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!

If you liked this article, then please follow us on social media and don’t forget to Subscribe to our mail list.

You May Also Like

About the Author: WPC Staff

WPCrons staff has long-term experience of WordPress & like to constantly spot problems and plotting how to solve them. We believe you don't need to be a nerd or a programmer or a network engineer to make a difference.

Leave a Reply

Thanks for choosing to leave a reply. Your opinions and comments are very important to us, and your email address will NOT be published. If you need a private conversation then use our contact form. Please add an avatar if you do not have and make the comment section more beautiful.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share via


FollowUs

Subscribe to get FREE updates

wpcrons-newslater
Join 1000s of readers around the globe. Don’t worry. We also don’t like Spam. We are weekly.