A date field is included in Contact Form 7 (CF7), but currently the support available for a solid Datepicker is pretty variable depending on the browser used.
This article recommends some Contact Form 7 Extensions you can use to add improved Datepicker support in Contact Form 7.
Our Recommended Contact Form 7 Datepicker plugin options
You can install any one of the following plugins to add improved Datepicker support in Contact Form 7:
WP Datepicker
WP Datepicker is a lightweight plugin which can display a date picker on any form field.
The WP Datepicker provides features such as:
- option to change language
- enable date picker for the admin dashboard
- enable or disable weekend selection.
It’s easy to integrate with Contact Form 7 forms. You simply need to add a selector under Settings >> WP Datepicker.
Then, use the same selector in any date field of your Contact Form 7 forms where you want to display the date picker.
Using CF7 Tag Generator
To add the selector, go to your form and select the date form tagForm Tag Form Tags in Contact Form 7 (CF7) (in the Form Tab) are used to define all CF7 form fields. Each Form Tag is replaced with an HTML element, which represents an input field, when it is displayed in an actual form..
The selector is added in the Class Attribute of the form, since the DatePicker is added using a CSS class called .datepicker-form-field.
Using CF7 Skins Visual Editor
It’s even easier to add the WP Datepicker selector in any date field of a Contact Form 7 form using the CF7 Skins Visual Editor.
Adding Datepicker via CF7 Skins Visual Editor
Tip: With the CF7 Skins Visual Editor you don’t need to work directly with CF7 Tags. Our drag & drop Visual Editor includes support for all Contact Form 7 tags & options.
Date Time Picker Field
Using Date Time Picker Field, you can easily add a date and time picker to your Contact Form 7 forms.
Date Time Picker Field provides many features including:
- time picker as well as date picker
- display only the date picker or only the time picker
- 15 selectable date formats and 2 selectable time formats
- customizable time steps, offset for the available times
- customizable values for minimum and maximum dates and times.
You simply need to add a selector under Settings >> Date & Time Picker.
Then, use the same selector in any date field of your Contact Form 7 forms where you want to display the date picker.
Using CF7 Tag Generator
To add the selector, go to your form and select the date form tag.
The selector is added in the Class Attribute of the form, since the DatePicker is added using a CSS class called .datepicker-form-field.
Using CF7 Skins Visual Editor
It’s even easier to add the Date Time Picker selector in any date field of a Contact Form 7 form using the CF7 Skins Visual Editor.
Adding Datepicker via CF7 Skins Visual Editor
Our Preference
We recommend you to use Date Time Picker Field because:
- it provides time picker as well as date picker
- you can disable the time picker or date picker individually
- it includes 15 selectable date formats and 2 selectable time formats
- you can disable specific days, dates, and times as well.
Tip: The Date Time Picker Pro version also lets you customize the settings for each datepicker field individually.
Further reading
- Contact Form 7 Datepicker plugin removed due to security vulnerability
- Contact Form 7 Datepicker includes high severity security vulnerability
Tip: The wide range of free Contact Form 7 Extensions available can give users many of the functions available in some of the well-known premium form plugins.
