How To Add A Date and Time Picker To The Divi Contact Form
Set Appointments or Calls with The Divi Contact Form!
I may be a minority, but I love the Divi Contact Form module. It’s very fun to edit and hack, and I have another tutorial on that that you should definitely check out since it has some ideas that will really complement this one well. Anyhow, I often wondered how to add a date picker to the Divi Contact form. I wanted this so that I could allow our website visitors to schedule a call. I’m please to show you how we did this with a very simple solution.
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.
Please share this post!
Hey, that’s a great one!
Thanks Samar!
This is really a great tutorial! I’m trying to find something that will allow you to pick an arrival date and departure date (no times). Any suggestions?
I’m not a coder and finding it difficult to find an easy solution.
~ Vicki
Hi Vicki,
Yes, I believe you can do that easily with this same method. Just uncheck the option for “show times” in the plugin settings. You will probably need to create two separate fields in your form, one for arrival and one for departure.
I like the way you show how to use the date-time picker.
There two things I would like to know, is there a way to make a separate fields, one for the date and the other for time? And is it possible to change the placeholder text to something custom in stead of the current date/time?
Thanks for the fine tutorial.
Hello Hans,
I’m not sure how to make them separate fields or how to change the placeholder text. Sorry about that!