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. 

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 WPIntegration
  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 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. 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?

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