5 Bước Đơn Giản Tạo Form Liên Hệ Chuyên Nghiệp Trong WordPress

Form liên hệ là một thành phần không thể thiếu trong hầu hết các website. Nó giúp khách truy cập dễ dàng liên hệ với bạn để gửi câu hỏi, góp ý hoặc yêu cầu dịch vụ. Trong bài viết này, chúng ta sẽ cùng thực hiện việc tạo một form liên hệ đơn giản nhưng chuyên nghiệp trong WordPress chỉ với 5 bước.

Cài Đặt Plugin Contact Form 7#

Bước 1: Cài Đặt Plugin Contact Form 7#

Contact Form 7 là một plugin phổ biến, miễn phí, và dễ sử dụng để tạo form liên hệ.

Cách cài đặt:

Đăng nhập vào trang quản trị WordPress.
Vào Plugins > Add New (Thêm mới).
Tìm kiếm "Contact Form 7" trong thanh tìm kiếm.
Nhấn Install Now (Cài đặt) và sau đó nhấn Activate (Kích hoạt).

Bước 2: Tạo Form Liên Hệ Cơ Bản#

Sau khi cài đặt, bạn sẽ thấy menu Contact xuất hiện trong thanh quản trị.

Tạo một form mới:
- Đi đến Contact > Add New.
- Đặt tên cho form (ví dụ: "Form Liên Hệ").

Cấu hình form:

Mặc định, form sẽ bao gồm các trường: Tên, Email, Chủ đề, Tin nhắn. Bạn có thể thêm hoặc chỉnh sửa các trường.

Ví dụ cấu hình form:

<label for="your-name">Họ và tên</label>
[text* your-name class:form-control]

<label for="your-email">Email</label>
[email* your-email class:form-control]

<label for="your-subject">Chủ đề</label>
[text your-subject class:form-control]

<label for="your-message">Tin nhắn</label>
[textarea your-message class:form-control]

[submit class:btn class:btn-primary "Gửi"]

<figcaption class="blockquote-footer float-end mb-5">
    Source code <cite title="Source Title">template.thichcode.net</cite>
</figcaption>

Lưu form:
- Nhấn Save.
- Một đoạn shortcode sẽ xuất hiện, ví dụ: [contact-form-7 id="52e1f96" title="Form Liên Hệ"].

Bước 3: Thêm Form Liên Hệ Vào Trang hoặc Bài Viết#

Sao chép shortcode: Lấy đoạn shortcode mà bạn vừa lưu.
Dán vào nội dung trang hoặc bài viết:
- Tạo một trang mới qua Pages > Add New.
- Dán shortcode vào trong nội dung:
```
[contact-form-7 id="52e1f96" title="Form Liên Hệ"]
```
Xuất bản: Nhấn Publish để xuất bản trang của bạn.

Bước 4: Tùy Chỉnh Giao Diện Form#

Nếu bạn muốn làm đẹp form liên hệ của mình, bạn có thể tùy chỉnh giao diện bằng CSS.

Ví dụ CSS đơn giản:

Chèn đoạn CSS sau vào file style.css của theme hoặc qua Customizer > Additional CSS:

.wpcf7-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.wpcf7-form input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #0056b3;
}

Minh họa giao diện sau khi tùy chỉnh:

Hình ảnh minh họa: Form liên hệ đẹp mắt với giao diện tinh gọn, chuyên nghiệp.

Bước 5: Kiểm Tra Form#

Trước khi đưa form vào sử dụng chính thức, bạn cần kiểm tra các bước sau:

Gửi thử tin nhắn:
- Điền đầy đủ thông tin và nhấn gửi để kiểm tra form có hoạt động không.
Khắc phục lỗi gửi mail (nếu có):
- Nếu bạn không nhận được email, cài đặt plugin WP Mail SMTP để cấu hình gửi mail qua SMTP.

Cách cài đặt WP Mail SMTP:

Cài plugin qua Plugins > Add New.
Cấu hình email gửi bằng dịch vụ như Gmail, Outlook, hoặc SMTP của hosting.
Lưu cấu hình và kiểm tra lại.

Kết Luận#

