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.
Please make sure to install the following plugins before you proceed.
1. Create a Contact Form in Divi
- Deploy Divi Builder → Insert Contact Form module → Insert a new field
- Save the form.
2. Create a new Event in Input WP
- Go to the Input WP → Add New.
- Input field Title. Then, select the Type.
- Adjust any specific settings for the Date and/or Time Picker.
- Once selected, click Publish.
3. Integrate with Divi
- Go to the Input WP → Integration → Form Integration → Add New.
- Input Label text (this will be just an identifier for you).
- Select the Method → Manual
- Click to Generate the CSS Selector.
data-original-id='CSS-SELECTOR'into the Field ID of the Input created in Divi. Replace CSS-SELECTOR with the CSS Selector just created.
- Click Save.
That’s it! You’ve successfully integrated a Divi Contact Form with the Date and Time Picker by Input WP.
- Can I apply different custom styles for each field I create?
- Can I use the same field for two different forms?