Hướng dẫn sử dụng Plugin Contact Form 7 từ A đến Z

Trong tất cả các Plugin có tính năng soạn form gửi mail miễn phí, Plugin Contact Form 7 đang đứng dầu về số lượt tải và active. Số domain đã active đạt hơn 5 triệu lượt sử dụng. Hiện nay có rất nhiều form contact, nhưng riêng Plugin Contact Form 7 luôn được ưu tiên sử dụng do tính tiện dụng, nhẹ và gửi form hiệu quả.

Trong bài viết này mình sẽ từng bước hướng dẫn sử dụng contact form 7 cho các bạn để có thể tạo được một form liên hệ chuyên nghiệp theo nhu cầu của riêng bạn.

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

Cách cài đặt thì Bạn chỉ cần search Contact Form 7 trong admin, phần này mình không nhắc lại cách cài đặt plugins nhé

Bước 1: Click Setting trong Contact Form 7
Ở trang danh sách plugins đã cài đặt Bạn hãy click vào Setting của Plugin Contact Form 7

Bước 2: Tạo mới From
Sau đó Click add new hoặc edit form có sẵn nếu Bạn chưa dùng contact form mặc định ban đầu

Bước 3: Cài đặt cụ thể Contact Form 7
Hãy cài đặt theo ảnh dưới đây

Sau đó copy mã shortcode ở trên. ở ví dụ này là mã [contact-form-7 id=”10″ title=”Contact form 1″]

Bước 4: Gắn mã Contact Form 7

Bạn chỉ cần paste mã ở trên vào phần nội dung page hoặc post là được nhé

Và thành quả là:

2. Cách sửa đổi các cài đặt Plugin Contact Form 7

Thiết lập Form cho người liên hệ

Trong giao diện bạn sẽ thấy Tab Form là thông tin các trường được liệt kê và bên dưới là một số trường đã được tạo mặc định sẵn cho bạn.

Trong đó:

• Text: trường nhập chữ cho tên tiêu đề, liên hệ
• Email: trường để nhập email liên hệ của người đọc
• URL: trường cho phép nhập link
• Tel: nhập thông tin số điện thoại
• Number: nhập giá trị đầu vào là số
• Date: trường cho phép chọn ngày/tháng/năm
• Text are: cho phép nhập định dạng text với khung hiển thị lớn hơn
• Drop-down menu: cho phép chọn giá trị định sẵn với menu thả
• Checkboxes: trường cho phép dùng nút kiểm check
• Radio buttons: cho phép chọn một giá trị có sẵn
• Acceptance: hộp kiểm chấp nhận để xác nhận sự đồng ý của người gửi với một điều kiện nào đó.
• Quiz: khai báo nội dung theo mẫu Quiz
• File: cho phép upload file kèm theo nội dung
• Submit:chèn một nút gửi

Khi bạn đã hiểu ý nghĩa của các trường thì có thể thêm các trường đó vào mẫu liên hệ tùy theo mục đích của bạn.

Bạn tích vào trường cần thêm sau đó tiến hành đặt tên cho trường tại mục Name. Bạn có thể yêu cầu bắt buộc phải nhập thông tin trường này bằng cách nhấn kiểm vào Required field. Trường hợp không bắt buộc đối với người liên hệ thì bạn không cần kiểm vào nó.

Ví dụ: Kết quả thu được với hướng dẫn sử dụng contact form 7 khi thêm trường yêu cầu nhập số điện thoại như hình dưới

Cài đặt cụ thể Contact Form 7 nếu Bạn muốn sửa Email hiển thị khi người dùng nhận email hoặc đổi tên Email hiển thị thì sửa trong mục “mail”

Hãy xem ảnh dưới đây:

Ở phần nội dung email gửi đi. Bạn có thể tùy biến các trường dữ liệu như tiêu đề, tên khách hàng. Bạn chỉ cần sử dụng các tag dạng như: [your-name][your-email][your-subject][your-message]. Xin lưu ý là tag này phải tồn tại trong form này nhé

Ví dụ cụ thể: bạn có thể soạn 1 câu “Xin cảm ơn Quý Khách [your-name] đã liên hệ chúng tôi. Chúng tôi đã nhận được thông tin phản hồi của Quý khách. Chúng tôi sẽ liên hệ lại trong vòng 4h làm việc”

=> Như vậy tên khách hàng sẽ tự động thay thế vào mục [your-name] Họ nhập gì ở form trong trường [your-name] thì phần nội dung sẽ điền tương ứng.

3. Cách sửa thông báo sau khi khách hàng submit Form trên website của Bạn

Trong mục Messages Bạn có thể sửa các dòng thông báo sau khi Khách hàng submit Form

4. Thiết kế Contact form 7 với mã CSS tùy chỉnh

Để có một giao diện form liên hệ đẹp hơn như thay đổi font chữ cũng như màu sắc của form liên hệ mới. Bạn tiếp tục vào Menu Additional Settings. Tại đây, bạn có thể thêm các mã CSS tùy chỉnh vào đó.

Trong bài viết hướng dẫn sử dụng contact form 7 này thì phần chỉnh sửa CSS nâng cao này bạn cần phải biết một chút về Code để thiết kế theo tùy biến của mỗi người nên mình sẽ không đưa ra ví dụ. Trường hợp bạn muốn tham khảo để tùy biến thì có thể truy cập tại đây để xem hướng dẫn.

5. Sửa lỗi khi không gửi form liên hệ

Trong phần hướng dẫn sử dụng contact form 7 này bạn sẽ bị vướng việc Test gửi email và nhận email thì có thể do hosting của bạn không hỗ tính năng này. Do đó bạn cần tham khảo bài viết dưới đây để có thể khắc phục được nhé.

• Hướng dẫn cấu hình gửi mail SMTP WordPress

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