Tag Archive: contact form 7 hook

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!

Change the form recipient in Contact Form 7 before sending mail

March 19, 2019

In some cases, I want to simplify the process for clients to change their contact form recipient address.  Rather than have them directly modify the Contact Form 7 settings, I would prefer if they changed the “To” setting when editing the contact page, or the site settings, or something else.  In my case, Advanced Custom Fields always provides a better editing experience to accomplish this.

To the short and sweet, add this to your theme’s functions.php  file:

Let’s talk about what’s happening here.

The wpcf7_before_send_mail is very powerful and allows you modify tons of things before the email sends.  You are creating a custom function here to change what those modifications are.  In this case, we are changing the recipient.

Now, I had mentioned before that I use Advanced Custom Fields to change how someone would update this, so let’s look at how to do that.

Let’s say that I have a contact page and that’s where I would like my client’s to edit the recipient address.  First, I would need to set up a Field Group for that page, and then create a field for them to enter that email address.  Let’s call it “Recipient” and the field name will be “recipient”.

The next part is determining how to grab that field value if we are outside of a loop. In ACF’s case, it’s very simple, but it is completely dependent on your site.  Simply put, you will need the POST ID of your page.  How do you find that?

Easily enough, you can find it in the URL when you are actually editing the page.  It would look just like this:

That “###” is your Post ID.  You can now call your “Recipient” field value outside of the loop:

Let’s put this all together in our function to make it dynamic:

Now, whenever someone edits the “Recipient” field in the Post you selected, the email address will get updated before the email sends out.  If it is left blank, CF7 will use the traditional “To” field to determine the recipient.

There is a ton more customization you can accomplish with this hook.  Don’t be afraid to explore more and have more control over the editing process you provide for your clients.  Thanks, and happy coding!