Hướng dẫn cài đặt và cấu hình Contact Form 7 WordPress 2021

|

Contact Form 7 là công cụ mà cho người dùng tạo biểu mẫu liên hệ Website trên WordPress. Những với những người mới thì việc tích hợp này còn gặp nhiều khó khăn. Bài viết dưới đây, ThemeNest sẽ giới thiệu cấu hình và hướng dẫn sử dụng Plugin Contact Form 7 chi tiết nhất. Cùng theo dõi nhé!

Hướng Dẫn Tích Hợp Contact Form 7 Vào Website WordPress
Hướng Dẫn Tích Hợp Contact Form 7 Vào Website WordPress

Contact Form 7 là gì?

Tìm Hiểu Contact Form 7
Tìm Hiểu Contact Form 7

Plugin Contact Form 7 là Plugin miễn phí hoàn toàn và phổ biến nhất cho WordPress. Plugin này giúp WordPress có tính năng tạo Form liên hệ và chèn Form vào bất cứ trang nào bạn muốn. Cấu hình Contact Form 7 WordPress cho phép bạn tùy biến đa dạng những trường thông tin và tiêu đề. Thông báo khi có data có thể gửi đến nhiều email cùng lúc. Vì quá phổ biến nên có nhiều nhà phát triển khác đã bổ sung thêm những tính năng đặc biệt vào bằng những Plugin bổ trợ.

Hướng dẫn sử dụng Contact Form 7

Hướng Dẫn Sử Dụng Contact Form 7
Hướng Dẫn Sử Dụng Contact Form 7

Hướng dẫn sử dụng Contact Form 7 như sau:

  1. Cấu hình máy chủ SMTP để gửi Email.
  2. Cài đặt plugin Contact Form 7.
  3. Thiết kế và cấu hình gửi mail.
  4. Chèn khung liên hệ vào website WordPress vào trang bất kỳ.

Cấu hình máy chủ SMTP để gửi Email

Do hàm mail() của PHP khi gửi Email không chứng thực (không khai báo địa chỉ gửi đi và chứng thực mật khẩu SMTP). Vì thế mà dẫn đến Hosting bị tổ chức chống spam quốc tế chặn và không gửi nhận mail vì đưa vào danh sách Blacklist.

Chính vì thế mà để gửi được Email an toàn ở trên Website thì bạn cũng cần phải khai báo cấu hình máy chủ gửi email SMTP.

  1. Bạn vào PluginCài mới.
Cài đặt Plugin Mới
Cài đặt Plugin Mới

Bạn gõ từ khóa vào ô tìm kiếm “Easy WP SMTP“, sau đó nhấn vào “Cài đặt”.

Cài đặt Plugin Easy Wp Smtp
Cài đặt Plugin Easy Wp Smtp

Sau đó nhấn vào “Kích hoạt“.

Kích Hoạt Plugin Easy Wp Smtp
Kích Hoạt Plugin Easy Wp Smtp
  1. Bạn vào trang Quản lý tài khoản Google bằng cách nhấp vào ảnh đại diện trên trang Google.
Nhấp Vào ảnh đại Diện Trên Trang Google
Nhấp Vào ảnh đại Diện Trên Trang Google
  1. Bạn nhấp vào Bảo mật trên menu. Bạn phải bật xác minh 2 bước trước. Sau đó bạn nhấp vào “Mật khẩu ứng dụng“.
Nhấp Vào Mật Khẩu ứng Dụng Trong Quản Lý Google
Nhấp Vào Mật Khẩu ứng Dụng Trong Quản Lý Google
  1. Bạn nhấp vào Chọn ứng dụng và chọn Khác (Tên tùy chỉnh).
Tùy Chọn Khác Tại Tab Mật Khẩu ứng Dụng
Tùy Chọn Khác Tại Tab Mật Khẩu ứng Dụng
  1. Bạn điền tên gì cũng được, rồi nhấp nút “Tạo“. Như ví dụ dưới đây, ThemeNest đặt tên là: SMTP WordPress.
Chọn Một Tên ứng Dụng Mà Bạn Muốn
Chọn Một Tên ứng Dụng Mà Bạn Muốn
  1. Bạn sao chép mật khẩu ứng dụng trong ô màu vàng, dán ở đâu đó để dùng cho bước tiếp theo.

Copy Mật Khẩu ứng Dụng

  1. Bạn vào Cài đặtEasy WP SMTP. Bạn hãy cấu hình theo hướng dẫn bên dưới hoặc nhìn hình ảnh nhé.
Tiến Hành Dán Mật Khẩu ứng Dụng Vào Cài đặt Easy Wp Smtp
Tiến Hành Dán Mật Khẩu ứng Dụng Vào Cài đặt Easy Wp Smtp

