Add A Time Input to Contact Form 7 Without A Plugin

August 31, 2020

The Contact Form 7 plugin does not inherently support the time attribute for an input field. As of version 5.2, you can use the native HTML5 date input field (and all of the UX that browsers provide that come along with it) but you cannot set up a time field with the same features.  I prefer using the HTML5 date and time fields for these input configurations rather than a Javascript library.  Though not fully supported, it still does have a considerable amount of browser compatibility and I believe that is the way things are headed.  It’s very likely that the plugin will begin to support and include this field type in the future, but for now, let’s look at how to include this in our form.

This post assumes you have some knowledge about Contact Form 7, some coding skills, and knowledge of your WordPress theme.

Step 1: Add A Field to your Form

We are going to include the field we would like to make a time input field type in our form.  You would perform this the same way you normally do for a text field, but in this case, you would like to give it an ID.  In this case, it will be time-field .  I also gave the field a name of my-time-field  which I will reference later.

Step 2: Change The Property Type With Javascript

Now that we have our field, we are going to use jQuery to change the property type of the input field based on its ID.  This is the same ID you provided in the prior step.

Take the code below and place it wherever you place your theme’s custom Javascript.  This could be in your theme settings or in a file in your theme that is called.

You would like this to occur on $(document).ready()  to once the form is called, you will immediately switch the input field from text  to time  and now the browser will respond accordingly.

This would be good enough for some, however, when Contact Form 7 sends the form submission via email, it will have that field value as a long string.  Something like “YYYYDDHH” and that may not necessarily be legible for your client/user to receive.

That leads us to our next step.

Step 3: Modify the Time Value Before Sending

Here we would like to change the returned value of our new time input field to something legible that a user can understand and interpret.  Since it is returning as a big long string, we can use a little PHP and tap into Contact Form 7’s hooks to modify the value before it is sent in an email.

Place the following snippet in the functions.php file of your theme:

Let’s discuss what is happening here.  The wpcf7_posted_data  filter will allow you to tap into the returned values of your form before it is sent.  In our case, we are looking for a field in the array with the name my-time-field .  Once we have that value, let’s use the PHP functions strtotime()  to parse the value as a time value and then use the date()  function to manipulate it into a format we’d like.  In my case, it will return as the 12-hour with AM/PM meridiem format.

In the email, the recipient will see the time as something like “8:23 AM”.

Conclusion

I hope this helps get you on the right track towards including a time field type in your forms going forward.  Though I find it very likely there will be more support in the plugin going forward, I believe this method is sufficient in getting that accomplished.  Please leave any questions or concerns in the the comments below.

Happy Coding!

Leave a Reply

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