In this tutorial, we’ll see how we can integrate the Date and Time Picker with Gravity Forms 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.
- Gravity Forms (Basic/Pro/Elite)
- Date and Time Picker by Input WP
1. Create a Contact Form in Gravity
- Go to Forms (Gravity) → New Form
- Insert a Single Line Text field into your Form → define the Field Label to be easier to be identified → Click Update.
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 Gravity Forms
- Go to Input WP → Integration → Form Integration → Add new.
- Then, go to the Introduction section → input Label text (text used only to identify the integration).
- Introduction: Select the Method → Gravity Form → click Next to pull the list of Forms created in Gravity Forms.
- Connect: Select the Contact Form you just created in Gravity Form → Select the Event created in Input WP
- Identify: Match the input fields from the Gravity Form with Guest, Email and Date picker (Event).
- Click Save.
That’s it! You’ve successfully integrated Gravity Forms with the Date and Time Picker by Input WP.
Community FAQs
- Will Date and Time Picker work with all versions of Gravity Forms?
- Can I use multiple fields in a single form?
- Is the Single Text Line field necessary, or it would work in any field such as Paragraph Text, Number, Name etc.