cách sử dụng contact form 7 trong wordpress

cách sử dụng contact form 7 trong wordpress
cách sử dụng contact form 7 trong wordpress

Contact Form 7 là một plugin mã nguồn mở dành cho WordPress, giúp tạo và quản lý các biểu mẫu liên hệ trên trang web của bạn. Dưới đây là hướng dẫn sử dụng Contact Form 7 chi tiết đến từng bước.

cách sử dụng contact form 7 trong wordpress

Bước 1: Cài đặt và kích hoạt plugin

  1. Đăng nhập vào bảng quản trị WordPress của bạn.
  2. Chọn “Plugins” > “Add New”.
  3. Tìm kiếm “Contact Form 7” và nhấn “Install Now”.
  4. Sau khi cài đặt, nhấn “Activate”.
cách sử dụng contact form 7 trong wordpress
cách sử dụng contact form 7 trong wordpress

Bước 2: Tạo biểu mẫu mới – cách sử dụng contact form 7 trong wordpress

  1. Trong bảng quản trị, chọn “Contact” > “Add New”.
  2. Nhập tên cho biểu mẫu mới trong ô “Enter title here”.
  3. Sử dụng các nút công cụ để thêm trường thông tin vào biểu mẫu.

Ví dụ:

  • Text: Thêm một ô nhập liệu văn bản thông thường
  • Email: Thêm ô nhập liệu email
  • URL: Thêm ô nhập liệu URL
  • Tel: Thêm ô nhập liệu số điện thoại
  • Date: Thêm chọn ngày
  • Textarea: Thêm vùng nhập liệu văn bản lớn (đa dòng)
  • Drop-down menu: Thêm danh sách lựa chọn theo kiểu dropdown
  • Checkboxes: Thêm danh sách các ô kiểm tra
  • Radio buttons: Thêm các nút lựa chọn radio
  • Acceptance: Điều khoản đồng ý
  • Quiz: Câu hỏi bảo mật
  • reCAPTCHA: Bảo mật kiểm tra không phải robot (cần cài đặt API key)
  • Submit button: Nút gửi
cách sử dụng contact form 7 trong wordpress
cách sử dụng contact form 7 trong wordpress
  1. Sửa đổi trường thông tin theo ý muốn bằng cách thay thế hoặc thêm mã ngắn.

Ví dụ:

Đọc thêm :   Theme Flatsome WordPress : Lựa chọn tối ưu cho web thương mại điện tử

Bước 3: Thiết lập email gửi đi – cách sử dụng contact form 7 trong wordpress

  1. Chuyển sang tab “Mail”.
  2. Điền thông tin vào các trường sau:
  • To: Địa chỉ email nhận.
  • From: Địa chỉ email gửi (thường là địa chỉ của website).
  • Subject: Tiêu đề email.
  • Additional Headers: Thêm tiêu đề phụ (không bắt buộc).
  • Message Body: Nội dung email, trong đó có thể sử dụng các mã ngắn từ biểu mẫu.

Ví dụ:

cách sử dụng contact form 7 trong wordpress
cách sử dụng contact form 7 trong wordpress

Bước 4: Cấu hình thông báo – cách sử dụng contact form 7 trong wordpress

  1. Chuyển sang tab “Messages”.
  2. Thiết lập nội dung các thông báo phản hồi cho người dùng sau khi gửi biểu mẫu.

Bước 5: Thêm biểu mẫu vào trang hoặc bài viết

  1. Lưu lại mã ngắn (shortcode) của biểu mẫu (ví dụ: [contact-form-7 id="123" title="Liên hệ"]).
  2. Trong trang hoặc bài viết muốn hiển thị biểu mẫu, dán mã ngắn vào vị trí cần hiển thị.
Đọc thêm :   Download Theme Flatsome Cho Website WordPress

Bước 6: Tùy chỉnh CSS và JavaScript – cách sử dụng contact form 7 trong wordpress

Nếu muốn tùy chỉnh giao diện và chức năng của biểu mẫu, bạn có thể sửa đổi file style.css và scripts.js trong theme của bạn, hoặc sử dụng plugin tùy chỉnh CSS/JavaScript để thêm mã riêng.

Sau khi hoàn thành các bước trên, bạn đã có một biểu mẫu liên hệ hoạt động trên website WordPress của mình. Hãy kiểm tra kỹ để đảm bảo rằng công cụ này hoạt động như mong muốn và giúp khách hàng gửi thông tin liên hệ với bạn một cách thuận tiện.

Leave a comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *