Làm Thế Nào Thiết Kế Contact Form 7 Trong WordPress [NEW]

Với hơn 1 triệu người dùng trên toàn thế giới, Contact Form 7 là một trong những plugin biểu mẫu liên hệ phổ biến nhất 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 mắn thay, Contact Form 7 có thể được thiết kế dễ dàng bằng cách sử dụng CSS trong một chủ đề WordPress. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo mẫu thiết kế contact form 7 trong WordPress.

Bắt đầu

Giả sử rằng bạn đã cài đặt plugin Biểu mẫu liên hệ 7 và đã tạo biểu mẫu liên hệ đầu tiên của mình. Bước tiếp theo là sao chép shortcode vào biểu mẫu liên hệ và dán nó vào một bài đăng WordPress hoặc một trang mà bạn muốn biểu mẫu được hiển thị.

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

biểu mẫu liên hệ 7 mặc định

Như bạn có thể thấy rằng biểu mẫu liên hệ kế thừa một số kiểu từ chủ đề WordPress hiện tại. Ngoại trừ nó rất cơ bản.

Chúng tôi sẽ thiết kế Biểu mẫu liên hệ 7 bằng CSS. Tất cả CSS đi vào chủ đề hoặc biểu định kiểu của chủ đề con.

Thiết kế biểu mẫu liên hệ 7 trong WordPress

Liên hệ với Biểu mẫu 7 tạo ra một mã chuẩn và rất nhất quán cho các biểu mẫu. Mỗi phần tử trong các biểu mẫu có một ID và lớp CSS thích hợp được liên kết với nó.

Mỗi biểu mẫu liên hệ sử dụng lớp CSS .wpcf7 mà bạn có thể sử dụng để thiết kế biểu mẫu của mình.

Trong ví dụ này, chúng tôi đang sử dụng phông chữ Google Lora trong các trường nhập 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, biểu mẫu liên hệ sẽ giống như sau:

Thiết kế biểu mẫu liên hệ 7 trong WordPress

Thiết kế nhiều biểu mẫu liên hệ 7 biểu mẫu

Vấn đề với CSS mà chúng tôi đã sử dụng ở trên là nó sẽ được áp dụng cho tất cả các biểu mẫu Contact Form 7 trên trang web của bạn. Nếu bạn đang sử dụng nhiều biểu mẫu liên hệ và muốn thiết kế chúng theo cách khác nhau, bạn sẽ cần sử dụng ID được tạo bởi biểu mẫu liên hệ 7 cho mỗi biểu mẫu.

Rất đơn giản, bạn chỉ cần mở một trang chứa các biểu mẫu mà bạn muốn thay đổi. di chuột qua trường đầu tiên trong biểu mẫu, nhấp chuột phải và chọn Kiểm tra nguyên tố. Màn hình trình duyệt sẽ chia ra và bạn sẽ thấy mã nguồn của trang. Trong mã nguồn, bạn cần xác định vị trí dòng bắt đầu của mẫu mã.

Thiết kế nhiều biểu mẫu liên hệ 7 biểu mẫu

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

Thuộc tính id là số nhận dạng duy nhất được tạo bởi Biểu mẫu liên hệ 7 cho biểu mẫu cụ thể này. Nó là sự kết hợp của id biểu mẫu và id bài đăng mà biểu mẫu này được thêm vào.

Chúng tôi sẽ sử dụng ID này trong CSS để thiết kế biểu mẫu liên hệ 7. Chúng tôi sẽ thay thế .wpcf7 trong mã CSS đầu tiên của chúng tôi bằng # wpcf7-f201-p203-o1.

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;
}<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>

Thiết kế Biểu mẫu Liên hệ 7 Biểu mẫu với CSS hero

Nhiều người mới bắt đầu sử dụng WordPress không có bất kỳ kinh nghiệm nào trong việc viết CSS và họ không muốn dành nhiều thời gian để học nó. May mắn thay, có một giải pháp tuyệt vời cho người mới bắt đầu sẽ không chỉ cho phép bạn thiết kế biểu mẫu liên hệ 7 của mình mà còn gần như mọi khía cạnh của trang web WordPress.

Bạn chỉ cần cài đặt và kích hoạt CSS Hero Plugin và truy cập trang chứa biểu mẫu của bạn. Nhấp vào thanh công cụ CSS Hero và sau đó nhấp vào phần bạn muốn thiết kế. CSS Hero sẽ cung cấp cho bạn một giao diện người dùng dễ dàng chỉnh sửa CSS mà không cần sử dụng mã.

Thiết kế Biểu mẫu Liên hệ 7 Biểu mẫu với CSS hero

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thiết kế Contact Form 7 trong WordPress. Bạn thích lựa chọn nào ở trên? Bạn có cách nào tốt hơn để thiết kế một mẫu đơn giản và tuyệt vời không? Hoặc cho chúng tôi biết bằng cách để lại bình luận bên dưới bài viết. Chúng tôi tin rằng bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách cài đặt cổng wordpress trong WordPress.