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 found an easy way to enable a date picker on the contact form using this plugin:
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 WP DatePicker plugin which fields to convert to date pickers. Go to Settings > WP DatePicker and add the following to the ‘Selectors’ field:
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.
Give it a try below:
Web developer based in Porto, Portugal, working mostly with WordPress.
Disclosure: Some of the links in this blog are ‘affiliate links.’ This means if you click on a link to a commercial product and purchase the item, I will receive an affiliate commission.