Với hơn 1 triệu người dùng trên khắp thế giới, Contact Form 7 là một trong những plugin contact form phổ biến nhất dành cho WordPress. Nhược điểm lớn nhất của chúng là thiết kế trông rất đơn giản. May thay, Contact Form 7 có thể được thiết kế dễ dàng bằng cách sử dụng CSS trong theme WordPress. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo các mẫu thiết kế contact form 7 trong WordPress.

Bắt đầu

Giả định rằng bạn đã cài đặt Contact Form 7 plugin và đã tạo ra contact form đầu tiên. Bước tiếp theo là sao chép các shortcode vào các contact form và dán nó vào một bài WordPress hoặc một trang mà bạn muốn form được hiển thị.

Để thuận tiện hơn, chúng tôi đã sử dụng các contact form mặc định và thêm nó vào một trang WordPress. Dưới đây là contact form trên trang web thử nghiệm của chúng tôi.

Như bạn có thể thấy rằng các contact form được thừa hưởng một số style từ theme WordPress hiện tại. Ngoại trừ việc nó rất căn bản.

Chúng tôi sẽ thiết kế Contact Form 7 bằng cách sử dụng CSS. Tất cả các CSS đi vào theme hoặc stylesheet của theme con.

Thiết kế Contact Form 7 trong WordPress

Contact Form 7 tạo ra một code rất thích hợp và tiêu chuẩn cho các form. Mỗi phần tử trong các form có một lớp ID và CSS thích hợp liên kết với nó.

Mỗi contact form sử dụng lớp .wpcf7 CSS mà bạn có thể sử dụng để thiết kế form của bạn.

Trong ví dụ này, chúng tôi đang sử dụng một font chữ Google Lora trong các trường đầu vào của chúng tôi.

div.wpcf7 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Sau khi áp dụng CSS này thì contact form sẽ như sau:

Thiết kế Nhiều Contact Form 7 Forms

Vấn đề với CSS chúng ta sử dụng ở trên là nó sẽ được áp dụng cho tất cả các Contact Form 7 form trên trang web của bạn. Nếu bạn đang sử dụng nhiều contact form và muốn thiết kế chúng một cách khác nhau, bạn sẽ cần phải sử dụng ID được tạo ra bởi contact form 7 cho mỗi form.

Rất đơn giản thôi, bạn chỉ cần mở một trang chứa các form bạn muốn thay đổi. di chuột tới trường đầu tiên trong biểu mẫu, click chuột phải và chọn Inspect Element. Các màn hình trình duyệt sẽ phân chia, và bạn sẽ thấy code nguồn của trang. Trong code nguồn, bạn cần phải xác định vị trí dòng bắt đầu của các mẫu code.

Như bạn có thể nhìn thấy trong ảnh chụp màn hình ở trên, code mẫu liên hệ của chúng tôi bắt đầu bằng dòng:

div#wpcf7-f201-p203-o1{ 
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif; 
font-style:italic;    
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] { 
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}