How To Add A Date and Time Picker To The Divi Contact Form Module Tutorial by Pee Aye Creative

How To Add A Date and Time Picker To The Divi Contact Form

Here's a super easy and very practical way to add a date and time picker to the Divi Contact form module. This is a great way to allow appointment bookings!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Install The Divi Contact Form Helper Plugin

The first step to set up the date and time field in the Divi Contact Form module is to purchase, download, and install the Divi Contact Form Helper plugin. Please note, this feature is not included in Divi and is impossible without our plugin, so we hope you enjoy this exciting feature!

Divi Contact Form Helper by Pee Aye Creative

FYI: Our plugin adds settings directly to the existing Divi contact Form module, which is super awesome and unique!

2. Add And Set Up A New Date/Time Picker Field

Add A New Field

After installing and activating the plugin, the next step is to add a new field to your new or existing Contact Form module. Open up the module settings window where you will see a list of fields that are already added. Here you can add a new field by clicking the Add New Field (+) button.

Add new field in the Divi Contact Form

Clicking on the add new field button will open an inner window with all the options for that particular field. There are a coupon of things to note here.

The Text toggle will automatically be open first by default. You can complete these options according to your preferences.

text screen when adding a new field using the Divi Contact Form Helper plugin

Next, open the Field Options toggle and double-check the Type dropdown. This should already be set to Input Field by default, but if not, make sure it is selected. (This may seem confusing, but it’s not possible for our plugin to add an actual new field type, so we need to select Input Field and then modify it with other custom settings.)

Divi Contact Form field type selector 1

Enable The Date/Time Picker

The main step inside the inner field settings is to locate the Date Time Settings toggle and open it.

inner screen when adding a new field using the Divi Contact Form Helper plugin

Inside the Date Timer Settings toggle in the General tab you will see a new setting which is added by our Divi contact Form Helper plugin called “Use As Date/Timer Picker.” Change this toggle to YES to enable the date and/or time picker settings.

date and time picker settings in the Divi Contact Form Helper plugin

3. Adjust the Date/Time Picker Settings

When you enable the Use As Date/Timer Picker setting, it will immediately show all the plugin’s custom settings related to setting up the date picker and/or time picker. There are many, many options to choose here, so take your time and explore them and adjust anything to suit your needs and preferences.

General Settings

The General tab is where you choose things like whether this is a date picker, a time picker, or both combined. Here you can select from a list of format options. You can choose to show the date/timer picker inline, meaning it shows on the page without clicking into the field, or leave it off to show when you click. There are language options and an option to set the current date and time as the placeholder.

all the date and time picker settings in the Divi Contact Form Helper plugin

Date Settings

This Date tab has everything related specifically to the date picker. Here you can input a custom date format, choose the week start day, select any days of the week you want to disable, disable past and current dates from being selectable, set minimum and maximum dates that can be selected by a relative number or a fixed date, and set specific dates that are available or unavailable.

date picker settings in the Divi Contact Form Helper plugin

Time Settings

This Time tab has everything related specifically to the time picker. Here you can input a custom time format, input a minimum and maximum time that is allowed to be selected, set specific times of the day that are available or unavailable, and choose the time steps in minutes between each available time. (*NOTE we plan to add more features here for setting times per day.)

time picker settings in the Divi Contact Form Helper plugin

4. Adjust the Date/Time Picker Design Styling

As if all those functionality settings were not enough, we also provide hundreds of design settings to style and customize every aspect of the date and time picker.

General Design Settings

The General tab is where you style the overall date/time picker container and includes all the standard options like background color, margin and padding, border settings, and box shadow settings.

general design settings for the date and time picker in the Divi Contact Form Helper plugin

Date Picker Design Settings

This Date tab has all the styling options related to the date picker. This includes a crazy amount of options, and there’s too many to list, so have a look and see that everything has settings for it! 

date design settings for the date and time picker in the Divi Contact Form Helper plugin

Time Picker Design Settings

This Time tab has all the styling options related to the time picker. Just like for the date picker, we include every setting imaginable, so check the screenshot and you will see you can customize everything!

time design settings for the date and time picker in the Divi Contact Form Helper plugin

Last updated Dec 6, 2022 @ 12:26 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

19 Comments

  1. gio

    Very useful and interesting.
    Your items are always of superior quality.
    Congratulations, it was useful for a customer.:-)
    Thank u buddy!

    Reply
  2. Christina

    Thank you for the detailed tutorial. It really helped!

    Reply
  3. JAke

    Hi there
    When I activate the plugin, I get this error message on the error log:

    PHP Fatal error: Maximum execution time of 30 seconds exceeded in /var/www/htdocs/wp-content/plugins/date-time-picker-field/includes/DateTimePicker.php on line 431

    The site will not load when the plugin is activated. Do you know why?

    Thanks

    Reply
  4. Luis Maia

    Hi Nelson, I have use this plugin a couple of times and it really solve the problem.

    Reply
  5. chris

    You Rock ! Awesome, thanks for your great job

    Reply
  6. Yash patel

    Hey, it’s really good stuff. I find booking slot system for saloon
    and suddenly I find this guy !!!!

    Reply
  7. Hallie Halpern

    thank you so much!

    Reply
  8. Emrah

    hello, where can he change the time format

    Reply
  9. Tobias

    Nice! Thanks

    Reply
  10. Oluwatosin

    Thank you for this awesome tutorial. Keep up the good work.

    I followed your tutorial using the contact form and it worked for me. Thank you.

    Also, I installed Popup for Divi plugin but it didn’t work.

    Could you give me a guide, please?

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart