How Chrome is leading the switch to HTTPS for WordPress forms

Have you heard about the coming Chrome changes to your WordPress forms? Don't delay. Learn how to switch to HTTPS today.

Last week, Google sent out email notices to webmasters everywhere:

Starting October 2017, Chrome (version 62) will show a “NOT SECURE” warning when users enter text in a form on an HTTP page, and for all HTTP pages in Incognito mode.

You don't often see bold, bright red text in my blog posts, so take note, this really is a big deal. It will affect your website. The official email from Google Search Console/Chrome included a list of pages on your site that will trigger the new Chrome warning. This included pages with text input fields, which is nearly every page with a form on it. The email concludes with: The new warning is part of a long term plan to mark all pages served over HTTP as “not secure”.

Why should I switch to HTTPS?

How would you react if you saw a webpage marked as "Not Secure" that was asking you to input your personal information? I know I'd think twice about completing the form, even if it was only a simple contact form. It's easy to agree, this move by Google could have a major impact on form conversion rates. Since other browsers are sure to follow suit, this is an issue that shouldn't be ignored. But how hard is it to fix this? To prevent the “Not Secure” notification from appearing when Chrome users visit your site, the way forward is to switch to HTTPS. Making the switch may be much easier than you'd expect. Read more: What is the difference between HTTP and HTTPS? An SSL certificate is required to switch to HTTPS. These certificates used to be mainly for online stores, or official government or corporate websites. Until recently, SSL certificates had a cost attached. While not prohibitive (usually starting at about $80 - $100 a year), it was simply unnecessary for most small websites. The recent availability of cheap or even free options has meant SSL uptake has skyrocketed. If you're lucky enough that your hosting provider offers LetsEncrypt SSL certificates, you may be able to do this completely free. However, some providers still charge a one-time setup fee.

How to switch to HTTPS

For this example I'm going to switch my dad's website to HTTPS. He has a cleaning business with a simple website. Don't judge - I built it years ago. Since he's just about to retire, it's not getting a revamp! Read more: How to switch to HTTPS for secure WordPress forms

Step 1 - Update everything

Update your plugins, WordPress and your themes. This has absolutely nothing to do with SSL. It's just good practice. Do it every time you login to your site. I even updated the PHP version the site runs on to give a bit more speed.

Step 2 - Get a SSL certificate

Login to your hosting control panel and look for the SSL certificates section. Luckily for my dad, his hosting provider offers free LetsEncrypt certificates. I'll click that button, click the "Check my domains" button to make sure there's nothing funky with my the DNS setup. When the check comes back OK, click the "Request SSL" button. Within 60 seconds I now have an SSL certificate! But simply having the certificate is not enough.

Step 3 - Redirect HTTP to HTTPS

Next I need to setup a redirect to force all traffic to use HTTPS. I'm going to use .htaccess redirect to HTTPS with a few added lines. If you use Yoast SEO, under the Tools menu there is a handy file editor feature that allows you to make this change from inside WordPress. I'm going to add this code to the very beginning of the htaccess file and click save.

RewriteEngine On 
RewriteCond %{SERVER_PORT} 80 
RewriteRule ^(.*)$ https://johnjonescleaning.com/$1 [R,L]

Important: Change the URL to match your website. If you have existing code in your .htaccess, add this above the rules with a similar starting prefix. Be careful not to add it between the # BEGIN WordPress and # END WordPress lines. If you do, your changes can get overwritten at any point.

Step 4 - How to tell if a website is secure

Check for mixed content errors. HTTPS redirect doesn't instantly make your site secure. Although your page is now loaded over HTTPS, there may be elements that are still requested via insecure connections. Because of this you may see HTTPS in the URL bar of your browser, but the reassuring padlock icon that usually goes with it is missing. To fix this, right click on your webpage and click on "Inspect". Click the Console tab in the panel that opens up. This will show details of mixed content. Most of these errors can be automatically fixed in one quick action by installing a plugin like SSL Insecure Content Fixer or HTTP / HTTPS Remover. I use the 2nd option myself. These plugins simply remove the HTTP or HTTPS references from your pages, so the redirect you setup in step 3 can be applied to all links. If you still see mixed content errors after using one of these plugins, you should be able to track down the link and update it manually. You can even run a search and replace function if the link is hidden in a theme file somewhere. WhyNoPadlock.com may also help you root out the problem. Check EVERY page of your website. You may be loading external resources like ratings widgets or award badges on some pages. These may need to be manually switched to HTTPS.

The result of the switch to HTTPS

Once you've fixed all the mixed content errors on each page, you will get the reward for your switch to HTTPS. That coveted green padlock icon is finally in your address bar with the reassuring word "Secure" next to it! At this moment in time, switching to HTTPS has already had a positive influence on the Google ranking of my dad's site. For that reason alone it was already worth doing. Plus, the upcoming changes will soon have a HUGE negative impact on pages with WordPress forms. A big red "Not Secure" notice on your pages will impact user experience and form conversion rates if you don't make the switch to HTTPS. So don't wait. Make the switch to HTTPS today!