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

Plugin Contact Form 7 là một trong những gói mở rộng có chức năng tạo form liên hệ gửi và nhận email trên website tốt nhất dành cho wordpress. Bởi tính tương thích cao, dễ cài đặt và sử dụng đồng thời bản thân plugin Contact Form 7 còn hỗ trợ nhiều plugin con khác nữa.

Ở bài viết này mình sẽ hướng dẫn các bạn cách cấu hình và tạo một biểu mẫu form liên hệ trên website, blog của mình, do những phiên bản về đây plugin contact form có nhiều thay đổi để thêm vào đó nó sẽ có nhiều extended package cho nên những người chưa cài đặt và sử dụng bao giờ sẽ hơi bỡ ngỡ. Bên cạnh đó mình sẽ hướng dẫn các bạn cách chỉnh sửa form email gửi đến sao cho đẹp mắt và dễ nhìn nhất.

Cài đặt và cấu hình Contact Form 7

Đầu tiên các bạn cần tải và cài đặt plugin tại trang chủ hoặc truy cập vào Gói mở rộng -> Cài mới rồi tiến hành tìm từ khóa Contact From 7 như hình dưới:

Hướng dẫn cài plugin conatct form 7
Bạn cần cái đặt và kích hoạt plugin

Sau khi cài đặt và kích hoạt thành công bạn sẽ thất có một menu Contact ở phía bảng điều khiển bên trái. Bạn cần di chuột vào đó và click vào Add New để tiến hành tạo form, mặc định khi chúng ta tạo form hệ thống sẽ sinh ra chó chúng ta một mẫu demo nhưng mình sẽ không sử dụng và mình sẽ xóa đi xây dựng lại từ đầu. Để rõ hình dung bạn hãy nhìn hình phía dưới.

giao-dien-plugin-contact-form-7
Giao diện tạo form liên hệ

Mình sẽ giải thích sơ qua các công dụng của nó như sau:

  1. Form: Nơi chúng ta sử dụng các công cụ phía dưới để tạo chức năng cho form.
  2. Mail: Nơi thiết lập cấu hình email và nội dung tin nhắn tới email.
  3. Messages: Nơi dịch các đoạn ngôn ngữ tiếng Anh sang tiếng Việt khi thực hiện gửi Email.
  4. Additional Settings: Thiết lập các đoạn mã bổ sung nâng cao.
  5. Là nơi mà các gói mở rộng dành cho plugin được cài.

Bây giờ để tạo form chúng ta hãy click vào các công cụ tương ứng phía dưới ở đây mình sẽ tạo một khung nhập họ tên người gửi và mình sẽ click vào text. Các bạn xem hình dưới để biết rõ hơn.

thiet-lap-mot-truong-cua-plugin-contact-form-7
Thiết lập 1 trường của form

Ở đây sẽ có 5 bước mà bạn cần chú ý, bạn cũng có thể tích đủ vào 5 cái như của mình hoặc không đủ cũng không sao, mình sẽ giải thích nó như sau:

  1. Required field: Chức năng bắt buộc người dùng phải nhập vào mới có thể gửi mail.
  2. Name: ID của Field, mỗi một chức năng sẽ có ID khác nhau.
  3. Default value: Nhập tên kêu gọi người dùng.
  4. Use this text as the placeholder of the field: Nó sẽ hiển thị tên kêu gọi trong mỗi form chức năng.
  5. Insert tag: Hoàn tất quá trình.

Bạn cần làm việc này lặp đi lặp lại tương ứng với mỗi chức năng bạn có trong form liên hệ: Ở đây mình chỉ có yêu cầu người dùng : nhập họ tên, email, tiêu đề liên hệ, nội dung liên hệ cho lên đoạn mã của mình sẽ như sau:

[text* text-914 placeholder "Nhập tên của bạn ( Bắt buộc )"]

[email* email-531 placeholder "Nhập email của bạn ( Bắt buộc )"]

