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.
pa-date-time-picker
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:
input[data-original_id='pa-date-time-picker']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.
.xdsoft_datetimepicker {
box-shadow: 0 15px 40px 6px rgba(0, 0, 0, 0.1)!important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
background: #2cba6c;
box-shadow: #2cba6c 0 1px 3px 0 inset;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default:hover {
background: #e03574!important;
box-shadow: #e03574 0 1px 3px 0 inset!important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
color: #e03574!important;
}
.xdsoft_datetimepicker .xdsoft_datepicker {
width: 350px!important;
}
.xdsoft_datetimepicker .xdsoft_timepicker {
width: 100px!important;
}
.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
background: #ffffff;
border: 2px solid #ebf8f1;
}
.xdsoft_datetimepicker.xdsoft_noselect.xdsoft_default {
padding: 20px;
border-radius: 10px;
border: none;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {
background: #ffffff;
border-top: 2px solid #ebf8f1;
color: #333;
font-size: 16px;
text-align: center;
border-collapse: collapse;
cursor: pointer;
border-bottom-width: 0;
height: 36px;
line-height: 36px;
padding: 0 8px;
}
.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
background: #ffffff;
border: 2px solid #ebf8f1;
color: #333;
font-size: 16px;
height: 36px;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
border-bottom: 2px solid #ebf8f1;
}
.xdsoft_time_box {
border: 2px solid #ebf8f1;
}The image below is how our contact form date and time picker looks.
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!
Yes Hans, on the plugin’s basic settings you can mark “keep placeholder” and it will display the text that you put on the form.
Thanks Elba, I totally missed that!
This filed does not have a placeholder option… How can we fix this? Pretty useless if we cannot change the placeholder…
Hi Williem,
Just enable the hidden labels instead like in this other tutorial: https://www.peeayecreative.com/how-to-move-labels-above-input-fields-in-the-divi-contact-form/
Hi and thanks for the tips!
Everything is working well for me.
However I am wondering if you have any idea why it doesn’t work when I put the additional CSS in my child theme CSS sheet (instead of the parent one) ?
Thanks
Thomas
Hey Tom,
It could be a number of factors, such as the enqueuing method, cache, and loading hierarchy. I’ve had issues with this for some things such as WooCommerce styles, for example, they work perfectly in the Divi Theme Options because they have a higher priority, but in my child theme stylesheet, they don’t work.
Hey – this is awesome thanks – I can see the date/time picker populating but it’s behind some other layers/overlayers – any ideas on how I can ‘bring it to front’ essentially?
Thanks,
Tom
Hi Tom,
I’m not really sure what you mean as mine is working fine. Perhaps with a link I can take a look.
add the z-index CSS rule, and set it very high.
Hi,
Great tutorial.
I was looking for the option of adding a date Picker inside the Divi Contactform.
Date for arrival and departure.
In this case, your original (Divi) text will be override by the date.
So a client can’t see were to fill in date for arrival or departure.
Hi Gerard,
If I understand correctly, you mean the placeholder text changes. In that case, try using labels with this tutorial as well: https://www.peeayecreative.com/how-to-move-labels-above-input-fields-in-the-divi-contact-form/
Nelson, Thanks for your response.
The plugin and the CSS did the trick.
I’m satisfied.
Thanks again.
That’s wonderful, Gerard! So glad we could help!
Very useful and interesting.
Your items are always of superior quality.
Congratulations, it was useful for a customer.:-)
Thank u buddy!
Thank you Gio, your kind words and feedback are greatly appreciated!
Thank you for the detailed tutorial. It really helped!
Hi Christina, I’m so glad you like it! You are most welcome!
Hi. Thanks for this tutorial, really crazy. I ask you one thing: do you think you could use a field id where to show only the date and another where to show only the time? Thanks so much
Hi Gio,
I have looked for that before but don’t know how, sorry.
I have seen that on Smartphone the data module exits the screen. Did you notice it?
Tnx
Okay, might need to adjust the widths.
Hi there! Thanks for this tutorial. I would love to implement it, HOWEVER it is not mobile-friendly. When you are on a cell phone, the date picker calendar hangs off the side of the phone screen and you can’t get to the rest of the dates. I went to your actual website to try it on my iPhone and it’s off the side of the screen. Do you have any code you could update this tutorial with in order to make this mobile friendly? If it doesn’t work well on cell phones, it’s not really a complete solution for me.… Read more »
Hi Mark,
Just change anything that says “width” in the CSS to your liking.
Thanks. I went in and implemented this on a test website this morning. If you don’t add any width information, the picker fits on a phone just fine. I decided to go in and give it a defined width of 325px so that it’s guaranteed to fit down to an iPhone 5. Also, I discovered that you can pretty much get away without using !important tags if you just put “body .xdsoft_datetimepicker” at the beginning of each CSS selector. The only times I had to use important was when adjusting hover colors. For some reason, the dev used their own… Read more »
This is a great plugin! I was wondering if how could it work if the form has 2 fields that require date and time like “Start date (field 1) and End date (field 2)?
Thank you!
Hi Vic, I’m not sure, if it’s possible I don’t know how.
Hello, date time Picker plugin is a greet one.
Please what I have to do to make clendor, time mobile responsible?
thanks
Hi Bassam,
You can change any of the numbers that say width: to whatever you want. You can do this just on mobile with media queries. You can learn more about them here: https://www.peeayecreative.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/
Thank you very much for your reply.
I have treid with this syntax:
.et_xdsoft_datetimepicker .et_xdsoft_timepicker .et_xdsoft_time_box {
display: flex;
justify-content: center;}
but no changes, the same problem, can you pls help me.
I attached shott screen, thats shows the situation on mobile
I’m not sure why you did that. Just do what I said in the previous comment and you will be fine.
thank you for your recommendation. It works
Wonderful!
Hi! I’m wondering how I would use this plugin for 2 fields in the same form. I’m not sure how to use the selector for 2 differences ids.
Hi Audrey,
I really don’t know, it’s not my plugin I am just showing how I did it.