How to Integrate the Date and Time Picker With Divi

In this tutorial, we’ll see how we can integrate the Date and Time Picker with the Divi Contact Form module to convert input fields into Date Picker, Time Picker, Date Range, and both Date and Time Picker. The integration might be required to provide users with a date calendar and time picker for your business. Like, bookings, appointments, check-in & check-out, and more. Follow the below steps one by one to get your desired result.

Prerequisites

Please make sure to install the following plugins before you proceed. 

• Divi
• Date and Time Picker by Input WP

Basic Plugin

 1. Create a Contact Form in Divi

1. Deploy Divi Builder → Insert Contact Form module → Insert a new field
2. Save the form. 

2. Update the CSS Selector

1. Go to the Input WP → Integration
2. In the CSS Selector field, remove the “.” (dot) before the code.
3. Click Save/Update.
4. Copy the CSS Selector.

3. Integrate with Divi

1. Locate your Divi form and click on Edit for the Contact Form.
2. Paste the CSS Selector into the Field ID of the Input created in Divi.
3. Click Save/Publish.

PRO

 1. Create a Contact Form in Divi

1. Deploy Divi Builder → Insert Contact Form module → Insert a new field
2. Save the form.

2. Create a new Manual integration in Input WP

1. Go to the Input WP → Integration → Form Integration → Add New.
2. Input Label text (this will be just an identifier for you).
3. Select the Method → Manual
4. Click to Generate the CSS Selector.
5. In the CSS Selector field, remove the “.” (dot) before the code.
6. Click Save.

3. Integrate with Divi

1. Locate your Divi form and click on Edit for the Contact Form.
2. Paste the CSS Selector into the Field ID of the Input created in Divi.
3. Click Save/Publish.

That’s it! You’ve successfully integrated a Divi Contact Form with the Date and Time Picker by Input WP.

Community FAQs

1. Can I apply different custom styles for each field I create?
2. Can I use the same field for two different forms?