How To Add A Date and Time Picker To The Divi Contact Form
1. Add A New Field
In a Divi contact form of your choice, click to edit the settings. Click on the “Add New Field” plus icon. The Field Settings will open with an input field for Field ID as well as Title. You can write something like “Choose a Date and Time” in the title field, that isn’t important. The most important part is the Field ID. Add the following CSS class there and save the form.
2. Add A Simple Plugin
Now that you have set the Field ID in the Divi Contact form, let’s go to the WordPress Dashboard and add a new little plugin. Go to Plugins>Add New and search for, install, and activate the plugin called Date Time Picker Field.
3. Adjust The Settings
Next, we need to add a simple line of code to the plugin settings.
Go to Settings>Date & Time Picker and paste in the following line:
It will look like this image below when you are finished. Be sure to save that.
Those are the most important parts for the tutorial that I need to show you. The rest of the settings need to be configured to your preferences. I suggest looking down through the basic and advanced settings to make sure the days, times, etc. are set how you want them.
4. Optional Design Improvement
We are using the method described in this tutorial on our call scheduling contact form. We hacked up the plugin styles a lot, and have pasted that code below for you to use if you want. You can customize the colors, etc. to your liking and past this in the Divi>Theme Options CSS box.
The image below is how our contact form date and time picker looks.
Subscribe and Share Your Comments!
We had fun creating this for you. If you found it useful, you can subscribe with confidence knowing we make pretty cool stuff and will not spam you.