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!

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.

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.

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.)

Enable The Date/Time Picker

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

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.

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.

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.

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.)

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.

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! 

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!