August 31, 2020
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.
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.
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:
add_filter( 'wpcf7_posted_data', 'change_update_time_form', 10, 1 );
$time = $array['event-time'];
$updatedTIME = date('h:i a',strtotime($time));
$array['event-time'] = $updatedTIME;
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”.
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.