ī‚£

Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
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!

ā–¶ļø Please watch the video above to get all the exciting details! šŸ‘†

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

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins ā€¢ Courses ā€¢ Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

ī‚£

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

25 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. Jemma Pollari <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    You’ve done it again sir! Glad I purchased the lifetime of Divi Adventure Club – keep finding more and more things you’ve made easier šŸ™‚ Thanks!

    Reply

Comments By Others

  1. matt

    Hi Nelson!

    I’m encountering an issue with the Divi contact form date picker on my website.
    Visitors can book the same date and time multiple times.
    How can I prevent this?

    Your help is appreciated.

    Reply
    • Hemant Gaba

      Hi Matt!

      How many date pickers are you using in the form?

      Reply
  2. Frank

    Howdy! I have to place some compliments now. I have been using divi for some serveral years now so i can defenitly say:
    this is another excellent plugin by pee-aye creative! splendid! A transatlantic Big Thank You from germany!
    Equal goes for the Tab-Plugin.

    Reply
  3. 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
  4. Tobias

    Nice! Thanks

    Reply
  5. Emrah

    hello, where can he change the time format

    Reply
  6. Hallie Halpern

    thank you so much!

    Reply
  7. Yash patel

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

    Reply
  8. chris

    You Rock ! Awesome, thanks for your great job

    Reply
  9. Luis Maia

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

    Reply
  10. 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
  11. Christina

    Thank you for the detailed tutorial. It really helped!

    Reply
  12. gio

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

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart