Contact Form 7 Date Field to show Calendar Date Picker in Firefox

- - Web Development

Contact Form 7 Date Field to show Calendar Date Picker in Firefox

From past few posts we have been focusing one of the most popular contact form plugin in WordPress and Yes it is Contact Form 7 and in today’s posts i will show you how you can make Contact Form 7 Date Field to show Calendar Date Picker in Firefox, Why i am saying Firefox because it does work in Chrome and some other modern browsers but not in Firefox.

How to do this?

There are two ways to do so

1. Use a plugin
2. Custom method (by including small piece of code)
Honestly i do not like to use so many plugins while creating a WordPress website just because of compatibility issues an moreover plugins do add a lot of code on our server which again can create speed issues for our website and at the end of this post you will see that what we are going to achieve in this post does not need any extra plugin at all.

Let’s get back to our topic and Install and activate Contact form 7 plugin and create a form with a date field. Save the form place the form’s shortcode on any page and open the page in Chrome browser and you will notice when you click in the Date field it displays a calendar style date picker and you can select date from this calendar, now open this page in Firefox and click on the Date field and you will see it does not display a calendar date picker just like the Chrome instead it shows a simple and boring text field.

The solution for this is really easy by placing a short piece of code in your functions.php file, so go ahead and from your theme files locate and open functions.php and place the following code some where in your file or better place it at the end of the file.

Here is the code

add_filter( ‘wpcf7_support_html5_fallback’, ‘__return_true’ );
Now save the file and refresh your Firefox and click on the date filed and that’t it, it will now show you a calendar type date-picker.

Please note that old browsers and even some modern browsers partially support these HTML 5 input types like(date, color,url,number etc..)

I hope you enjoy the post and if you like the it than please don’t forget to share it with your friends because Sharing is Caring 🙂

Contact Form 7 Date Field to show Calendar Date Picker in Firefox

Contact Form 7 Date Field to show Calendar Date Picker in Firefox

Contact Form 7 Date Field to show Calendar Date Picker in Firefox

Contact Form 7 Date Field to show Calendar Date Picker in Firefox
Contact Form 7 Date Field to show Calendar Date Picker in Firefox

Contact Form 7 Date Field to show Calendar Date Picker in Firefox
7 Date Field to show Calendar Date Picker in Firefox
maniwebify

Contact Form 7 Date Field to show Calendar Date Picker in Firefox


Arslan Malik

There Are 1 Comment On This Article.

  1. Theresa Watson

    Hello,

    Are you thinking of making any upgrades/changes to your website? I’m a very talented web developer and I have created some pretty amazing sites (Let me know if you’d like to see some examples and I’ll send them). I can also help you out if you’re thinking of rebuilding your site from scratch.

    My rates are very affordable so please let me know if you’re interested and I can give you a call with more information and a quote.

    Best regards,
    Theresa Watson | Lead Web Designer

Leave a Reply

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