Date and Time Picker field on Contact Form 7
Most websites online will need a contact form and Contact form 7 is without any doubt one of the most popular plugins on WordPress with 5+ million active installations and growing. It’s amazing how simple and versatile the plugin is, allowing any form to be extended using simple tricks.
The plugin comes with support for ‘date’ fields, but for some projects you might need a datetime field. There’s a plugin by inputWP that can help you with this and I’ll explain how you can use it with CF7.
Install the Date Time Picker Field
Although the plugin was not built to work directly with CF7, it’s compatible with any form you might have on your website, Contact Form 7 included. You’ll just need to follow some simple steps.
Add a normal text field to your form
The first step is to build your form. For the fields you want to convert into datetime fields, simply use text fields. You can name the field whatever you want, but you will need to pay attention to the class name you add:
It doesn’t necessarily need to be ‘datefield‘ it just needs to be something unique and that you remember after, when setting up the Date and Time Field plugin.
Setup Date and Time Field plugin
Once you have your form, you need to go to Settings > DateTime Picker. In the CSS Selector option, add the name of your class, preceded by a . (period). In this case .datefield This will be the css selector the plugin will use to look for the field and convert it into a date and time field:
And that’s it! You can explore the other settings available in the plugin to optimize the date time picker.