Cách tạo kiểu cho biểu mẫu trong Contact Form 7 bằng CSS trên WordPress

Cập nhật vào

Bạn muốn các biểu mẫu WordPress của mình trông sắc nét như phần còn lại của trang web? Với Contact Form 7, bạn có toàn quyền kiểm soát giao diện biểu mẫu bằng CSS. Hướng dẫn này sẽ hướng dẫn bạn từng bước cách tạo kiểu cho các biểu mẫu Contact Form 7, giúp bạn tạo ra trải nghiệm thương hiệu liền mạch cho khách truy cập.

Tại sao nên tạo kiểu cho các biểu mẫu Contact Form 7?

Contact Form 7 là một trong những plugin WordPress phổ biến nhất để xây dựng biểu mẫu—nhưng giao diện mặc định của nó khá cơ bản. Tùy chỉnh kiểu trong các theme WordPress cổ điển cho phép bạn:

  • Phù hợp với thương hiệu trang web của bạn

  • Cải thiện khả năng sử dụng và truy cập

  • Làm cho biểu mẫu hấp dẫn và chuyên nghiệp hơn

Bước 1: Xác định các bộ chọn CSS của biểu mẫu

Trước khi bắt đầu tạo kiểu, bạn cần biết bộ chọn CSS nào nhắm vào các phần tử của biểu mẫu.

  • Mỗi biểu mẫu Contact Form 7 được bao quanh bởi một class duy nhất: .wpcf7

  • Các phần tử riêng lẻ như trường nhập liệu, textarea và nút gửi sử dụng các thẻ HTML tiêu chuẩn

Bước 2: Thêm CSS tùy chỉnh vào trang WordPress của bạn

Bạn có thể thêm CSS theo hai cách chính:

  • Qua Customizer:
    Đi tới Giao diện > Tùy chỉnh > CSS bổ sung và dán các kiểu của bạn vào.

LƯU Ý: Thêm CSS của bạn vào tệp style.css của child theme để tùy chỉnh nâng cao hơn.

Bước 3: Viết CSS tùy chỉnh của bạn

Dưới đây là một số ví dụ phổ biến để bạn bắt đầu, sử dụng các thành phần "text" và "submit" của biểu mẫu làm ví dụ:

Tạo kiểu cho tất cả các biểu mẫu Contact Form 7

.wpcf7 input[type="text"],
.wpcf7 textarea {
  border: 2px solid #0073e6;
  padding: 10px;
  width: 100%;
  font-size: 1em;
}

.wpcf7 input[type="submit"] {
  background: #0073e6;
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}

.wpcf7 input[type="submit"]:hover {
  background: #005bb5;
}

Các pseudo-class trong CSS, như :hover, cho phép bạn tạo kiểu cho các phần tử dựa trên trạng thái hoặc tương tác của người dùng. Ví dụ, pseudo-class :hover áp dụng kiểu khi người dùng di chuyển con trỏ chuột qua nút hoặc trường. Điều này thường được dùng để làm nổi bật nút hoặc thay đổi màu sắc khi di chuột, giúp biểu mẫu của bạn tương tác và thu hút hơn. Các pseudo-class hữu ích khác bao gồm :focus (khi một trường được chọn) và :active (khi một phần tử đang được nhấp). Sử dụng pseudo-class giúp cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi ngay lập tức khi khách truy cập tương tác với biểu mẫu.

Nhắm mục tiêu một biểu mẫu cụ thể

Mỗi biểu mẫu có một ID duy nhất, như #wpcf7-f123-o1. Sử dụng ID này để chỉ tạo kiểu cho biểu mẫu đó:

#wpcf7-f123-o1 input[type="text"] {
  background: #f9f9f9;
}
Thay f123-o1 bằng ID thực tế của biểu mẫu của bạn. Bạn có thể tìm ID duy nhất của biểu mẫu bằng cách xem trang có nhúng biểu mẫu Contact Form 7, nhấp chuột phải vào biểu mẫu và chọn “Inspect” (hoặc “Inspect Element”) trong trình duyệt. Tìm <div> có class .wpcf7—ID sẽ xuất hiện như id="wpcf7-f123-o1" trong mã HTML. Sử dụng ID này trong bộ chọn CSS để chỉ nhắm mục tiêu biểu mẫu đó.

Bước 4: Sử dụng các class tích hợp của Contact Form 7

Contact Form 7 tự động thêm các class vào phần tử, giúp việc nhắm mục tiêu dễ dàng hơn. Ví dụ:

  • .wpcf7-form-control – Tất cả các trường điều khiển biểu mẫu

  • .wpcf7-submit – Nút gửi

Bạn cũng có thể thêm class riêng trong trình chỉnh sửa biểu mẫu để kiểm soát nhiều hơn.

Ví dụ

.wpcf7-form-control.wpcf7-text {
  border-radius: 5px;
}

.wpcf7-submit {
  font-weight: bold;
  letter-spacing: 1px;
}

Bước 5: Xem trước và điều chỉnh

Sau khi lưu CSS, làm mới trang web để xem thay đổi. Sử dụng công cụ kiểm tra của trình duyệt để điều chỉnh kiểu trực tiếp trước khi sao chép vào trang web. Hãy chắc chắn xóa bộ nhớ đệm trang web sau khi thay đổi để cập nhật hiển thị cho khách truy cập.

Dưới đây là ví dụ trước và sau của một biểu mẫu trên trang web demo, nơi chúng tôi đã sử dụng mã CSS ở Bước 3 để làm cho các hộp quanh mỗi trường biểu mẫu có màu xanh dương.

Mẹo nhanh để tạo kiểu biểu mẫu tốt hơn

  • Giữ cho dễ truy cập: Đảm bảo độ tương phản màu tốt và kích thước phông chữ dễ đọc

  • Sử dụng khoảng cách: Thêm padding và margin để giao diện sạch sẽ, gọn gàng

  • Làm nổi bật lỗi: Tạo kiểu cho thông báo lỗi với màu sắc rõ ràng (như đỏ) để giúp người dùng sửa lỗi

  • Kiểm tra trên thiết bị di động: Đảm bảo biểu mẫu của bạn hiển thị tốt trên mọi thiết bị

Khắc phục sự cố

Nếu kiểu của bạn không hiển thị, hãy thử các bước sau:

  • Xóa bộ nhớ đệm trình duyệt và trang web – Đôi khi các tệp đã lưu trong bộ nhớ đệm ngăn CSS mới hiển thị. Nếu bạn dùng plugin cache hoặc hosting quản lý, hãy xóa các bộ nhớ đệm đó.

  • Kiểm tra vấn đề về độ ưu tiên CSS – Nếu kiểu của bạn không được áp dụng, hãy thử làm cho bộ chọn của bạn cụ thể hơn để ghi đè các kiểu hiện có.

  • Đảm bảo bạn đang chỉnh sửa đúng tệp hoặc phần CSS – Kiểm tra kỹ rằng bạn đang thêm mã vào đúng vị trí, như bảng CSS bổ sung, style.css của child theme hoặc plugin CSS tùy chỉnh.

  • Kiểm tra class CSS có lỗi chính tả hoặc sai sót – Tìm các tên class bị sai, khoảng trắng không cần thiết hoặc sử dụng nhầm class. Đồng thời, xác minh rằng class bạn đang nhắm mục tiêu thực sự tồn tại trong HTML của biểu mẫu.

  • Kiểm tra các class trùng lặp hoặc xung đột – Đảm bảo class bạn dùng không bị áp dụng ở nơi khác với kiểu khác có thể ghi đè thay đổi của bạn.

  • Tuân thủ các thực hành tốt nhất chung – Sử dụng tên class rõ ràng, nhất quán, kết thúc mỗi quy tắc CSS bằng dấu chấm phẩy và luôn đóng khối mã bằng dấu ngoặc nhọn (}).

