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
- Đăng nhập vào bảng quản trị WordPress của bạn.
- Chọn “Plugins” > “Add New”.
- Tìm kiếm “Contact Form 7” và nhấn “Install Now”.
- Sau khi cài đặt, nhấn “Activate”.
Bước 2: Tạo biểu mẫu mới – cách sử dụng contact form 7 trong wordpress
- Trong bảng quản trị, chọn “Contact” > “Add New”.
- Nhập tên cho biểu mẫu mới trong ô “Enter title here”.
- 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
- 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ụ:
|
1 2 3 4 5 |
[text* your-name placeholder "Họ và tên"] [email* your-email placeholder "Email"] [textarea your-message placeholder "Lời nhắn"] [submit "Gửi đi"] |
Bước 3: Thiết lập email gửi đi – cách sử dụng contact form 7 trong wordpress
- Chuyển sang tab “Mail”.
- Đ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ụ:
|
1 2 3 4 5 6 7 8 9 |
Subject: Liên hệ từ website Nội dung: Tên người gửi: [your-name] Email liên hệ: [your-email] Lời nhắn: [your-message] |
|
1 2 |
Bước 4: Cấu hình thông báo – cách sử dụng contact form 7 trong wordpress
- Chuyển sang tab “Messages”.
- 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
- 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ệ"]). - 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ị.
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.