Select Page

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:

WP Datepicker

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:

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.
Give it a try below:

7 + 5 =

Not so hard, right? Hopefully Divi will include a date-picker option for the contact form fields at some point, but until then this workaround is easy enough to implement.

Do you want to have access to thousands of assets for your webdesign projects?

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.