Hướng dẫn tạo một Form chuyên nghiệp với Plugin Contact Form 7

Trong quá trình bán hàng thì chắc hẳn, sẽ có lúc bạn muốn tạo một cái form gì đó để thu thập dữ liệu phải không nào? Hay đôi lúc chỉ đơn giản là muốn tạo một form liên hệ cho khách hàng như trang của mình chẳng hạn. Vậy thì bài viết này, mình sẽ hướng dẫn bạn tạo ra một form bất kỳ mà bạn muốn. Thiết lập form sao cho phù hợp với nhu cầu của bạn với Contact Form 7, một plugin hoàn toàn miễn phí trên WordPress.

1. Cài đặt plugin Contact Form 7

Để cài đặt plugin này thì quá đơn giản rồi, bạn chỉ cần vào Gói mở rộng -> Cài mới -> Tìm kiếm “Contact Form 7” -> Cài Đặt -> Kích hoạt 

Cài đặt và kích hoạt Contact Form 7

Cài đặt và kích hoạt Contact Form 7

2. Tạo và thiết lập một form với Contact Form 7

Để tạo một form bất kỳ, bạn hãy vào Form liên hệ -> Tạo Form mới -> Bạn cứ ấn “Lưu” lại đã. Như vậy sẽ được kết quả như hình dưới.

Thiết lập các trường nhập dữ liệu cho Form

Thiết lập các trường nhập dữ liệu cho Form

Bạn hãy chú ý đến phần nền xanh dưới tên form, đó chính là phần shortcode của form. Nếu bạn không biết shortcode là gì và cách dùng như thế nào thì mình sẽ hướng dẫn ngay bên dưới. Bây giờ ban hãy copy đoạn shortcode trên, sau đó tạo một trang mới, nội dung trang thì dán đoạn shortcode đó vào, rồi ấn lưu lại(như hình).

 

Sau đó hãy ấn Xem Trước và bạn sẽ được một form như hình dưới

Demo một Form trong Contact Form 7

Demo một Form trong Contact Form 7

Ở đây mình đã chỉnh nền thành màu xám cho dễ nhìn. Còn ở website của bạn, có thể nó sẽ là nền trắng hoặc nền chung của website. Bây giờ hãy so sánh Form này với những dòng tương ứng bên trên, bạn sẽ hiểu.

So sánh giữa trang thiết lập và kết quả

So sánh giữa trang thiết lập và kết quả

Để thêm một trường mới, bạn hãy chọn loại trường nhập văn bản mà bạn muốn như “văn bản ngắn”, “Email”, “URL”,… ở bên trên khung thiết lập.

Thêm một trường mới trong contact form 7

Thêm một trường mới trong contact form 7

Mình sẽ giải thích một chút:

  • Sử dụng dòng này làm chữ chìm trong mẫu nhập(placeholder): Nó sẽ hiển thị một chữ ví dụ mờ bên trong trường. Khi người dùng nhập dữ liệu của họ vào thì dòng chữ này sẽ tự mất.
  • Thuộc tính ID, Class: Cái này dành cho ai biết CSS, còn không biết thì thôi, bỏ qua.

Sau đó thì ấn Chèn vào Form, và bạn hãy tự tìm hiểu cách sắp xếp từ mẫu có sẵn. Cứ xóa thử một trường, thêm mới một trường, thêm mới một nhãn(label), sắp xếp lại thứ tự các trường nhập liệu. Chứ mình cũng chẳng biết hướng dẫn trên này sao nữa. Nó khá đơn giản nhưng hướng dẫn thì rất mất thời gian.

Sau đó hãy chuyển sang tab Cấu hình Mail để tùy chỉnh cấu trúc thư. Tại đây, bạn có thể điều chỉnh địa chỉ mail gửi thư và địa chỉ mail nhận thư. Nội dung thư theo ý bạn muốn. Những cái này đề ghi bằng tiếng Việt rất rõ ràng, nên mình sẽ không giải thích nữa.

Nếu như bạn gặp khó khăn gì, có thể để lại comment ở bên dưới, mình sẽ giải đáp. Hoặc bạn cũng có thể tìm Video trên Youtube nếu vẫn không biết cách sử dụng.

2018-07-19T13:17:17+00:00

Leave A Comment