fbpx

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.
  1. Here, you’ll find the form editor with predefined fields. You can keep them, or start from scratch by deleting them all.
  1. Now, select the text field option aligned at the top of the editor. 
  1. Once you click the available option, a popup will open to enter further details about the field.
  1. 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. 
  1. 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.
  1. Once added the class attribute, click the Insert Tag button. 
  1. 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

14 Responses

  1. greetings Sahil,
    if I change date format (from yyyy/mm/dd to dd/mm/yyyy) at submit date field not pass validation: “wrong date format”. What can I do?
    thanks

    1. Hello Gianluca,
      This happens because the form in which the datepicker field is embedded doesn’t allow such a format. The validation rules aren’t given by our plugin.

  2. Hello, I have inserted the timepicker according to your instructions and when sending the message it gives an error with wrong fields.

    Attached link in case you can provide me with information. Thanks

    1. Hellow Darwin,

      Yes, we are working right now on that new feature so you can block dates from the calendar and sync both ways.
      You can go and fill up your details in here to get notified when we release.

      Thank you for the kind words.

  3. Hi! I have made a date and time picker but on my contact form it is automatically open. I was hoping to have it so that when a user clicks the date box the calendar pops up, just like in your version. Any idea how I could do this? Thanks!

    1. Hi Roisin,

      Did you check if it is accidentally selected to “Display inline”?
      Technically if that checkbox is selected, the dropdown panel should show from the getgo.

      Let me know if this solved the issue.
      Thank you!

  4. Hello, I followed your instructions, step by step. But the calendar (date and time) does not appear online (Contact Form 7). Instead, there is a blank (empty).

Leave a Reply

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