Date and Time Picker field on Contact Form 7

Most websites online will need a contact form and Contact form 7 is without any doubt one of the most popular plugins on WordPress with 5+ million active installations and growing. It’s amazing how simple and versatile the plugin is, allowing any form to be extended using simple tricks.

The plugin comes with support for ‘date’ fields, but for some projects you might need a datetime field. I have developed a plugin that can help you with this and I’ll explain how you can use it with CF7.

Install the Date Time Picker Field

Although the plugin was not built to work directly with CF7, it’s compatible with any form you might have on your website, Contact Form 7 included. You’ll just need to follow some simple steps.

Add a normal text field to your form

The first step is to build your form. For the fields you want to convert into datetime fields, simply use text fields. You can name the field whatever you want, but you will need to pay attention to the class name you add:

It doesn’t necessarily need to be ‘datefield‘ it just needs to be something unique and that you remember after, when setting up the Date and Time Field plugin.

Setup Date and Time Field plugin

Once you have your form, you need to go to Settings > DateTime Picker. In the CSS Selector option, add the name of your class, preceded by a . (period). In this case .datefield This will be the css selector the plugin will use to look for the field and convert it into a date and time field:

And that’s it! You can explore the other settings available in the plugin to optimize the date time picker.

The plugin in the future might include a direct integration with CF7 if this becomes a popular request. Leave a comment if you have any suggestion or request.

How to add support for a Custom Post Type on Yet Another Related Posts Plugin (YARPP)

One of the most popular related posts plugins for WordPress is YARPP with more than 200.000 active installations. It says it supports Custom Post Types (CPT), but not out of the box. You’ll need to do some extra things in order for your CPT to be supported.

If you have access to the functions that register the CPT, then the solution is simple. You’ll just need to include the argument ‘yarpp_support’ and set it to true when you register it.

https://gist.github.com/carmoreira/2d59b7aa2393d133e55473c0bcd269d3

If you don’t have access to the code where the CPT if registered, maybe because it’s a third-party plugin that is creating it, you can still try to manipulate the arguments used to create that CPT and add the ‘yarpp_support’ argument. You can use the code below:

https://gist.github.com/carmoreira/a377c38521bfe142189f7f0690a39a12

You should replace ‘my_custom_post_type’ with the identifier you need and add the code to the functions.php of a child theme or your own plugin. This seems to work well on my projects.

Hope this helps someone!

Date picker in Divi Contact Form

Divi is one of the most used themes on WordPress and one of the latest updates introduced a ton of new features for the Contact Form module. However a simple yet useful input type missing is a date picker. Might not be used by the masses, but it’s very useful for some cases. For a recent project I needed to build a contact form that would work as a booking request form, so a date picker field would be a valuable addition to the arrival and depart date fields. I have developed a plugin that allows you to do this and also has the extra option of enabling a time picker.

With this plugin enabled, what you need to do is give a unique Field ID to your field, when editing the field you want to convert to a date picker, in the Contact Form module. For my project I used ‘date-arrival’ and ‘date-departure’.

Then you’ll use those IDs to tell the plugin which fields to convert to date pickers. Go to Settings > Date Time Picker and add the following to the ‘Selectors’ field:

input[data-original_id='date-arrival'],input[data-original_id='date-departure']

Basically you’ll need to add input[data-original_id='your_field_id'] to the selectors field and repeat that if you have more fields. If you copy/paste the code from here, make sure to re-write the ‘quote’ signs, since they might get changed in the copy/paste.

When you save these changes you should have your contact form fields converted into date pickers.

Here are some screenshots of how I implemented the date and time picker in the field.

Not so hard, right? Hopefully Divi will include a date-picker or date-time-picker option for the contact form fields at some point, but until then these workarounds are easy enough to implement.

WordPress Customization Services I can vouch for

I’ve been working with WordPress for 10 years now and although it’s a powerful tool that allows you to do almost anything, there’s always some small detail you can’t customize or a feature that you can’t find in a plugin. That’s why WordPress customization services are needed.  I did a lot of customization services and still do once in a while, but I had the chance to work with some developers that are good and reliable that I can recommend. Here’s a list of the top WordPress Customization services I recommend:

1) WPKraken Team

I worked a couple of times with WPKraken, a reliable and trustworthy team of in-house WordPress experts with years of experience that can do everything, from the smallest task to bigger projects. They charge a fair $50 flat hourly fee and have a platform that makes it easy to describe your needs and get a quote. I can vouch for this team and I strongly recommend them. Some of the things they can do for you:

  • WordPress Theme and Plugin Installation
  • CSS/Visual Fixes
  • Security Improvements
  • Website Audit
  • Website Migration
  • Plugin Customizations
  • Theme Customizations
  • Logo Design

2) Envato Studio

Envato Studio is site in the same network of Envato Market, where I exclusively sell my plugins. So it isn’t a surprise that I would also recommend this service. This platform allows hand-picked freelancers to provide their services, that range from design, to development. The platform displays the ratings of the different service providers so you know what other users think of them. Prices start at $50 and these are some of the services you can find:

  • Plugin and Theme Instalations
  • Plugin and Theme Customizations
  • Server Migration
  • WordPress Multisite/Network instalation
  • SEO Services
  • Full WordPress Website Setup