Kiểm tra kỹ mã của bạn với các vấn đề phổ biến này sẽ giúp đảm bảo các kiểu tùy chỉnh hiển thị đúng trên trang web.

Ví dụ: CSS tùy chỉnh hoàn chỉnh cho một biểu mẫu Contact Form 7

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.wpcf7 input[type="submit"] {
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  font-size: 1.1em;
  cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #218838;
}

Đây là ví dụ về một biểu mẫu được tạo kiểu bằng mã CSS ở trên. Mã CSS này tùy chỉnh giao diện của một số thành phần chính trong biểu mẫu Contact Form 7 của bạn. Nó nhắm mục tiêu tất cả các trường văn bản, trường email và textarea, tạo viền xám nhạt, bo tròn góc, padding thoải mái và chiều rộng đồng nhất cho giao diện hiện đại, sạch sẽ.

Mã này cũng tạo kiểu cho nút gửi với nền xanh lá, chữ trắng, góc bo tròn và phông chữ đậm, dễ đọc. Khi người dùng di chuột qua nút gửi, màu nền chuyển sang xanh lá đậm hơn, cung cấp phản hồi tương tác.

Thêm CSS: theme cổ điển so với theme khối

Các bước trong hướng dẫn này để tạo kiểu cho Contact Form 7 bằng CSS được thiết kế cho các Theme Cổ điển trong WordPress. Theme Cổ điển, như Astra phổ biến, sử dụng Customizer, nơi bạn có thể dễ dàng thêm CSS tùy chỉnh trong phần “CSS bổ sung”. Điều này giúp bạn dễ dàng tạo kiểu cho biểu mẫu và xem thay đổi trực tiếp.

Tuy nhiên, nếu trang của bạn sử dụng Theme Khối (đôi khi gọi là theme Full Site Editing hoặc FSE), quy trình sẽ khác. Theme Khối không phải lúc nào cũng có Customizer hoặc trường “CSS bổ sung” mặc định. Thay vào đó, bạn sử dụng Trình chỉnh sửa Trang để thay đổi thiết kế. Dù bạn có thể điều chỉnh kiểu toàn cục cho màu sắc, kiểu chữ và bố cục, việc thêm CSS tùy chỉnh không phải lúc nào cũng có sẵn trong giao diện.

Làm gì nếu bạn đang dùng Theme Khối

  • Mở bảng điều khiển WordPress và đi tới Giao diện > Trình chỉnh sửa (Site Editor).

  • Trong Trình chỉnh sửa Trang, tìm bảng Kiểu (biểu tượng hình tròn nửa tô bóng).

  • Một số Theme Khối hiện đã có tùy chọn “CSS bổ sung” trong bảng Kiểu, nhưng điều này phụ thuộc vào theme và phiên bản WordPress của bạn.

  • Nếu bạn không thấy tùy chọn thêm CSS tùy chỉnh, bạn có thể dùng plugin như WPCode để thêm CSS cho toàn trang. WPCode thân thiện với người mới và hoạt động với mọi theme, đảm bảo bạn vẫn có thể tạo kiểu cho biểu mẫu ngay cả khi theme không hỗ trợ chỉnh sửa CSS trực tiếp trong giao diện. Lưu ý rằng cài đặt plugin này có thể ảnh hưởng đến kiểu của các biểu mẫu khác đã có trên trang web.

Tài nguyên bổ sung

Tạo kiểu cho các biểu mẫu Contact Form 7 là cách đơn giản nhưng mạnh mẽ để nâng tầm trải nghiệm người dùng trên trang web. Chỉ với vài dòng CSS, bạn có thể khiến biểu mẫu trông và cảm nhận như một phần tự nhiên của thương hiệu.

Cần có địa chỉ email hợp lệ