Bao gồm những thông số như sau:

  • Địa chỉ email gửi: gmail của bạn
  • Tên email gửi: tên gì bạn thích
  • Máy chủ SMTP: smtp.gmail.com
  • Loại mã hoá: SSL/TLS
  • Cổng SMTP: 465
  • SMTP Username: gmail của bạn
  • Mật khẩu SMTP: mật khẩu ứng dụng đã tạo

Những phần khác thì bạn để mặc định, nhấn vào “Lưu thay đổi” bên dưới.

  1. Bạn qua tab “Kiểm tra gửi Email”, bạn điền email và nội dung rồi nhấp nút “Gửi email kiểm tra thử“. Nếu thông báo màu xanh là thành công, bạn vào gmail sẽ thấy có email vừa gửi.
Kiểm Tra Gửi Email Thành Công Hay Không?
Kiểm Tra Gửi Email Thành Công Hay Không?

Như vậy, bạn đã cấu hình xong SMTP cho toàn bộ Website nói riêng. Bây giờ các Form của bạn sẽ tự động gửi email thông báo cho bạn khi có khách hàng điền Form thành công.

Cài đặt plugin Contact Form 7

  1. Truy cập vào trang quản trị WordPress, di chuyển đến phần Plugin chọn “Cài mới“.
Cài đặt Plugin Mới
Cài đặt Plugin Mới
  1. Gõ vào mục tìm kiếm từ khóa “Contact Form 7“, bạn nhấn vào “Cài đặt“.
Cài đặt Plugin Contact Form 7
Cài đặt Plugin Contact Form 7

Sau đó bạn nhấn vào “Kích hoạt“.

Kích Hoạt Plugin Contact Form 7
Kích Hoạt Plugin Contact Form 7

Như vậy là bạn đã cài đặt xong.

Thiết kế và cấu hình Contact Form 7 để gửi mail

Bước 1: Tạo mới khung liên hệ

Bạn truy cập vào giao diện quản trị WordPress, di chuyển đến phần Form liên hệ chọn “Tạo Form mới“.

Tạo Form Liên Hệ Mới Trên Website
Tạo Form Liên Hệ Mới Trên Website

Sau đó giao diện xuất như sau và bạn tiến hành điền đầy đủ thông tin:

Nhập Thông Tin Bắt Buộc Trong Form Liên Hệ
Nhập Thông Tin Bắt Buộc Trong Form Liên Hệ

Tại đây thì bạn sẽ thấy được những giá tri như sau:

  • [your-name]: Họ tên của khách hàng.
  • [your-email]: Email của khách hàng.
  • [your-subject]: Tiêu đề liên hệ.
  • [your-message]: Nội dung liên hệ.
  • [submit]: Nút gửi liên hệ (bạn không được xóa vùng này).

Đến đây thì bạn đã hoàn thành được quá trình thiết kế Form liên hê.

Bước 2: Cấu hình cấu hình contact form 7 để gửi Email

Bạn chọn tiếp tab “Cấu hình Mail” để cấu hình Contact Form 7 WordPress.

Chọn Cấu Hình Email Trong Tạo Form Liên Hệ WordPress
Chọn Cấu Hình Email Trong Tạo Form Liên Hệ WordPress

Khi đó xuất hiện giao diện như sau:

Cấu Hình Gửi Email Trong Tạo Form Liên Hệ WordPress
Cấu Hình Gửi Email Trong Tạo Form Liên Hệ WordPress

Tại đây thì bạn sẽ nhận thấy những trường như sau:

  • Mail nhận: Địa chỉ email nhận thư liên hệ. Ví dụ như [_site_admin_email].
  • Mail gửi: Địa chỉ email gửi. Ví dụ như [_site_title] <sales@themenest.vn>. Lưu ý: bạn phải sử dụng email theo tên miền.
  • Tiêu đề: Tiêu đề của email. Ví dụ như [_site_title] “[your-subject]”.
  • Additional headers: Chức năng này cho phép bạn Cc hoặc Bcc.
  • Message body: Tại đây, bạn cần điền các giá trị khi khai báo ở Nội dung Form tại Bước 1.

Bước 3: Cài đặt Thông báo

Tại đây bạn chọn Tab “Thông báo và chú ý” để nhằm thay đổi nội dung thông báo cho người dùng trong quá trình gửi liên hệ.

Nhấn Chọn Tab Thông Báo Và Chú ý Khi Tạo Form Liên Hệ WordPress
Nhấn Chọn Tab Thông Báo Và Chú ý Khi Tạo Form Liên Hệ WordPress

Cuối dùng thì bạn nhấn chọn “Lưu” ở bên phải để lưu Form liên hệ.