Chỉ với 5 bước trên, bạn đã có thể tạo một form liên hệ chuyên nghiệp cho website WordPress của mình. Form không chỉ giúp bạn kết nối với khách hàng mà còn tăng sự chuyên nghiệp cho website. Bạn có thể mở rộng form để phù hợp với nhu cầu như thêm trường tùy chỉnh (số điện thoại, tệp đính kèm) hoặc tích hợp Captcha để tránh spam. Nếu bạn gặp khó khăn hoặc có câu hỏi, hãy để lại bình luận bên dưới! 😊

Hướng Dẫn Chi Tiết Cách Cài Đặt Và Cấu Hình WP Mail SMTP Với Gmail#

WP Mail SMTP giúp cải thiện việc gửi email trên WordPress bằng cách sử dụng giao thức SMTP thay vì hàm wp_mail(). Trong hướng dẫn này, chúng ta sẽ cấu hình WP Mail SMTP để sử dụng email webnkd@gmail.com.

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

Đăng nhập vào trang quản trị WordPress.
Đi đến Plugins > Add New (Thêm mới).
Tìm kiếm WP Mail SMTP trong thanh tìm kiếm.
Nhấn Install Now (Cài đặt) và sau đó nhấn Activate (Kích hoạt).

Bước 2: Cấu Hình WP Mail SMTP#

Truy cập giao diện cấu hình
- Sau khi kích hoạt, đi đến WP Mail SMTP > Settings.
Cài đặt cơ bản
- From Email: Nhập địa chỉ email của bạn: webnkd@gmail.com.
- From Name: Nhập tên hiển thị, ví dụ: Website của bạn.
- Đánh dấu tùy chọn Force From Email nếu bạn muốn tất cả email sử dụng địa chỉ này.
Chọn Mailer (SMTP)
- Chọn Google / Gmail trong danh sách các mailer.
Cấu hình Google API
- Plugin yêu cầu bạn cấu hình Google API để cho phép gửi email qua Gmail.

Bước 3: Thiết Lập Google API Để Sử Dụng Gmail SMTP#

Truy cập Google Cloud Console
- Mở Google Cloud Console.
- Đăng nhập bằng tài khoản Gmail của bạn (webnkd@gmail.com).
Tạo một dự án mới
- Nhấn Create Project (Tạo dự án).
- Đặt tên dự án, ví dụ: WP Mail SMTP Project, sau đó nhấn Create.
Kích hoạt Gmail API
- Trong thanh tìm kiếm, nhập Gmail API.
- Nhấn vào Gmail API và chọn Enable (Bật).
Tạo thông tin đăng nhập (Credentials)
- Truy cập APIs & Services > Credentials.
- Nhấn Create Credentials > OAuth Client ID.
- Cấu hình OAuth Consent Screen:
  - Trong bước đầu, chọn External và nhấn Create.
  - Nhập tên ứng dụng, ví dụ: WP Mail SMTP Gmail.
  - Thêm email quản trị viên và nhấn Save and Continue.
- Tạo OAuth Client ID:
  - Chọn Application Type: Web Application.
  - Nhập tên, ví dụ: WP Mail SMTP Client.
  - Trong phần Authorized Redirect URIs, thêm URL sau:
```
https://connect.wpmailsmtp.com/google/
```
  - Nhấn Create.
Lấy Client ID và Client Secret
- - Sau khi tạo thành công, bạn sẽ nhận được Client ID và Client Secret.
  - Sao chép hai thông tin này để sử dụng trong WP Mail SMTP.

Bước 4: Hoàn Tất Cấu Hình Trong WP Mail SMTP#

Quay lại WP Mail SMTP > Settings trên WordPress.
Trong phần Google / Gmail, nhập:
- Client ID: Dán Client ID từ Google Cloud Console.
- Client Secret: Dán Client Secret từ Google Cloud Console.
Nhấn Save Settings (Lưu cấu hình).
Kết nối tài khoản Gmail
- Nhấn Allow Plugin to Send Emails Using Your Gmail Account.
- Đăng nhập bằng tài khoản webnkd@gmail.com.
- Nhấn Allow để cấp quyền.

Bước 5: Kiểm Tra Gửi Email#

Vào WP Mail SMTP > Tools > Email Test.
Nhập địa chỉ email nhận thử, ví dụ: webnkd@gmail.com.
Nhấn Send Email.
Kiểm tra hộp thư đến của bạn xem có nhận được email thử nghiệm không.

Khắc Phục Một Số Lỗi Thường Gặp#

