Nếu bạn đang xây dựng một website, việc tạo một trang liên hệ là rất quan trọng để khách hàng có thể dễ dàng liên lạc với bạn. Contact Form 7 là một plugin miễn phí và rất phổ biến cho WordPress giúp bạn tạo các biểu mẫu liên hệ dễ dàng và linh hoạt. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo mẫu Contact Form 7 cho website của bạn.
Cách Cài Đặt Và Sử Dụng Plugin Contact Form 7 (CF7)
Bước 1: Cài Đặt Plugin Contact Form 7
Đầu tiên, bạn cần cài đặt và kích hoạt plugin Contact Form 7 trên trang quản lý WordPress của mình. Sau khi cài đặt thành công, bạn sẽ thấy một mục mới được thêm vào thanh điều hướng bên trái có tên “Contact”.
Bước 2: Tạo Biểu Mẫu Liên Hệ
Khi bạn đã cài đặt và kích hoạt plugin Contact Form 7, bạn sẽ có thể tạo các biểu mẫu liên hệ của mình. Để tạo một biểu mẫu liên hệ mới, hãy nhấp vào “Contact” và sau đó chọn “Add New”. Bạn sẽ thấy một trang mới xuất hiện với một biểu mẫu mặc định.
Bước 3: Sửa Đổi Biểu Mẫu Liên Hệ
Sau khi tạo biểu mẫu liên hệ của bạn, bạn có thể sửa đổi nó để phù hợp với nhu cầu của mình. Contact Form 7 cho phép bạn thêm và xóa các trường như tên, email, số điện thoại và thông điệp.
Bước 4: Thêm Các Tùy Chọn Khác
Ngoài các trường cơ bản, Contact Form 7 cũng cho phép bạn thêm các tùy chọn khác như captcha, hộp kiểm, nút gửi và nhiều hơn nữa. Chỉ cần chọn các tùy chọn muốn sử dụng và thêm chúng vào biểu mẫu của bạn.
Bước 5: Nhận Thông Báo Liên Hệ
Khi khách hàng điền vào biểu mẫu liên hệ của bạn, bạn sẽ nhận được một email thông báo với nội dung của tin nhắn. Bạn có thể sửa đổi cấu hình này trong phần “Mail” của biểu mẫu của mình.
Bước 6: Tùy Chỉnh Giao Diện
Nếu bạn muốn tùy chỉnh giao diện của mẫu liên hệ của mình, bạn có thể sử dụng CSS tùy chỉnh. Contact Form 7 cũng cho phép bạn thêm các lớp CSS vào biểu mẫu của mình để dễ dàng tùy chỉnh.
Bước 7: Đăng Biểu Mẫu Liên Hệ Của Bạn
Sau khi đã tạo và sửa đổi biểu mẫu liên hệ của bạn, bạn có thể đăng nó trên trang web của mình bằng cách sử dụng shortcode được cung cấp bởi Contact Form 7. Chỉ cần sao chép và dán mã shortcode vào bất kỳ trang hoặc bài viết nào trên trang web của bạn.
Bước 8: Kiểm Tra Biểu Mẫu Liên Hệ Của Bạn
Trước khi đưa biểu mẫu liên hệ vào trang web của bạn, nên kiểm tra xem nó hoạt động đúng như mong muốn. Hãy điền thông tin vào biểu mẫu và gửi để đảm bảo rằng bạn nhận được email thông báo thành công.
Bước 9: Quản Lý Biểu Mẫu Liên Hệ
Khi bạn đã đăng biểu mẫu liên hệ của mình lên trang web, bạn cần quản lý nó để đảm bảo rằng bạn nhận được tất cả các thông điệp từ khách hàng của mình. Bạn có thể xem và quản lý tất cả các thông điệp liên hệ của mình trong phần “Messages” của Contact Form 7.
Bước 10: Tối Ưu Hóa Biểu Mẫu Liên Hệ Của Bạn
Cuối cùng, để đảm bảo rằng biểu mẫu liên hệ của bạn hoạt động tốt nhất, hãy tối ưu hóa nó bằng cách sử dụng các tiện ích phân tích trang web. Những công cụ này giúp bạn theo dõi số lượng lượt truy cập và tần suất gửi thông điệp, từ đó tăng cường tính hiệu quả của biểu mẫu liên hệ của bạn.
Mẫu Contact Form 7 (CF7) Đẹp Cho Website WordPress
Dưới đây là một số mẫu CF7 đẹp cho website WordPress có sẵn CSS:
Mẫu 01: 3 cột lồng nhau
Mẫu này có thiết kế đơn giản và hiện đại, với các trường thông tin được sắp xếp gọn gàng trong 3 cột lồng nhau. Mẫu này phù hợp với các website có giao diện tối giản.
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.formdangky { width: 100%; max-width: 500px; margin: 0 auto; } .formdangky .small-5, .formdangky .small-2 { max-width: 100%; flex-basis: 100%; float: center !important; align-content: center !important; } .formdangky input[type='submit'] { min-height: 2.5em !important; width: 100%; } |
Mẫu 02: 3 cột
Mẫu này có thiết kế tương tự như mẫu 01, nhưng các trường thông tin được sắp xếp theo 3 cột riêng biệt. Mẫu này phù hợp với các website có giao diện hiện đại và năng động.
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.formdangky { width: 100%; max-width: 500px; margin: 0 auto; } .formdangky .column { width: 33.3333%; float: left; margin-bottom: 15px; } .formdangky input[type='submit'] { min-height: 2.5em !important; width: 100%; } |
Mẫu 03: 2 cột
Mẫu này có thiết kế đơn giản với các trường thông tin được sắp xếp theo 2 cột. Mẫu này phù hợp với các website có giao diện tối giản và tập trung vào nội dung.
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.formdangky { width: 100%; max-width: 500px; margin: 0 auto; } .formdangky .column { width: 50%; float: left; margin-bottom: 15px; } .formdangky input[type='submit'] { min-height: 2.5em !important; width: 100%; } |
Chèn icon vào Form
Để chèn icon vào Form, chúng ta sẽ sử dụng thẻ HTML <i>. Ví dụ, để chèn icon email vào trường email, chúng ta có thể sử dụng đoạn code sau:
|
1 2 |
<input type="email" name="email" placeholder="Email" class="wpcf7-form-control wpcf7-text" id="email"> <i class="far fa-envelope"></i> |
Tương tự, để chèn icon phone vào trường phone, chúng ta có thể sử dụng đoạn code sau:
|
1 2 |
<input type="tel" name="phone" placeholder="Phone" class="wpcf7-form-control wpcf7-text" id="phone"> <i class="fas fa-phone"></i> |
Chúng ta có thể sử dụng bất kỳ icon nào mà chúng ta muốn. Icon có thể được lấy từ thư viện icon của Font Awesome hoặc từ các thư viện icon khác.
Một số lưu ý khi tùy biến Contact Form 7
Khi tùy biến Contact Form 7, chúng ta cần lưu ý một số điều sau:
- Các thay đổi về CSS sẽ được áp dụng cho tất cả các Form sử dụng plugin Contact Form 7.
- Nếu chúng ta muốn thay đổi CSS cho một Form cụ thể, chúng ta có thể tạo một template cho Form đó.
- Để chèn icon vào Form, chúng ta có thể sử dụng thẻ HTML
<i>.
Kết Luận
Tạo một biểu mẫu liên hệ là cách tuyệt vời để khách hàng có thể dễ dàng liên lạc với bạn. Với plugin Contact Form 7, việc tạo và quản lý biểu mẫu liên hệ đã trở nên đơn giản hơn bao giờ hết. Hãy sử dụng các bước trong bài viết này để tạo một biểu mẫu liên hệ chuyên nghiệp và hiệu quả cho trang web của bạn.