[text* text-915 placeholder "Nhập tiêu đề ( Bắt buộc )"]

[textarea* textarea-131 placeholder "Nhập nội dung ( Bắt buộc )"]

[submit "Gửi thư"]

Sau khi đã tạo được một mẫu với các chức năng thích hợp cho mình bạn hãy Save lại. Bạn hãy để ý ở dưới phần tên form sẽ có một đoạn short code kiểu dạng: [contac t-form-7 id="xxx" title="tên form"] đây chính là đoạn mã để chúng ta đem đi dán vào bất cứ bài viết hoặc trang nào bạn thích và sau khi dán xong bạn sẽ có một mẫu form tương ứng với các chức năng bạn đã thêm vào như thế này.

bieu-mau-form
Biểu mẫu form liên hệ trên trang Bảo Nguyễn

Chỉnh sửa nội dung email trong contact form 7

Sau khi đã có một mẫu form như ý muốn. bạn cần phải thiết lập một số thông tin email trước khi có thể nhận được Email, mình sẽ đánh số theo thứ tự ở hình bên dưới bạn cần làm đúng thì mới có được 1 email hoàn chỉnh.

Thiết lập tổng quan của email:

Thiết lập phần tổng quan nhận mail bao gồm tiêu đề
Thiết lập phần tổng quan nhận mail bao gồm tiêu đề mail
  1. Các Short code chúng ta tạo ở bên phần tạo liên hệ sẽ được sinh ra và chuyển sang đây.
  2. To : Thư sẽ được gửi đến địa chỉ email nào.
  3. From : Thư được gửi từ đâu ( bạn cứ điều dạng xxx@teenmiencuaban.com ) là được.
  4. Subject: Tiêu đề của thư sẽ hiển thị trong phần email chưa đọc.
  5. Additional Headers : Tiêu đề trả lời lại thư ( riêng cái này bạn không được dịch từ Reply-To: sang tiếng Việt ) nếu bạn muốn trả lời lại cho email người gửi ngay trong email họ gửi trên website của của bạn cho bạn.
Do plugin Contact Form 7 sẽ dựa vào những đoạn code ngắn ứng với mỗi trường nhập của người dùng để gán lên thư gửi cho bạn cho lên những đoạn short code ngắn dạng [textarea-131] …..Bạn phải đổi lại cho đúng, bạn có thể đặt giống của mình nhưng miễn sao những đoạn short code đổi đúng là được.

Thiết lập nội dung mail:

Thông thường thư gửi đi sẽ rất khó đọc, cho lên bước này bạn sẽ thiết lập cho thư hiển thị rõ từng chi tiết và chung quy nó sẽ giúp ta khi nhận thư đọc sẽ dễ hơn, bạn hãy làm giống hình bên dưới của mình chỉ cần thay các short code tương ứng trên form của bạn vào là được.

Thiết lập hiển thị cho nội dung của Email
Thiết lập hiển thị cho nội dung của Email

Sau khi bạn thiết lập và thay thành công thì lúc này ta hay thử gửi 1 email nhé, và thành quả sẽ như hình dưới:

tieu-de-noi-dung
Đây là tiêu đề mình nhận được trong mail
Còn đây là nội dung chi tiết
Còn đây là nội dung chi tiết

Như vậy là mình đã hướng dẫn xong cho các bạn cách cài đặt, cấu hình và sử dụng plugin Contact Form7 mới nhất rồi. Ở bài viết sau mình sẽ hướng dẫn các bạn cách khắc phục một số lỗi và tùy biến form đẹp hơn.

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái phong cách công sở và thích bàn luận quân sự. Đã từng học tại HaUI khóa K16.

Leave a Reply

avatar
  Subscribe  
Notify of

Create Account



Log In Your Account



Bảo Nguyễn chỉ hỗ trợ khách hàng qua Email, zalo và hotline ( 0169.865.5334 ).Xem chi tiết