Prepare Contact Form 7 fields

Date Time Picker for Contact Form 7 Pro adds a date picker, time picker, or combined date-and-time picker to Contact Form 7 text fields. Choose a picker by adding its CSS class in the field’s CSS Classes editor. Add the class to the text field, and separate multiple classes with spaces.

• walcf7-datepicker for date selection
• walcf7-timepicker for time selection
• walcf7-datetimepicker for date and time selection

For example, a required booking date field can use [text* book-date class:walcf7-datepicker placeholder "Date Picker"].

Set calendar availability

Pro date controls let you disable past dates and, when needed, today. Specify weekends, individual dates, and holidays to disable, then set minimum and maximum allowed date selections. These settings can help direct booking, appointment, event registration, and service inquiry forms toward dates that fit your process.

Configure time and display

Choose a 12-hour or 24-hour time format and display or hide AM and PM. Set the time step or interval, plus maximum and minimum selectable times. The plugin also includes light and dark themes, 51 language translations, and compatibility with the WPML WordPress Multilingual Plugin.

Choose where the script loads

An option lets you load the picker script only on selected pages. This focuses the script on pages where Contact Form 7 date or time fields are used, supporting the stated goal of speeding up the site.

Install and verify

Install the Pro extension in WordPress, then edit the relevant Contact Form 7 form. Add the appropriate picker class to each text field through the CSS Classes editor and configure the selection rules. Review the form to confirm that its date, time, theme, language, and selection limits match your process.