Tổng hợp một số mẫu Contact Form với Contact Form 7 cho website WordPress sử dụng theme Flatsome

Contact Form 7 là một plugin tạo contact form rất phổ biến trong thiết kế website WordPress. Ưu điểm của plugin này là khá nhẹ nhàng nhưng lại khó sử dụng đối với “tay mơ” do không sử dụng tính năng kéo thả trực quan. Trong bài viết này, chúng tôi xin chia sẻ với các bạn cách làm một số mẫu contact form với Contact Form 7.

Mẫu form liên hệ với chỉ 01 cột thông tin

Form liên hệ cơ bản bao gồm các trường thông tin như: Họ tên, Email, Số điện thoại, Địa chỉ, Nội dung liên hệ và nút Gửi đi. Để tạo form này, chúng ta làm theo mẫu sau:

[text* YourName placeholder "Họ tên"]
[text* YourPhone placeholder "Điện thoại"]
[email YourEmail placeholder "Email"]
[text* YourAdd placeholder "Địa chỉ"]
[textarea YourMess placeholder "Nội dung"]
[submit "Gửi đi"]

Thêm một chút CSS

.wpcf7-text, .wpcf7-textarea {
    border: 1px solid #000 !important;
    border-radius: 5px !important;
    box-shadow: none!important;
}
.wpcf7-submit {
    border-radius: 5px !important;
    background-image: linear-gradient(to right, #be814a, #eec58f) !important;
    color: #000 !important;
    border: none !important;
}

Kết quả:

Nếu muốn sử dụng nhãn cho mỗi trường thông tin thì làm theo mẫu sau:

<label>Họ tên (*)</label>
[text* YourName placeholder "Họ tên"]
<label>Số điện thoại (*)</label>
[text* YourPhone placeholder "Điện thoại"]
<label>Email</label>
[email YourEmail placeholder "Email"]
<label>Địa chỉ</label> 
[text YourAdd placeholder "Địa chỉ"]
<label>Nội dung liên hệ</label>
[textarea YourMess placeholder "Nội dung"]
[submit "Gửi đi"]

Kết quả

Về tôi

Minh Anh

Xin chia sẻ những phần việc nhỏ ở các dự án đã triển khai để tiện sử dụng lại ở những dự án khác, giúp rút ngắn thời gian hoàn thành sản phẩm, giảm chi phí cho đối tác và khách hàng.