Chọn Lưu Form Liên Hệ WordPress
Chọn Lưu Form Liên Hệ WordPress

Chèn khung liên hệ vào website WordPress vào trang bất kỳ

  1. Bạn chọn phần Form liên hệDanh sách form.
Chọn Danh Sách Form Liên Hệ Trong WordPress
Chọn Danh Sách Form Liên Hệ Trong WordPress

Hãy sao chép Shortcode của form bạn vừa tạo.

Sao Chép Code Từ Danh Sách Form Vừa Mới được Tạo
Sao Chép Code Từ Danh Sách Form Vừa Mới được Tạo
  1. Bạn tạo một trang, hoặc sửa trang nào bạn muốn. Bạn dán shortcode vào như văn bản bình thường rồi nhấp Công bố (Cập nhật).
Dán Code Form Liên Hệ Vào Trang Website Bạn Muốn
Dán Code Form Liên Hệ Vào Trang Website Bạn Muốn

Đây là kết quả form tư vấn bất động sản mà chúng ta đã tạo ra.

Form Liên Hệ Mẫu được Tạo Từ Plugin
Form Liên Hệ Mẫu được Tạo Từ Plugin

Kết nối Contact Form 7 với Google Sheet

Kết Nối Plugin Contact Form 7 Với Google Sheet
Kết Nối Plugin Contact Form 7 Với Google Sheet

Kết nối Contact 7 với Google sheet nếu như bạn muốn quản lý data khách hàng đã điền Form trong Google Sheet. Như thế sẽ giúp bạn phân chia dữ liệu khách hàng cho sale và sử dụng lại dữ liệu trong tương lai.

  1. Bạn vào PluginCài mới.
Cài đặt Plugin Mới
Cài đặt Plugin Mới

Bạn gõ từ khóa vào ô tìm kiếm “CF7 Google Sheet Connector“, sau đó nhấn vào “Cài đặt”.

Cài đặt Plugin Cf7 Google Sheet Connector
Cài đặt Plugin Cf7 Google Sheet Connector

Sau đó bạn nhấn vào “Kích hoạt“.

Kích Hoạt Plugin Cf7 Google Sheet Connector
Kích Hoạt Plugin Cf7 Google Sheet Connector
  1. Bạn vào Form liên hệGoogle Sheet rồi nhấp Get Code để lấy mã liên kết với tài khoản Google Drive của bạn.
Lấy Mã Liên Kết Với Tài Khoản Google Drive Của Bạn
Lấy Mã Liên Kết Với Tài Khoản Google Drive Của Bạn
  1. Chọn tài khoản Google của bạn, sau đó cứ nhấp “Cho phép” hết.
Cho Phép Kết Nối Với Google Sheet Với Contact Form
Cho Phép Kết Nối Với Google Sheet Với Contact Form

Tiếp theo Google sẽ cấp cho bạn một đoạn mã:

Google Sẽ Cấp Cho Bạn Một đoạn Mã
Google Sẽ Cấp Cho Bạn Một đoạn Mã
  1. Sau khi có đoạn mã từ Google, bạn quay lại trang quản trị WordPress (Trang Admin), copy và dán đoạn mã đó vào ô Google Access Code, chọn “Save” để lưu lại thiết lập.
Dán Mã Và Nhấp Save để Kết Nối Plugin Contact Form 7 Với Google Sheet
Dán Mã Và Nhấp Save để Kết Nối Plugin Contact Form 7 Với Google Sheet
  1. Bạn hãy vào Google Sheet và tạo một Sheet để nhận data khi khách hàng điền Form.
Tạo Một Sheet để Nhận Data Khi Khách Hàng điền Form
Tạo Một Sheet để Nhận Data Khi Khách Hàng điền Form
  1. Bạn vào Form liên hệDanh sách Form, nhấp “Sửa form” của bạn. Trong trang chỉnh sửa Form, bạn qua Tab “Google Sheet” rồi điền thông tin của Sheet bạn vừa tạo vào phần Google Sheet Settings. Nhớ nhấn “Lưu” nhé.
Điền Thông Tin Của Sheet Sẽ Lấy Dữ Liệu Từ Plugin Contact Form 7
Điền Thông Tin Của Sheet Sẽ Lấy Dữ Liệu Từ Plugin Contact Form 7
  1. Bạn cuộn xuống sẽ thấy phần Field List. Đó là tên các cột data, bạn hãy sao chép từng tên rồi dán vào các cột trong Sheet nhận data của bạn.
Điền Thông Tin Của Sheet Sẽ Lấy Dữ Liệu Từ Plugin - Cấu hình Contact Form 7
Điền Thông Tin Của Sheet Sẽ Lấy Dữ Liệu Từ Plugin – Cấu hình Contact Form 7

