Divi is one of the most used themes on WordPress and one of the latest updates introduced a ton of new features for the Contact Form module. However a simple yet useful input type missing is a date picker. Might not be used by the masses, but it’s very useful for some cases. For a recent project I needed to build a contact form that would work as a booking request form, so a date picker field would be a valuable addition to the arrival and depart date fields.
I helped to develop a plugin that allows you to do this and also has the extra option of enabling a time picker. The plugin is now maintained by InputWP.
With this plugin enabled, what you need to do is give a unique Field ID to your field, when editing the field you want to convert to a date picker, in the Contact Form module. For my project I used ‘date-arrival’ and ‘date-departure’.
Then you’ll use those IDs to tell the plugin which fields to convert to date pickers. Go to Settings > Date Time Picker and add the following to the ‘Selectors’ field:
input[data-original_id='date-arrival'],input[data-original_id='date-departure']
Basically you’ll need to add input[data-original_id='your_field_id'] to the selectors field and repeat that if you have more fields. If you copy/paste the code from here, make sure to re-write the ‘quote’ signs, since they might get changed in the copy/paste.
When you save these changes you should have your contact form fields converted into date pickers.
Here are some screenshots of how I implemented the date and time picker in the field.
Not so hard, right? Hopefully Divi will include a date-picker or date-time-picker option for the contact form fields at some point, but until then these workarounds are easy enough to implement.
Leave a Reply