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

Với hơn 1 triệu người dùng tích cực, 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.

contact form 7 mặc định

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ế Contact Form 7 trong WordPress

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.

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

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 role=”form” class=”wpcf7″ id=”wpcf7-f201-p203-o1″ lang=”en-US” dir=”ltr”></html>

Các thuộc tính id là một định danh duy nhất được tạo ra bởi Contact Form 7 cho form đặc biệt này. Nó là sự kết hợp của id form và id bài viết mà form này được thêm vào.

Chúng tôi sẽ sử dụng ID này trong CSS của chúng tôi để thiết kế contact form 7 của chúng tôi. Chúng tôi sẽ thay thế .wpcf7 trong đoạn code 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;
}

Thiết kế các Contact Form 7 Form bằng CSS hero

Nhiều người mới bắt đầu WordPress không có bất kỳ kinh nghiệm nào về 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 mà sẽ không chỉ cho phép bạn thiết kế contact form 7 của bạn, mà 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 các CSS Hero Plugin và vào trang chứa form của bạn. Click vào thanh công cụ CSS Hero và sau đó click 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 code.

Thiết kế các Contact Form 7 Form bằng CSS hero

Chúng tôi hy vọng bài viết này giúp bạn học cách thiết kế Contact Form 7 trong WordPress. Bạn thích phương án nào nhất trong các phương án ở trên của chúng tôi. Bạn có cách nào tốt hơn để thiết kế một mẫu thật tuyệt vời và đơn giản không? Hay 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ề làm thế nào để cài đặt wordpress gate trong WordPress.

Về tác giả

Duy Anh

Chào các bạn,

Mình là coder, đang sống và làm việc ở Mỹ. Mình thích viết lách nên muốn dành khoảng thời gian trống để chia sẻ các thủ thuật giúp các bạn xây dựng được trang web riêng của mình. Bạn nào cần xây dựng blog, web thì cứ ới, rảnh là mình giúp, tất cả FREE nhé!

Ý kiến cá nhân của bạn

bộ công cụ Wordpress hữu ích dành cho mọi website

Bộ công cụ hữu ích dành cho mọi website Wordpress

Bao gồm theme & plugin tốt nhất và được sử dụng nhiều nhất!

Xin vui lòng kiểm tra email để xác thực tài khoản!