Kết quả của bước 7 là Sheet nhận data phải có các cột tên trong Field List như thế này.

Đã Kết Nối Plugin Với Google Sheet để Lấy Dữ Liệu
Đã Kết Nối Plugin Với Google Sheet để Lấy Dữ Liệu

Như vậy là chúng ta đã liên kết Plugin Contact Form 7 với Google Sheet.

Chia sẻ mẫu Contact Form 7 đẹp

Chia Sẻ Mẫu Contact Form đẹp
Chia Sẻ Mẫu Contact Form đẹp

Mình chia sẻ những mẫu Form thông dụng được tổng hơp từ nhiều trang khác nhau.

Cách sử dụng: bạn sao chép code của Form và dán vào phần nội dung Form. Sửa câu chữ rồi nhấn Lưu Form.

Mẫu Contact Form đẹp cho bất động sản

Mã code:

<div> [text* tenkhachhang placeholder "Tên của bạn"] </div>
<div> [email* email placeholder "Email"] </div>
<div> [text* sodienthoai placeholder "Số điện thoại"] </div>
[checkbox tuychon "Tôi muốn xem nhà mẫu" "Tôi muốn nhận báo giá" "Tôi cần tư vấn ngay"]
[submit "Đăng ký"]
Mẫu Contact Form đẹp Cho Bất động Sản
Mẫu Contact Form đẹp Cho Bất động Sản

Mẫu Contact Form đẹp cho tuyển dụng

Mã code:

<div> [text* tenungvien placeholder "Tên của bạn"] </div>
<div> [email* email placeholder "Email"] </div>
<div> [text* sodienthoai placeholder "Số điện thoại"] </div>
[select* vitri "Digital Marketing" "Chăm sóc khách hàng" "Nhân viên thu mua"]
[file Filedinhkem limit:2048 filetypes:pdf|doc|docx]
[submit "Ứng tuyển"]
Mẫu Contact Form đẹp Cho Tuyển Dụng
Mẫu Contact Form đẹp Cho Tuyển Dụng

Mẫu Contact Form đẹp cho đặt lịch spa, nha khoa, thẫm mỹ

Mã code:

<div> [text* tenkhachhang placeholder "Tên của bạn"] </div>
<div> [text* sodienthoai placeholder "Số điện thoại"] </div>
[date ngay]
[checkbox dichvu "Chăm sóc da" "Lấy nhân mụn" "Lăn kim tế bào gốc"]
[submit "Đặt lịch"]
Mẫu Contact Form đẹp Cho đặt Lịch Spa
Mẫu Contact Form đẹp Cho đặt Lịch Spa

Mẫu Contact Form đẹp cho tư vấn cá nhân

Mã code:

<div> [text* tenkhachhang placeholder "Tên của anh (chị)"] </div>
<div> [text* sodienthoai placeholder "Số điện thoại"] </div>
[textarea tinhtrangsuckhoe placeholder "Tình trạng sức khỏe của anh (chị)"]
[submit "Tư vấn ngay"]
Mẫu Contact Form đẹp Cho Tư Vấn Cá Nhân
Mẫu Contact Form đẹp Cho Tư Vấn Cá Nhân

Mẫu Contact For đẹp cho đặt mua hàng

Mã code:

<div> [text* tenkhachhang placeholder "Tên của bạn"] </div>
<div> [text* sodienthoai placeholder "Số điện thoại"] </div>
<div> [text* diachi placeholder "Địa chỉ nhận hàng"] </div>
[select* sanpham "Đồng hồ Citizen" "Đồng hồ DW" "Đồng hồ Casio"]
[number soluong placeholder "1"]
[submit "Đặt mua"]
Mẫu Contact Form đẹp Cho đặt Mua Hàng
Mẫu Contact Form đẹp Cho đặt Mua Hàng

Trên đây là những thông tin chi tiết nhất về Plugin Contact Form 7 và hướng dẫn cách tích hợp Form liên hệ WordPress. ThemeNest tin rằng thông qua bài viết này thì bạn xử lý Form liên hệ một cách dễ dàng. Nếu như có bất cứ thắc mắc nào thì hãy để bình luận ở dưới để ThemeNest kịp thời giải đáp.

Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với ThemeNest thông qua các kênh sau:

  • Hotline: 0902 170 180
  • Email: sales@themenest.vn

ThemeNest hiện đang có chương trình khuyến mãi dành cho khách hàng mua theme wordpress. ThemeNest sẽ hỗ trợ quý khách 24/24 với chất lượng theme tốt nhất!

Có tất cả 0 bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0902 170 180