Sử dụng Gmail cho WordPress với WP Mail SMTP

Khi thiết kế website bằng WordPress, hẳn các bạn đã từng gặp việc không nhận được thư khi khách hàng điền vào Form liên hệ. Bài lược dịch sau đây từ WPforms.com sẽ giúp bạn khắc phục việc đó.

Bài viết áp dụng cho việc bạn dùng Gmail làm địa chỉ email liên hệ trong WordPress (tương tự khi bạn dùng tài khoản G-Suite….)

Tại sao bạn không nhận được thư?

Mặc định WordPress sử dụng hàm PHP mail() Function để gửi thư tạo bởi WordPress hoặc bất kỳ Plugin form liên hệ nào khác. Lý do chính cho việc bạn không nhận được thư là do hosting của bạn không được thiết lập để dùng hàm này.

Thêm vào đó, các bộ lọc chống spam thư của Gmail, Yahoo…sẽ xác nhận xem thư của bạn có đúng từ nguồn gốc trong Form liên hệ hay không mới phát thư đến bạn, điều này làm cho thư bạn có thể bị gắn nhãn Spam hoặc thậm chí không được gửi đi nữa.

Bạn có thể khắc phục điều này bằng việc sử dụng SMTP (Simple Mail Transfer Protocol – chuẩn truyền tải thư điện tử qua mạng Internet)

Tại sao dùng WP Mail SMTP Plugin?

Ưu điểm chính của Plugin WP Mail SMTP là nó cho phép bạn gửi thư từ WordPress một cách an toàn với tài khoản GMail hoặc G-Suite của bạn. Bạn không cần điền password Gmail của bạn như các plugin SMTP khác.

Bước 1: Cài đặt WP Mail SMTP Plugin

Bước đầu tiên bạn cần cài WP Mail SMTP plugin.

Sau khi cài đặt và kích hoạt, bạn vào Settings » WP Mail SMTP để thiết lập các thông số cho plugin.

Ở đầu trang bạn sẽ thấy From Email và From Name. Mặc định, đây sẽ lấy email của admin và tên trang WordPress của bạn. Ví dụ với IT24.VN đó là gianghl1983@it24.vnCông ty Cổ phần đầu tư 2424

Trong mục From Email, hãy đảm bảo email Gmail hoặc G Suite của bạn đã được điền vào.

Mục Force From Email cũng nên được chọn để đảm bảo email đã được thiết lập ở From Email không bị thay đổi do thiết lập ở các Plugins khác.

Enable the Force From Email option in WP Mail SMTP
Enable the Force From Email option in WP Mail SMTP

 

Bạn có thể dùng bất kỳ From Name nào bạn thích và cũng có thể chọn Force From Name. Các thiết lập này giúp người nhận biết được thư đến từ đâu.

 

Sau các thiết lập cơ bản này, các bạn chuyển qua Mailer và chọn Gmail.

Bạn cũng nên chọn mục Return Path – Set the return-path to match the From Email. Với lựa chọn này bạn sẽ được thông báo về các email hỏng, gửi thất bại.

Chọn GMail

Next, you should see a new Gmail section appear. Here, you’ll see fields for Client Secret and Client ID.

To get the information for these fields, you’ll need to create a web application through your Google account. This doesn’t require any coding, and we’ll show you exactly what to do.

Step 2: Create a Web Application

To create an application, you’ll first need to sign into your Gmail account and access Gmail’s application registration. Clicking that link should open this Google page in a new tab or window, and you’ll want to keep your site settings open (we’ll return to those later).

Once you’ve followed that link and logged into your Gmail account, you should see a form named “Register your application for Gmail API in Google API Console”.

In the dropdown labeled Select a project where your application will be registered, leave the default option of Create a project. Then, go ahead and click the Continue button.

Create a project for Gmail app registration

Next, you should see a screen that says “The API is enabled”. To proceed to the setup page, click the Go to credentials button.

Gmail API is enabled

In the next page, you’ll be prompted to determine the credentials you need. Here are the fields on this page and the options you’ll need to select:

  • Which 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

Once you’ve made these selections, click the What credentials do I need? button to go to the next step.

Add credentials to Gmail app project

For this step, you’ll be creating an OAuth client ID. OAuth, or Open Authorization, is what will provide permission for your website to use your Gmail account to authenticate emails.

For the Name field, enter anything you like or leave the default name. This is only for reference within your Google account.

