WordPress Forms Having Delivery Issues?
Why would anyone need to setup WP Mail SMTP for Gmail? What does that even mean? Well, If you have a WordPress site, you’ve probably embedded some type of contact form or questionnaire into a page. You also may have experienced a lack of notifications in your inbox, because WordPress sites are notoriously bad at delivering form submissions. Luckily, there’s a way to fix this issue, by setting up WP Mail SMTP. If you’re still confused, don’t worry, I’ll guide you through the process and how you how to setup WP MAIL SMTP for Gmail in the most simplified way possible, and without any unnecessary tech lingo. I work on websites every single day (click here to read my about page) but I understand that it can be very intimidating for someone new to WordPress. So, I’ve developed this step-by-step instruction manual that you can follow no matter your skill level! As long as you know how to copy and past, you can do this!
Using Gmail With WP Mail SMTP
Since we are setting up WP Mail SMTP for Gmail, this process will only work for Gmail and G-Suite emails.
Now, What is a G Suite email? Well, sometimes your work or school will provide you with an email address such as yourname@company.com and when you access that email account your inbox looks exactly like Gmail. This is confusing for some people because the email address doesn’t end in “@gmail.com” but yet, your inbox looks like Gmail. That is a G-Suite account. Your work or school is masking the email with their own address (such as @company.com). So, if you have a Gmail account, or a G-Suite account, this process should work for you! If you utilize another service such as Outlook, for example, you can still use the WP Mail SMTP, but your process will be slightly different and therefore, these instructions won’t work for you- sorry.
Now, without further ado, let’s get started!
The Tutorial
Step 1: Download The Plugin
You’ll need the WP Mail SMTP by WPForms plugin in order to complete this process. You can find it here: https://wordpress.org/plugins/wp-mail-smtp/
Once Downloaded, make sure you also click “Activate” to fully install the plugin.
Step 2: Go to Plugin Settings
- Once the plugin is downloaded and activated, go to the Settings page to fill out some initial information.
- Within the plugin settings, you can skip the first prompt that asks for “From Email.” This will be automatically taken care of later in the process.
- You DO what to fill out the “From Name” section, with the name of your website. (For example, MyNorthernCharm) Not the URL. Just the name.
- Also, go ahead and click “Force From Name”
- Under “Return Path” check the box to “Set the return-path to match the From Email”
- Under “Mailer” select “Google/Gmail”
Step 3: Create a Project
- Click on the following link to get started with your Google API: https://console.developers.google.com/flows/enableapi?apiid=gmail&pli=1
- Make sure you are logged into the Google/Gmail account you want to use. Once you click on the above link, it will assume the Gmail account that you are currently logged into. (For example, I have a personal GMail account, as well as a G-Suite account for work. When I am going through this process, I want to make sure I am logged into my G-Suite account for work.)
- Make sure the drop down box is filled with “Create a Project” and then click “Continue”
- The screen should update to display “The API is enabled.” At this point, click “Go to credentials.”
Step 4: Add Credentials
- What API are you using? Gmail API
- Where will you be calling the API from? Web Server (e.g node.js, Tomcat)
- What data will you be accessing? User data
- Next, click “What Credentials Do I Need?”
Step 5: Setup Consent Screen
- A box will pop-up on screen that says “Set up OAuth consent screen.”
- When this happens, click “Set Up Consent Screen”
- IMPORTANT: Once you click “Set Up Consent Screen” the current screen will change, and a new tab will open. You now want to focus on the NEW tab that opened.
- We will eventually return to this “old” tab, so do not delete it. Just let it hang out in the background, for now.
- If you have a G-Suite account, You will be asked to specify “Application Type.” You should click “Internal.”
- If you are using an email address that ends in “@gmail.com” then you will not be asked about “Application Type” so you can just continue as normal.
Step 6: Time for Credentials
- For “Application Name” just type the name of your website. Not the URL, just a name.
- You may add a logo here, for display purposes, but that is optional.
- You can disregard the “Support Email” section, and instead scroll down to “Authorized Domains.”
- For “Authorized Domains” you should enter the URL for your website, without the “https://” at the beginning. For example, enter yourwebsite.com instead of https;//yourwebsite.com/. Press the Enter key on your keyboard to submit that domain.
- Under “Application Homepage Link” enter the full URL for your website, including the “https://” or “http://” For example, enter https://yourwebsite.com/
- Once you’ve entered all of the correct URLs, click “Save”
- We can now disregard this tab, and return to the “old” tab from earlier in the process.
Step 7: Authorized Redirect URI
- Enter the name of your website again (I promise this is the last time you’ll have to do that in this process)
- Under “Authorized Javascript Origins” you need to enter your site full site URL. If the URL ends with a forward slash, it will ask you to remove it. For example, enter https:/yourwebsite.com
- For the “Authorized Redirect URI” we need to gather some information from WordPress. You should still have a tab open with the plugin settings.
- Within the plugin settings page, find the section that says “Authorized Redirect URI” and copy the code listed next to it. (I’ve circled it in red, in the screenshot shown below)
- Now GO BACK TO THE OTHER TAB that we were just working in, and paste the code next to “Authorized Redirect URI”
- Next, Click Refresh and wait for the screen to reload.
- A button will appear that says “Create OAuth Client ID” and you’ll want to click that.
Step 8: Client ID & Client Secret
- After clicking “Create OAuth client ID” in the previous step, a screen will appear asking if you’d like to Download Your Credentials. Click “I’ll do this later”
- You will now see a screen with your credentials listed. Find the pencil icon displayed after your Client ID. (I’ve circled it in red, in the screenshot shown below)
- Congratulations! You’ve generated your Client ID and Client Secret. We’re almost done!
- You need to copy and paste these two bits of information into the plugin settings page. So, copy the Client ID code and paste it in the corresponding box within your plugin settings.
- Now, copy and paste the Client Secret into the corresponding box within your plugin settings.
- Click the yellow “Save Settings” button
- A new button will appear that says “Allow Plugin to Send Emails Using Your Gmail” You should click on it to allow.
- Gmail will popup and ask for your permission to access your account for these purposes. Click “Allow” at the button of the screen.
Step 9: Testing
- Lastly, you want to test to make sure you successfully completed the process. It is important to test, even if you’re experienced with this process.
- To test if the plugin is properly setup, navigate to the tab that says “Test Email” (I’ve circled it in red, in the image shown below)
- Enter an email address that you have access to, because a Test email will be sent to this account.
- Click “Send Email”
Once you receive your test email, the process is complete! All embedded forms on your WordPress site should successfully deliver the information right to your inbox.
You’ll notice that when someone completes a form on your website, the submission will be sent to you (and whoever else you specified in the form settings), but it’ll look like it is coming from your own email account. This is totally normal, and expected. I will spare you the boring technical explanation.
