[Sử dụng wordpress] Tạo liên hệ chuyên nghiệp với Contact Form 7

Như các bạn đã biết, bất kỳ website nào cũng có phần liên hệ để giúp website chuyên nghiệp hơn, giúp tiếp cận với mọi người, khách hàng,...một cách đơn giản. Trong bài viết này mình sẽ hướng dẫn các bạn tạo liên hệ chuyên nghiệp với Contact Form 7.



Contact Form 7 (CF7) là một plugin cho wordpress chuyên nghiệp, tính thời điểm hiện tại mình post bài này thì 11,286,850 lượt tải về. Một con số cực lớn. CF7 giúp bạn tạo một trang liên hệ chuyên nghiệp, ngoài ra còn có chức năng chống Spam, gửi file,...

Đầu tiên các bạn có thể gõ Contact Form 7 trong mục Add new Plugin của mục quản lý Plugin nhé. Hoặc các bạn có thể tải tại địa chỉ: http://wordpress.org/plugins/contact-form-7/

Sau khi tải lên bạn Active Plugin để kích hoạt, lúc này trong Admin sẽ có một Menu CONTACT mới:

Bạn click vào đó, mặc định sẽ có một contact, bạn xóa đi cho dễ tiện quản lý :).

Để tạo mới một liên hệ bạn nhấn vào nút Add new bên cạnh tiêu đề Contact Form 7, lúc này một bảng hiện lên, bạn chọn noggin ngữ Việt Nam rồi nhấn Add new nhé.



Sau khi tạo mới một trang hiện ra bạn cần để ý 4 phần sau:

Phần một là tên mà bạn muốn đặt cho mục liên hệ:

Phần hai là phần tạo công cụ và hiển thị ra ngoài website:

Phần 3 là thiết lập mail để gửi thư

Phần 4 là thiết lập thông báo hiển thị.

---

Trong bài hôm nay chúng ta sẽ đi từng phần một.

 

PHẦN 1:

Phần này các bạn đặt tên và tạo shortcode để chèn vào bài viết (post) hoặc trang (page) hoặc custom type nào. Nếu chèn vào widget thì bạn phải dùng hàm do_shortcode để thực hiện.

Sau khi bạn nhập tên cho mục bạn muốn tạo và nhấn Save, nó sẽ hiện ra một shortcode để bạn chèn vào bài viết.

Và khi chạy ra trang nó sẽ hiển thị như bên dưới:

PHẦN 2:

Phần này mình sẽ hướng dẫn các bạn sử dụng để tạo công cụ chèn vào liên hệ, mình sẽ hướng dẫn các bạn sử dụng Text Field, CAPTCHA và File Upload, còn lại các bạn tự nghiên cứu nhé, khá đơn giản mà :)

Đầu tiên mình sẽ hướng dẫn bạn tạo thêm một Text Field.

Bạn nhấn vào Generate Tag rồi chọn Text field

 

Tiếp theo mình dẫn bạn tạo thêm một chèn một CAPTCHA để tránh spam.

Tiếp theo các bạn nhấn vào Generate Tag và chọn CAPTCHA, nếu bạn chưa cài plugin Really Simple CAPTCHA thì bạn phải cài để sử dụng nó nhé.

Sau khi cài xong bạn vào lại và thiết lập như hình, mấy cái này khá đơn giản và giống như phần trước

Chèn File Upload vào mục liên hệ

Tiếp theo bạn tạo File Upload như hình

PHẦN 3:

Phần này mình sẽ hướng dẫn bạn thiết lập mail để khi họ nhấn GỬI thì các thông tin ở Form hiển thị sẽ gửi tới Mail của bạn hoặc của bất kỳ ai.

Bây giờ các bạn để ý lại phần 2 sẽ có 2 mục khi bạn Generate tag đó là mục Copy vào form bên trái (Copy this code and Paste it into the form left) đây là mục để hiển thị ra trang web cho người dùng xem Và mục copy và phần Mail (And, put this code into the .... field bellow (dấu .... là chỉ hướng dẫn chèn vào File Attachment nếu đó là file Upload, vào Mail nếu trường khac)).

Bây giờ phần mình bên trên có 3 trường mình làm thêm đó là: Textfield  (nhóm báo cáo), CAPTCHA, và File Upload (File báo cáo).

Với Textfield chèn vào mail là [nhombaocao], bạn có thể copy đoạn này dán vào subject của phần mail hoặc Message Body của Mail. Phần CAPTCHA chỉ là kiểm tra spam nên sẽ không chèn, và File Upload như ở phần 2 là nó sẽ chèn vào mục File Attachment như hình mình làm bên dưới:



và bạn có thể thiết lập Mail sau khi nhấn GỬI sẽ gửi vào Mail nào trong mục To nhé.

Ngoài ra bạn có thể gửi thêm 1 bản COPY vào email khác nếu bạn Tick vào Use Mail (2).

PHẦN 4:

Phần này khá đơn giản, khi họ nhấn GỬI thì nó sẽ thông báo gì, bạn chỉ cần sửa hoặc để mặc định thôi.

Sau đó các bạn nhấn SAVE và copy shortcode chèn vào bài viết là xong.

 

VÀ KẾT QUẢ CỦA 4 PHẦN NHƯ SAU:

Phần viết bài (Phần 1)

Phần hiển thị ngoài trang chủ (Phần 2)

Phần hiển thị thông báo khi gửi thành công (Phần 4)

Phần bạn sẽ nhận được khi thiết lập mục Mail (Phần 3)

KẾT LUẬN

Contact Form 7 là một plugin mạnh, tuy nhiên có rất nhiều plugin tạo form (trả phí) giúp bạn tạo chuyên nghiệp hơn nhưng đây là FREE và nó HẦU HẾT làm được những thứ cho một LIÊN HỆ CHUYÊN NGHIỆP

Bài viết khá dài, mình đã hướng dẫn các bạn sử dụng Contact Form 7 dễ hiểu, nếu bạn có thắc mắc gì vui lòng để lại bình luận bên dưới, mình sẽ giải đáp nếu mình Có thể  :aaa:
Nguồn: Tự Học IT Online - http://tuhocit.net