For the Authorized JavaScript origins, you’ll need to enter your site’s URL.

Last, we need to fill out the Authorized redirect URIs field. To get the URI for your site, you’ll need to go back to the tab or window with your WordPress site. Still on the Settings » WP Mail SMTP page, you’ll need to look under the Gmail section for the field labeled Authorized redirect URI.

The value in this field should be your site’s URL followed by some extra details. You’ll need to copy this value, which is easily done by clicking the button with the copy icon.

Use button to copy authorized redirect URI from WP Mail SMTP settings

After copying the URI, return to the Google APIs page and paste it into the field under Authorized redirect URIs.

Create a Google OAuth client ID

After that, you can click the Create client ID button.

For the last step in the app creation process, you’ll need to set up the consent screen. This screen will never be seen by your users since you’re only granting permission for your own site to use the Gmail account you own.

You’ll just need to check your email address and then enter a Product name shown to users (such as the title of your website). When you’ve completed these fields, click Continue.

oauth client id

You’ve now successfully created a Gmail web application!

Now we need to see the full details. On the last screen, click I’ll do this later to go to the Credentials page.

Last page in Gmail app setup process

Step 3: Grant Permissions and Send Test Email

On the Credentials page, you can now see the details of the web application you just created. To view Client ID and Client Secret, click the edit icon.

Click the edit icon on the Credentials page

This will open all of the details for your app. On this page, you’ll need to copy the Client ID and Client secret values.

Each of these will need to be copied into your WP Mail SMTP settings back in your WordPress admin.

Note: Be very careful not to copy any extra text or spaces with your Client ID or Client Secret, as this will result in an error in the next step.

Copy in Client ID and secret to WP Mail SMTP settings

After saving these settings, the page will refresh. Before Google allows this information to be used to connect to your account, however, you must grant permission.

To do this, scroll to the bottom of this page and click the button labeled Allow plugin to send emails using your Google account.

Authorize plugin to send emails with Gmail

This will open a login screen for Google. Go ahead and log into the account you’re setting this SMTP up with. Then, you’ll see a screen asking for permission for this site to send email on your behalf.

When you’re ready, click the Allow button to proceed.

Grant permission for site to send email

Next, you’ll be returned to your WP Mail SMTP settings and a success message will be displayed. Now that the connection is complete, you’re ready to send a test email under the Email Test tab.

Gmail connection success with WP Mail SMTP

Once the Test Email tab is open, you’ll need to enter a valid email address and click the Send Email button. Be sure to use an email address you have access to so you can confirm the email is delivered.

Send a test email through WP Mail SMTP

When the test message has been sent, you’ll see a success message at the top of this tab.

WP Mail SMTP test email was sent successfully

You should also soon receive a test email at the email address you entered.

Test email for WP Mail SMTP Gmail

Frequently Asked Questions

What If the Test Email Doesn’t Send Successfully?

If the SMTP test email isn’t able to send, a debug log will appear with additional details. Here are some of the possible error messages and how to resolve them.

401. That’s an error.
Error: invalid_client

This error appears when the Client ID isn’t able to be read properly. To fix, try copying the Client ID in again and check that there’s no whitespace or extra text.

400. That’s an error.
Error: invalid_request
Missing required parameter: client_id

This error will display when the Client ID field is empty or not able to be read properly. To fix, copy in the Client ID again and be careful to not add extra text or whitespace.

cURL error 60: SSL certificate problem
This message means that the server is missing a certificate that’s required for SMTP to work. To fix, you’ll need to contact your site’s hosting provider to ask them to install this certificate (most likely the cacert.pem certificate, though it’s best to ask your host to check).

“code”: 401,
“message”: “Login Required”

If you see this in the debug message, permission still needs to be granted to your use Google account. For instructions on how to fix this, please see Step 3 of this tutorial. Also, be sure to check that the From Email in your SMTP settings matches the email used to setup the Google app.

What If I Want to Switch to A Different Email Later?

If you’d like to change to a different Gmail/G Suite email address, you’ll need to repeat all tutorial steps above. This includes generating a new Client ID and Client Secret under this other email account.

When you get to the Authorization step (under Step 3), save your settings and then click the Remove Connection button. This will remove the authorization for your original email account and allow you to repeat the authorization steps with the new email.

Remove connection in WP Mail SMTP

That’s it! You’ve successfully configured WP Mail SMTP’s Google mailer on your WordPress site.