fbpx

Documentation

General

Form integration

Theme

Sync calendar (Import)

Sync calendar (Export)

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. 

 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 Event in Input WP

  1. Go to the Input WPAdd New.
  2. Input field Title. Then, select the Type.
  3. Adjust any specific settings for the Date and/or Time Picker.
  4. Once selected, click Publish.

3. Integrate with Divi

  1. Go to the Input WPIntegrationForm IntegrationAdd New.
  2. Input Label text (this will be just an identifier for you).
  3. Select the MethodManual
  4. Click to Generate the CSS Selector.
  5. Paste data-original-id='CSS-SELECTOR' into the Field ID of the Input created in Divi. Replace CSS-SELECTOR with the CSS Selector just created.
  6. Click Save.

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?

If you have more questions, use the public forum (for the Basic plugin), or submit your support ticket (for PRO users).