Cài đặt Contact Form 7 kết nối với Gmail để lấy Data

Contact Form 7 là Plugin dạng Contact Form WordPress phổ biến nhất và lâu đời nhất. Mặc dù phổ biến như thế nhưng nhiều người vẫn gặp khó khăn với cách cài đặt Contact Form 7. 

Vậy không để bạn đợi lâu nữa, chúng tôi sẽ giúp bạn cài đặt Contact Form 7 đơn giản và hiệu quả nhất nhé.

1.Giới thiệu về Contact Form 7

Contact Form 7 rõ ràng là một plugin WordPress được ưa chuộng nhất, vì thế Contact Form 7 có đến 5 triệu lượt tải xuống. Chúng có rất nhiều điểm mạnh mà bạn cần phải biết đó là:

Tạo và quản lý nhiều Form liên hệ

Dễ dàng tùy chỉnh các trường biểu mẫu

Sử dụng đánh dấu đơn giản để thay đổi nội dung mail

Chèn biểu mẫu vào bất kỳ trang hoặc bài đăng nào bằng Shortcode..

Và rất nhiều tiện ích mở rộng của bên thứ ba để thêm chức năng bổ sung

https://nxthemes.com/wp-content/uploads/2020/12/word-image-245.jpeg

2.Cách cài đặt Contact Form 7

Bước đầu tiên để thiết lập Biểu mẫu liên hệ 7 là cài đặt plugin trên Website của mình. Để làm như vậy, trong bảng điều khiển WordPress bạn chọn Plugin> Add Plugin từ menu.

https://nxthemes.com/wp-content/uploads/2020/12/word-image-13.png

Sau đó gõ Contact Form 7 vào mục tìm kiếm. Khi Plugin Biểu mẫu liên hệ 7 được hiển thị, hãy nhấp vào Cài đặt -> Kích hoạt .

https://nxthemes.com/wp-content/uploads/2020/12/word-image-246.jpeg

Sau khi kích hoạt, bạn có thể tìm thấy chức năng của plugin trong New Contact của bảng điều khiển WordPress

https://nxthemes.com/wp-content/uploads/2020/12/word-image-14.png

3. Thiết lập Biểu mẫu liên hệ 7

Bạn Click vào Contact > Contact Forms.. Tại đây bạn sẽ thấy bảng quản trị trung tâm, nơi bạn có thể quản lý nhiều Form liên hệ. Bạn cũng sẽ tìm thấy Contact Form mặc định của Contact Form 7, cụ thể là  Contact Form 1 .

https://nxthemes.com/wp-content/uploads/2020/12/word-image-15.png

Contact Form 1 chứa tất cả các Fields mà Contact Form cơ bản có thể cần. Form có thể sử dụng được, chỉ cần bạn copy đoạn mã sau vào bất kỳ trang và bài đăng nào trên trang web

https://nxthemes.com/wp-content/uploads/2020/12/word-image-16.png

3.1 Tạo một contact form mới

Đầu tiên bạn cần đặt tên cho Contact Form của mình, tránh trường hợp đặt nhiều quá thì không nhớ. Trường hợp này mình đặt “FORM TƯ VẤN BẤT ĐỘNG SẢN”

Tiếp theo bạn cuộn xuống Biểu mẫu, tại đây bạn có thể chỉnh sửa mẫu Contact Forrm của mình.

Theo mặc định, Contact Form thêm một số trường vào biểu mẫu mới, bao gồm tên, email, chủ đề, tin nhắn và gửi.

https://nxthemes.com/wp-content/uploads/2020/12/word-image-247.jpeg

Sau khi bạn tích chọn một fields để thêm vào, tất nhiên Mục này bắt buộc sẽ hiện ra. 

Điều bạn cần làm là điền theo hướng dẫn của họ rồi lưu lại.

Lưu ý là điền chữ không có dấu nhé. Xong rồi bạn nhấp nút Chèn vào Form ở dưới.

https://nxthemes.com/wp-content/uploads/2020/12/word-image-248.jpeg

Và đây là kết quả

https://nxthemes.com/wp-content/uploads/2020/12/word-image-249.jpeg

Tuy nhiên bạn cần thẻ <Label> vào trường của mình, vậy bạn có thể sao chép HTML đi kèm với thẻ biểu mẫu từ các trường khác.

Bạn chỉ cần Copy thẻ <Label> thẻ đóng và thẻ mở là được </Label>

<label> Số điện thoại </label>. Bạn bổ sung nó vào

https://nxthemes.com/wp-content/uploads/2020/12/word-image-250.jpeg

3.2 Thiết lập Mail để kiểm soát thông báo qua email

Mail:

Để nhận được thông tin mail mà người dùng gửi đến bạn, bạn cần phải thiết lập mail trong contact Form 7, khi đó bạn mới nhận được mail mà khách hàng hay đối tác gửi cho bạn. Để làm được điều đó, bạn chuyển sang Tab Mail.

Đầu tiên bạn nhấp vào tab Cấu hình Mail để cài đặt kiểu email mà bạn sẽ nhận được từ Contact Form 7 khi có khách hàng điền form thành công.

https://nxthemes.com/wp-content/uploads/2020/12/word-image-251.jpeg

Mail nhận: Bạn điền các email sẽ nhận thông báo khi khách điền form thành công. Tách nhau bằng dấu phẩy.

Mail gửi: Bạn để nguyên.

Tiêu đề: Bạn sửa sao để tiện cho công việc của bạn. Ví dụ như mình cũng OK đấy.

Additional headers: Bạn để nguyên hoặc thêm Cc theo cấu trúc Cc: email1,email2,email3.

Message body: Bạn nên xóa hết rồi soạn lại cho tiện đọc nhanh hay copy. Ví dụ như mình cũng gọn nè.

3.3 Phần thông báo

Phần thông báo chủ yếu là dòng cảm ơn khi khách hàng đăng ký Form thành công. Có thể bạn để là “ Cảm ơn vì đã đăng ký, hoặc chúng tôi sẽ trả lời bạn ngay…

https://nxthemes.com/wp-content/uploads/2020/12/word-image-252.jpeg

4.Chèn Contact Form 7 vào trang bất kỳ

Đầu tiên bạn cần vào phần Form liên hệ > Danh sách form. Hãy sao chép Shortcode của form bạn vừa tạo ở trên

https://nxthemes.com/wp-content/uploads/2020/12/word-image-17.png

Tiếp theo bạn tạo 1 trang bất kỳ rồi chèn mã Code này vào trang đó

https://nxthemes.com/wp-content/uploads/2020/12/word-image-253.jpeg

Sau khi bạn làm xong và lưu lại, tiếp tục chúng ta tận hưởng thành quả nhé

https://nxthemes.com/wp-content/uploads/2020/12/word-image-254.jpeg

5. Kết nối Gmail với Contact Form 7

Mục đích kết nối Gmail với Contact Form 7 sẽ giúp bạn thu thập dữ liệu từ người dùng như: Email, số điện thoại, thông tin về tin nhắn….và nhiều thứ khác.

Để làm được điều đó bạn cần dùng SMTP để hệ thống có thể gửi email. Đầu tiên bạn cần Bạn vào Kho Plugin WordPress > Tìm Plugin tên Easy WP SMTP -> Cài đặt

https://nxthemes.com/wp-content/uploads/2020/12/word-image-255.jpeg

Tiếp theo bạn vào rang Quản lý tài khoản Google

https://nxthemes.com/wp-content/uploads/2020/12/word-image-256.jpeg

Sau đó bạn nhấp vào “Quản lý tài khoản Google”. Giao diện sẽ hiện ra như thế này

https://nxthemes.com/wp-content/uploads/2020/12/word-image-257.jpeg

Bạn tiếp tục nhấn vào  Bảo mật trên menu. Lư ý là 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.

https://nxthemes.com/wp-content/uploads/2020/12/word-image-18.png

Tiếp theo nhấp vào Chọn ứng dụng và chọn Khác (Tên tùy chỉnh).

https://nxthemes.com/wp-content/uploads/2020/12/word-image-258.jpeg Tiếp theo bạn đặt tên

https://nxthemes.com/wp-content/uploads/2020/12/word-image-259.jpeg

Sau đó Bạn sao chép mật khẩu ứng dụng ở vùng có màu vàng, bạn copy xong lưu vào chỗ nào đó. Sau này lấy ra dùng lại

https://nxthemes.com/wp-content/uploads/2020/12/word-image-260.jpeg

Bây giờ bạn cần cài đặt Plugin Easy WP SMTP.

Đị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.

Các phần còn lại bạn để mặc định, nhấp nút Lưu thay đổi

Để biết chúng ta kết nối Gmail với Contact Form 7 thành công hay không, bạn test xem sao nhé

https://nxthemes.com/wp-content/uploads/2020/12/word-image-261.jpeg

https://nxthemes.com/wp-content/uploads/2020/12/word-image-262.jpeg

6. Test đăng ký Contact Form 7

Để biết độ hiệu quả thì mình test thử nhé. Bạn chỉ cần điền vào CF7 thôi, tự nhiên thông tin sẽ về Email của cac bạn

https://nxthemes.com/wp-content/uploads/2020/12/word-image-263.jpeg

Ok. Như vậy mình đã đăng ký thành công rồi đó.

Chúc các bạn thành công

Nguồn: https://nxthemes.com/setup-contact-form-7/