{"id":5923,"date":"2019-02-15T10:03:24","date_gmt":"2019-02-15T15:03:24","guid":{"rendered":"https:\/\/www.eparrs.com\/blog\/blog\/?p=5923"},"modified":"2024-02-29T22:33:07","modified_gmt":"2024-03-01T03:33:07","slug":"a-new-datepicker-for-contact-form-7-forms","status":"publish","type":"post","link":"https:\/\/www.eparrs.com\/blog\/a-new-datepicker-for-contact-form-7-forms\/","title":{"rendered":"A New Datepicker for Contact Form 7 Forms – Contact Form 7 Datepicker Plugin No Longer Maintained"},"content":{"rendered":"\n

Yup, I felt the same as you when I realized that the ole\u2019 faithful Contact Form 7 Datepicker plugin was no longer being maintained. I found a new datepicker for Contact Form 7 forms! <\/p>\n\n\n\n\n\n\n\n

There\u2019s 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.<\/p>\n\n\n\n

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\u2019s website.<\/p>\n\n\n\n

That\u2019s when I finally came across the WP Datepicker plugin by Fahad Mahmood.<\/p>\n\n\n\n

\"screen<\/figure><\/div>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

In the second field (if it is not already there) make sure to type the following in:<\/p>\n\n\n\n

.dp-field<\/p>\n\n\n\n

…then scroll down the page and click on the \u201cSave Changes\u201d button.<\/p>\n\n\n\n

\"screen<\/figure><\/div>\n\n\n\n

You already have your Contact Form 7 plugin \u201cInstalled\u201d and \u201cActivated\u201d… and your form itself created. So, let\u2019s now head on over to your form where you were using the ole\u2019 faithful Contact Form 7 Datepicker plugin (which, by the way, you should have at least Deactivated by this point in time)…<\/p>\n\n\n\n

From your WordPress Dashboard sidebar, click on \u201cContact\u201d and mouse over the name of your form. When \u201cEdit\u201d appears as one of the options, click on it.<\/p>\n\n\n\n

Now… in the Form, locate the line where you have been using the shortcode for the Contact Form 7 Datepicker plugin.<\/p>\n\n\n\n

In my case, I was using the following:<\/p>\n\n\n\n

[date* Date date-format:mm\/dd\/yy placeholder “Date (required)”]<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Now, where you had that line of code, you will be replacing it with the following shortcode:<\/p>\n\n\n\n

[text* Date class:dp-field “Date (required)”]<\/p>\n\n\n\n

Then scroll down to the bottom of the Form and click on the \u201cSave\u201d button.<\/p>\n\n\n\n

Now it is time to click on the Mail tab of your form.<\/p>\n\n\n\n

In my case the following:<\/p>\n\n\n\n

[Date]<\/p>\n\n\n\n

…is now replaced with:<\/p>\n\n\n\n

[Date]<\/p>\n\n\n\n

…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 \u201cMessage Body\u201d on the appropriate line, just to be sure all will work as it should… then scroll down this form and click the \u201cSave\u201d button.<\/p>\n\n\n\n

Now all that is left to do is for you to test that your form works the way you want it to.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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\u2019d 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.<\/p>\n\n\n\n

As you can see, there are very little differences between the two datepickers, though yes, the \u201cDate field\u201d for WP Datepicker is slightly longer and not quite as high as the previous plugin used. Would users of this form notice? No likely.<\/p>\n\n\n\n

\"screen<\/figure><\/div>\n\n\n\n
\"screen<\/figure><\/div>\n\n\n\n

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.<\/p>\n\n\n

\r\n <\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

Yup, I felt the same as you when I realized that the ole\u2019 faithful Contact Form 7 Datepicker plugin was no longer being maintained. I found a new datepicker for Contact Form 7 forms!<\/p>\n","protected":false},"author":1,"featured_media":8521,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"yasr_overall_rating":4.9,"yasr_post_is_review":"yes","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-5923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-archived"],"yasr_visitor_votes":{"stars_attributes":{"read_only":true,"span_bottom":"