Tag Archive: contact form 7

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!

Use Contact Form 7 To Post Rows to Advanced Custom Fields Repeater

April 17, 2015

I was in a particular situation where I needed a task management system that could take fields through a form from Contact Form 7 and post them to rows in the Advanced Custom Fields Repeater field I set up.  The idea was to use a form from the front end of WordPress to post to the back-end of WordPress in a custom field.  You can accomplish this by adding code to your functions.php file in the WordPress theme.

This example assumes that you already have a form set up through Contact Form 7 and you have already purchased the Advanced Custom Fields’ Repeater Field plugin.

1. Get Your Field Key

You can grab your field key from the ACF Repeater Field by selecting ‘Show Field Key‘ from the Screen Options.  You will use this in your function to determine which field to add rows to.

cap1

 

 

2.  Add WPCF7 Before Send Mail Hook

You add the function below to your functions.php file within the theme.  You are hooking into Contact Form 7’s “wpcf7_before_send_mail’ function to grab the post data and post it to a WordPress repeater field as a new row.

Obviously, your fields in the form and the repater field may be different.  The important things to take away from this functions script is that:

You’ve created the hook:

 

You’ve got the URL and ID of the post the form was submitted through:

 

You got the data from the form:

 

And you update the repeater field based on those elements:

Hope that helps!  Don’t forget you can always extend this to a plugin as opposed to a theme function as well.