Lỗi không gửi được email:
- Kiểm tra lại Redirect URI trong Google Cloud Console.
- Đảm bảo đã bật Gmail API.
Gmail thông báo hạn chế:
- Đăng nhập Gmail và kiểm tra email cảnh báo bảo mật. Nhấn Yes, it’s me để xác nhận.

Kết Luận#

Với hướng dẫn trên, bạn đã cấu hình thành công WP Mail SMTP để gửi email bằng tài khoản Gmail webnkd@gmail.com. Hệ thống gửi email trên WordPress của bạn sẽ hoạt động ổn định hơn và tránh các vấn đề email bị đánh dấu là spam. Nếu bạn gặp khó khăn trong quá trình cấu hình, hãy để lại bình luận bên dưới để được hỗ trợ! 😊

Lỗi "wpmailsmtp.com chưa hoàn tất quy trình xác minh của Google"#

Nếu bạn gặp thông báo sau thì tiếp tục đọc tiếp cách sửa bên dưới:

wpmailsmtp.com chưa hoàn tất quy trình xác minh của Google. Ứng dụng này đang trong giai đoạn thử nghiệm và chỉ những người thử nghiệm mà nhà phát triển đã phê duyệt mới truy cập được. Nếu bạn cho rằng mình cần có quyền truy cập, hãy liên hệ với nhà phát triển.
Nếu bạn là nhà phát triển của wpmailsmtp.com, hãy xem thông tin chi tiết về lỗi.

Lỗi 403: access_denied

Lỗi 403: access_denied xuất hiện khi bạn sử dụng ứng dụng WP Mail SMTP mà chưa hoàn tất quy trình xác minh của Google hoặc cấu hình ứng dụng OAuth chưa được thực hiện đầy đủ. Đây là vấn đề phổ biến khi cấu hình Gmail API trong Google Cloud Console. Để khắc phục, bạn cần thực hiện các bước sau:

Nguyên Nhân Của Lỗi#

Ứng dụng đang ở trạng thái thử nghiệm và Google yêu cầu người dùng thử nghiệm phải được thêm vào danh sách được phê duyệt.
Chưa chuyển trạng thái ứng dụng từ Testing (Thử nghiệm) sang Production (Sản phẩm).
Cấu hình thiếu bước hoặc URL Redirect không khớp.

Cách Khắc Phục Lỗi 403: access_denied#

1. Thêm Email Của Bạn Vào Danh Sách Người Thử Nghiệm

Khi ứng dụng ở trạng thái thử nghiệm, chỉ những tài khoản Gmail được thêm vào danh sách người thử nghiệm mới có quyền truy cập.

Truy cập Google Cloud Console:
- Đăng nhập vào Google Cloud Console.
Đi đến phần OAuth Consent Screen (Màn hình xác nhận OAuth):
- Vào APIs & Services > OAuth Consent Screen.
Thêm email người thử nghiệm:
- Trong mục Test Users, nhấn Add Users.
- Nhập địa chỉ email Gmail của bạn (webnkd@gmail.com).
- Nhấn Save.
Thử lại quy trình kết nối trên WP Mail SMTP.

2. Chuyển Trạng Thái Ứng Dụng Sang Production (Sản phẩm)

Nếu bạn muốn loại bỏ hoàn toàn trạng thái thử nghiệm:

Vào APIs & Services > OAuth Consent Screen.
Trong mục Publishing Status, nhấn Publish App để chuyển sang Production.
Lưu ý: Khi chuyển sang trạng thái này, Google sẽ yêu cầu bạn hoàn tất quy trình xác minh ứng dụng, bao gồm:
- Cung cấp URL chính sách bảo mật.
- Cung cấp chi tiết về cách ứng dụng sử dụng dữ liệu.

3. Đảm Bảo Redirect URI Chính Xác

Hãy chắc chắn rằng Authorized Redirect URI trong cấu hình ứng dụng khớp với URI trong WP Mail SMTP.

Vào APIs & Services > Credentials > OAuth 2.0 Client IDs.
Kiểm tra mục Authorized Redirect URIs.
- URI chính xác bạn cần thêm:
```
https://connect.wpmailsmtp.com/google/
```
Lưu thay đổi và thử lại. Nếu vẫn không được thì vui lòng đợi trong vòng 24 tiếng rồi thử lại, vì khi khởi tạo project trong Google Console có thể mất vài ngày thì mới hoạt động.

4. Sử Dụng Tùy Chọn SMTP Thay Thế (Không Dùng Gmail API)

