Date and Time Picker field on Contact Form 7

In this tutorial, we’re going to see how easily we can create our date and time picker field on a Contact Form 7 using the Date and Time Picker plugin. 

The Date and Time Picker plugin provide you with the intuitive options that allow you to easily convert your input fields into a date picker calendar and time picker field. 

By following the below mentioned easy instructions, you can quickly convert input fields into date time picker fields in no time.

So, without any delay, let’s get started!

Step 1: Make Sure You’ve Activated Both the Plugin

Before we start creating a date time picker field on a form created using Contact Form 7, it’s best to check that both the plugins are active and working fine. 

Go to the Plugins on your WordPress Dashboard, and then Installed Plugin to check the status.

If everything’s fine, you can move to the next step.

Step 2: Create your first Date Time Picker Field and save the CSS Selector

Prior to creating our contact form, we should assign a class name to the CSS Selector and define some rules for the date time picker field.

• To do that, go to Settings on your WordPress Dashboard. Then, click Date & Time Picker.

• It will open the complete options of the Date and Time Picker plugin. 

• Now, go to the CSS Selector field, and input your class name with a dot (.) prefix for the date time picker field.

• The class name I’ve assigned to the CSS Selector is “.DatePicker” the same as the above screenshot. You can input any name you like.

• Once added to the class name, you can explore the remaining Basic Settings and define your date time picker field rules. 

• After defining rules in the basic settings, click Save Changes at the bottom of the page, to apply all the modifications. 

• If you want to disable certain weekdays from the date picker, go to the Advanced Settings. It provides you with multiple options to apply on the date and time picker.

• Go to the Disable Week Days to disable weekdays and tick the checkbox next to the week name you want to disable.

• You can explore the remaining Advanced Settings and define rules for your date time picker field. 

• After defining rules, click Save Changes at the bottom of the page, to apply all the modifications. 

Let’s move to the next step of creating a contact form with Contact Form 7.

Step 3: Create a Form With Contact Form 7

Now, to create a date calendar and time picker field, we need to create a form. Follow the below steps to create one.

1. On your WordPress Dashboard, go to the Contact → Add New.

2. Here, you’ll find the form editor with predefined fields. You can keep them, or start from scratch by deleting them all.

3. Now, select the text field option aligned at the top of the editor. 

4. Once you click the available option, a popup will open to enter further details about the field.

5. Enter details as required. However, don’t forget to input the class name we’ve used in the Date and Time Picker settings to convert the input field into a date time picker field. 

6. Go to the Class attribute, and input the class name without any prefix. I’ve removed the prefix and my class name is now DatePicker the same as the below screenshot.

7. Once added the class attribute, click the Insert Tag button. 

8. Then click Save. 

That’s it; you’ve successfully created a form with a date time picker field using the Contact Form 7 and Date and Time Picker plugin. 

Go to the page where you’ve added the form, it will work like the below illustration. 

Conclusion 

So, this is the easiest way to create a date and time picker on a Contact Form 7.

If you’re still facing issues and unable to get it to work, let me know in the comments. I would be more than happy to help you. 

Want to add more useful features to your Date and Time Picker fields? Then go and get the Date and Time Picker Pro