All Collections
Divi Documentation
How to add a Date and Time picker to the Contact Form module
How to add a Date and Time picker to the Contact Form module

Adding a Date and Time picker on the Contact Form module

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

By default, the Contact Form module allows only the following types of fields:

  • Input Field - used for regular text such as first name/last name

  • Email Field - used for entering email address

  • Text Area - used for Messages, usually long strings of text

  • Checkboxes - used to create multiple choices where the user can select multiple choices

  • Radio Buttons - generally used in radio groups—are collections of radio buttons describing related options.

  • Select Dropdown - generally used to represent a control that provides a menu of options.

To be able to have a date and Time picker inside the Contact Form module, a 3rd party plugin will be required. The plugin used in this article is called Divi Contact Form Helper, and it can be downloaded from Elegant Themes Marketplace.

Adding Date and Time Picker to the Contact Form module using the Divi Contact Form Helper plugin

  1. Download and install the plugin

  2. Edit the Contact Form module

  3. Add a new Field by clicking on the Plus icon

  4. Set the field ID and Label

    Set the Field ID and Label

    Note: Make sure the Field ID only contains English characters, without any empty spaces. For the Label, you can use any text you want.

  5. Open the Field Options group and ensure that the Field's type is set to Input Field

    Set the Field type to input

  6. Scroll down and open the Date Time Settings

    Date Time Settings

  7. Enable the Use as Date/Time Picker option

    Enable the Date/Time picker option

  8. Save the Module Settings by clicking on the Green checkmark button.

This is how it will look like on the website, as in the below image:

Date and Time picker on the frontend

For a full list of features the Divi Contact Form Helper offers, check the plugin's documentation page.

Did this answer your question?