Nếu không muốn cấu hình Gmail API, bạn có thể gửi email qua SMTP mà không cần ứng dụng OAuth:

Chọn SMTP trong WP Mail SMTP:
- Vào WP Mail SMTP > Settings > Mailer.
- Chọn Other SMTP.
Cấu hình SMTP:
- SMTP Host: smtp.gmail.com
- Encryption: SSL/TLS
- SMTP Port: 465
- Authentication: Chọn Yes.
- Username: webnkd@gmail.com
- Password: Mật khẩu ứng dụng (App Password).
Tạo Mật Khẩu Ứng Dụng Gmail:
- Truy cập Google Account Security.
- Trong mục App Passwords, tạo mật khẩu ứng dụng mới cho WP Mail SMTP.
- Sử dụng mật khẩu này thay vì mật khẩu Gmail thông thường.

Kết Luận#

Lỗi 403: access_denied thường xảy ra khi ứng dụng chưa được xác minh đầy đủ hoặc cấu hình Gmail API không chính xác. Nếu bạn không muốn làm việc với OAuth, sử dụng tùy chọn SMTP đơn giản hơn. Nếu gặp khó khăn trong bất kỳ bước nào, hãy để lại câu hỏi, mình sẽ hỗ trợ bạn! 😊

Nội dung bài viết

Cài Đặt Plugin Contact Form 7
Bước 1: Cài Đặt Plugin Contact Form 7
Bước 2: Tạo Form Liên Hệ Cơ Bản
Bước 3: Thêm Form Liên Hệ Vào Trang hoặc Bài Viết
Bước 4: Tùy Chỉnh Giao Diện Form
Bước 5: Kiểm Tra Form
Kết Luận
Hướng Dẫn Chi Tiết Cách Cài Đặt Và Cấu Hình WP Mail SMTP Với Gmail
Bước 1: Cài Đặt Plugin WP Mail SMTP
Bước 2: Cấu Hình WP Mail SMTP
Bước 3: Thiết Lập Google API Để Sử Dụng Gmail SMTP
Bước 4: Hoàn Tất Cấu Hình Trong WP Mail SMTP
Bước 5: Kiểm Tra Gửi Email
Khắc Phục Một Số Lỗi Thường Gặp
Kết Luận
Lỗi "wpmailsmtp.com chưa hoàn tất quy trình xác minh của Google"
Nguyên Nhân Của Lỗi
Cách Khắc Phục Lỗi 403: access_denied
Kết Luận

★ ★ ★ ★ ★ 5.0 (1 lượt đánh giá)

5 Bước Đơn Giản Tạo Form Liên Hệ Chuyên Nghiệp Trong WordPress

Cài Đặt Plugin Contact Form 7#

Bước 1: Cài Đặt Plugin Contact Form 7#

Cách cài đặt:

Bước 2: Tạo Form Liên Hệ Cơ Bản#

Bước 3: Thêm Form Liên Hệ Vào Trang hoặc Bài Viết#

Bước 4: Tùy Chỉnh Giao Diện Form#

Ví dụ CSS đơn giản:

Minh họa giao diện sau khi tùy chỉnh:

Bước 5: Kiểm Tra Form#

Cách cài đặt WP Mail SMTP:

Kết Luận#

Hướng Dẫn Chi Tiết Cách Cài Đặt Và Cấu Hình WP Mail SMTP Với Gmail#

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

Bước 2: Cấu Hình WP Mail SMTP#

Bước 3: Thiết Lập Google API Để Sử Dụng Gmail SMTP#

Bước 4: Hoàn Tất Cấu Hình Trong WP Mail SMTP#

Bước 5: Kiểm Tra Gửi Email#

Khắc Phục Một Số Lỗi Thường Gặp#

Kết Luận#

Lỗi "wpmailsmtp.com chưa hoàn tất quy trình xác minh của Google"#

Nguyên Nhân Của Lỗi#

Cách Khắc Phục Lỗi 403: access_denied#

1. Thêm Email Của Bạn Vào Danh Sách Người Thử Nghiệm

2. Chuyển Trạng Thái Ứng Dụng Sang Production (Sản phẩm)

3. Đảm Bảo Redirect URI Chính Xác

4. Sử Dụng Tùy Chọn SMTP Thay Thế (Không Dùng Gmail API)

Kết Luận#

Bài viết liên quan

Hủy