Fixing Contact Form errors in WordPress – using SMTP

Fusco Browne Screenshot - Web Design
Contact form 7 is a free contact form plugin that helps you easily create forms and put them anywhere on your website. Contact form 7 is one of the most used plugins on WordPress with over 5 million active downloads. The alternative for Contact Forms 7 is WPForms, and this solution will work on both, with slightly differing methods. I found that some of the forms you create can stop working or have issues when trying to send a message. You will often receive a message with a border saying “There was an error trying to send your message. Please try again later”. Depending on the colour of border the message is surrounded by will determine what kind of fix you need. This article will focus on the red border error message. I will focus on the other messages in upcoming articles.

This solution comes in the form of a plugin. SMTP and php mail plugins make sure emails are authenticated and properly sent through third parties. The plugin I use to fix this is Post SMTP Mailer/Email Log.

Go to one of the suggested mailers websites and sign up for an account (I used GMail). All you need to do is set up a free account in the Google API Console. Enter the Google email address that will be used as your admin email for the website, and your company or website name in the Name field. Click next, the setup wizard should automatically set smtp.gmail.com as the Outgoing Mail Server Hostname. Click next.

The wizard should automatically select the recommended Socket as SMTP – gmail.com:587. In the Authentication section, make sure the option is set as OAuth 2.0 rather than Password. OAuth is more secure and strongly recommended. Click next, at this point you’ll arrive on the Authentication tab of the wizard, and in order to proceed with the configuration, we need to set up a separate, free tool called the Google API Console.

Open the Google API Console here. Make sure you’re signed in using the correct Google account, by clicking the profile icon in the top-right of the window. If this is the first time you’ve used the Google API Console for your Google account, go through the sign up instructions, then click the Agree and continue button. Whereas if you’ve used the API Console before, you can just Create a project then click Continue.

Either way, you should then see the below message confirming that the API has been enabled. Click the Go to credentials button. Click the 3 dots icon in the top-right of the window, then Project settings. Rename the project to something memorable – I usually recommend “SMTP for [your website name]” then click SAVE.

On the Credentials tab of your project, click the button to Create credentials and then select the OAuth client ID option. Click the blue Configure consent screen button to the right of screen. On the next page, enter “Post SMTP” as the Application name, then further down the page enter your website’s domain in the Authorised domains field, and the URLs for your Homepage and Privacy Policy pages – usually this is www.yourwebsite.com/privacy. Click save. On the next page, select Web application as the Application type. Enter a name of your choice – again, make it memorable. Now, go back to WordPress and the plugin page we left earlier, and copy/paste the Authorised JavaScript origins and Authorised redirect URI values from the Post SMTP wizard into the matching fields. Click the Create button.

Similarly, you will then be shown a unique client ID and client secret – copy/paste these values into the matching fields in the Post SMTP wizard in your WordPress dashboard. Click OK in the OAuth client window, and Next in the Post SMTP wizard. Click next, and finish. In your WordPress dashboard, click Post SMTP then click Grant permission with Google, Select the same Google email address that you specified in the earlier steps and click ‘Allow’. We’re nearly there – the next stage is to test with a dummy email. In the plugin dashboard, click the link to Send a Test Email. Specify a recipient of your choice (probably another email account you hold or you can see quickly – colleague sitting next to you perhaps?). All being well, you should then see a confirmation that the test was a success, and an email should arrive in the recipient mailbox you specified!

Of course, as part of my web design and development services, I am happy to help with any problems with contact forms not sending from your website. If you have any such issues, don’t hesitate to get in touch!