How to Integrate the Date and Time Picker With Contact Form 7

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 install the following plugins to do the job successfully. 

1. Contact Form 7 
2. Date and Time Picker by Input WP

1. Create a Contact Form in CF7

1. Go to Contact → Add new.
2. Insert a text field with a unique name rather than generic text-nnn (where “nnn” represents numeric value).
3. Save the Form.

2. Create a new Event in Input WP (available only in PRO)

1. Go to Input WP → Add 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 Contact Form 7

1. Go to Input WP → Integration → Form Integration → Add new.
2. Then, go to the Introduction section → input Label text (text used only to identify the integration).

3.A. Automatic integration (available only in PRO)

1. Introduction: Select the Method  → Contact Form 7 → click Next to pull the list of Forms created in Contact Form 7.
2. Connect: Select the Contact Form you just created in Contact Form 7 → Select the Event created in Input WP
3. Identify: Match the input fields from the Contact Form 7 with Guest, Email and Date picker (Event).
4. Click Save.

3.B. Manual integration

1. Go to Input WP → Integration
2. Copy the CSS Selector → Click Save (You can update the CSS Selector too. Make sure you use the dot “.” before the new name).
3. Go to Contact → Identify the Contact Form that you want to integrate with Input WP.
4. Paste the CSS Selector in the input field’s Class Attribute field. The input field should look something like [text text-nnn class:CSS-SELECTOR]
5. Click Save.

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

Community FAQs

• Can I uninstall the Date and Time picker plugin after integration?
• If, after creating an automatic field, would I be able to create a manual one also?
• Can I create multiple fields in a single form?
• Can I export the data to external calendars?