A New Datepicker for Contact Form 7 Forms – Contact Form 7 Datepicker Plugin No Longer Maintained

Yup, I felt the same as you when I realized that the ole’ faithful Contact Form 7 Datepicker plugin was no longer being maintained. I found a new datepicker for Contact Form 7 forms!

There’s no such thing as staying too comfortable with any website for very long anymore before something needs to be changed in some way shape or form.

So… off I went to hunt for a new means of being able to offer a pop out calendar date selector for a Contact Form 7 form on a client’s website.

That’s when I finally came across the WP Datepicker plugin by Fahad Mahmood.

So…now if you are ready to try this plugin out… once you have installed and activated this plugin, go to your WordPress Dashboard Settings > WP Datepicker.

In the WP Datepicker Settings, at the first textbox with a drop down list, you will need to select your given language. Canadian (nor American) English was not available, so I selected the next best option, being Great Britain English.

In the second field (if it is not already there) make sure to type the following in:

.dp-field

…then scroll down the page and click on the “Save Changes” button.

You already have your Contact Form 7 plugin “Installed” and “Activated”… and your form itself created. So, let’s now head on over to your form where you were using the ole’ faithful Contact Form 7 Datepicker plugin (which, by the way, you should have at least Deactivated by this point in time)…

From your WordPress Dashboard sidebar, click on “Contact” and mouse over the name of your form. When “Edit” appears as one of the options, click on it.

Now… in the Form, locate the line where you have been using the shortcode for the Contact Form 7 Datepicker plugin.

In my case, I was using the following:

[date* Date date-format:mm/dd/yy placeholder “Date (required)”]

Take that line of code off your form and keep it by pasting it into a Notepad for safe keeping. This way, if you want to restore that line of code later on for whatever reason, then you can.

Now, where you had that line of code, you will be replacing it with the following shortcode:

[text* Date class:dp-field “Date (required)”]

Then scroll down to the bottom of the Form and click on the “Save” button.

Now it is time to click on the Mail tab of your form.

In my case the following:

[Date]

…is now replaced with:

[Date]

…and this new shortcode is highlighted, so I copied and pasted it over top of the former shortcode [Date] that I was using inside the “Message Body” on the appropriate line, just to be sure all will work as it should… then scroll down this form and click the “Save” button.

Now all that is left to do is for you to test that your form works the way you want it to.

If you are using a cache plugin (which for obvious reasons, you should be) then be sure to purge your website cache and reload your website form (I even used a different browser to make real sure my form worked well) and then take your form for a test run.

When this issue happened to me, I was left scrambling and could find no easy method without a LOT of searching, and even then I ended up having to contact the developer of the WP Datepicker. What a gentleman and a scholar Mr. Mahmood is too, I’d like to add here. Even with our differences in language, he was finally able to get through to me what I needed to do to make my form work as before.

As you can see, there are very little differences between the two datepickers, though yes, the “Date field” for WP Datepicker is slightly longer and not quite as high as the previous plugin used. Would users of this form notice? No likely.

Hope you find this post helpful. Should you have any questions regarding the WP Datepicker plugin or if you simply want to chat about this plugin, I hope you will feel free to leave me a comment below. I always respond to all comments.