Với hơn một triệu lượt cài đặt đang hoạt động, Contact Form 7 cho đến nay là một trong những plugin WordPress phổ biến nhất từ trước đến nay. Sự nổi tiếng của nó có lẽ liên quan nhiều đến sự thật đằng sau mô tả của nó. “Đơn giản nhưng linh hoạt. ”
Biểu mẫu liên hệ 7 cho phép bạn tạo nhiều biểu mẫu liên hệ không sử dụng gì ngoài đánh dấu HTML đơn giản [mà nó tạo ra cho bạn]. Sau khi được tạo, mỗi biểu mẫu có thể được triển khai nhanh chóng bằng cách đặt mã ngắn tương ứng vào nơi bạn muốn biểu mẫu xuất hiện; . Các tin nhắn được gửi qua biểu mẫu sẽ được gửi đến địa chỉ email được cung cấp trong cài đặt plugin và thư rác bị loại bỏ thông qua hỗ trợ CAPTCHA và Akismet
Contact Form 7 đơn giản đến mức dường như ai cũng có thể sử dụng nó một cách hiệu quả. Kiểu dáng cũng vậy, được dự định là đơn giản. Nhưng có lẽ quá đơn giản đối với một số. Theo mặc định, plugin Contact Form 7 không tạo kiểu cho các biểu mẫu của nó. Bất kỳ kiểu dáng nào họ có là kết quả của các kiểu dáng mặc định có trong biểu định kiểu của chủ đề WordPress
Thường dẫn đến một cái gì đó khá cơ bản, như thế này
Thật không may, loại biểu mẫu này, mặc dù thực sự đơn giản và linh hoạt, nhưng có thể không được thiết kế đẹp mắt như các yếu tố khác trên trang web của một người. Để lại nhiều người dùng hài lòng đang tìm kiếm các lựa chọn thay thế cho Biểu mẫu liên hệ 7 với nhiều tùy chọn kiểu dáng hơn. Rất may, chỉ với một chút CSS, không cần thay thế plugin
Trong bài đăng hôm nay, tôi sẽ chia sẻ một loạt mẹo sẽ mở ra nhiều khả năng tạo kiểu cho Biểu mẫu liên hệ 7 cho bất kỳ ai, sử dụng bất kỳ chủ đề nào
Cách tùy chỉnh kiểu dáng của biểu mẫu liên hệ 7 để phù hợp với trang web của bạn
Đăng ký kênh Youtube của chúng tôi
Nơi chỉnh sửa CSS Mẫu liên hệ 7 của bạn [và tại sao]
Điều quan trọng là khi thêm CSS tùy chỉnh, bạn không thêm nó vào biểu định kiểu của Biểu mẫu liên hệ 7 hoặc chủ đề gốc của bạn. Mọi thay đổi hoặc bổ sung bạn thực hiện ở đó sẽ bị ghi đè ngay sau khi chủ đề và/hoặc plugin được cập nhật
Thay vào đó, bạn sẽ muốn thêm CSS bên dưới vào CSS của chủ đề con của bạn. Bạn cũng có thể sử dụng tính năng CSS tùy chỉnh trên Jetpack hoặc nếu chủ đề của bạn cung cấp một phần trong bảng quản trị dành cho CSS tùy chỉnh, bạn cũng có thể sử dụng tính năng đó
Ok, bây giờ chúng ta đã biết nơi đặt các kiểu mà chúng ta sẽ xem xét bên dưới, hãy bắt đầu nào
Cách tạo các kiểu biểu mẫu rộng cho trang web
Hãy bắt đầu bằng cách thực hiện một số chỉnh sửa chung sẽ tự áp dụng cho toàn bộ biểu mẫu. Chúng ta có thể làm điều này bằng cách sử dụng bộ chọn lớp. wpcf7 và sau đó thêm các kiểu bên dưới nó
[Tôi cũng rất muốn đề xuất rằng bạn nên đặt tiêu đề đã nhận xét mà tôi đã viết bên dưới trong biểu định kiểu của bạn để biểu thị nơi bắt đầu các kiểu Biểu mẫu liên hệ 7 của bạn. ]
/* Contact Form 7 Styles
---------------------------------*/
.wpcf7 {
background-color: #F0F0F0;
border: 5px solid #666666;
}
Sau khi thêm đoạn mã trên vào biểu định kiểu của bạn, mọi biểu mẫu bạn tạo bằng Biểu mẫu liên hệ 7 sẽ có kiểu nền và đường viền mà bạn vừa xác định. Dưới đây là một ví dụ
Như bạn có thể thấy, có một số vấn đề về khoảng cách. Để khắc phục điều này, bạn sẽ muốn điều chỉnh lề giữa đường viền và các thành phần biểu mẫu bên trong. Bạn có thể làm điều này với mã dưới đây
.wpcf7-form {
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
Trên trang web thử nghiệm của tôi, điều này dẫn đến kết quả như sau
Ghi chú. những kiểu này có thể ảnh hưởng đến biểu mẫu của bạn theo những cách hơi khác nhau do thực tế là rất có thể chúng tôi đang làm việc với các chủ đề khác nhau. Điều đó không có nghĩa là mã này sẽ không phù hợp với bạn, chỉ là bạn có thể phải điều chỉnh các con số một chút để có những thứ phù hợp với trang web của mình
Cách tạo kiểu trường biểu mẫu rộng cho trang web
Một trong những yêu cầu phổ biến hơn mà mọi người có khi tạo kiểu cho Biểu mẫu liên hệ 7 là cách họ có thể điều chỉnh độ rộng của các trường. Riêng vùng nhắn tin không mở rộng lắm
Mã bên dưới sẽ mở rộng vùng thông báo theo chiều rộng mong muốn của bạn [khi được điều chỉnh]. Tôi đã đặt ví dụ của mình vào 95% vì đó là thứ trông đẹp nhất trong trường hợp sử dụng tưởng tượng của tôi. Bạn cũng có thể đặt nó cho phù hợp với nhu cầu của mình–sử dụng tỷ lệ phần trăm hoặc số pixel cố định
.wpcf7-textarea {
width: 85%;
}
Bạn cũng có thể điều chỉnh độ rộng của các trường khác bằng cách điều chỉnh bộ chọn loại đầu vào
.wpcf7 input {
width: 50%;
}
Nếu bạn không muốn điều chỉnh tất cả các trường nhập của mình với cùng một tiêu chí, bạn có thể xem chi tiết một chút bằng cách chỉ chọn những trường bạn quan tâm. Trong ví dụ bên dưới, tôi đã chọn chỉ thay đổi các trường văn bản của mình để nút gửi của tôi cũng không bị ảnh hưởng
.wpcf7-text {
width: 50%;
}
Sau tất cả những thay đổi ở trên, tôi đã có thể tạo kiểu cho biểu mẫu mà bạn nhìn thấy bên dưới
Cá nhân tôi không muốn thay đổi màu nút của mình, nhưng tôi nghĩ đó rất có thể là một mong muốn chung khác. Vì vậy, nếu bạn muốn thay đổi màu nút của mình, bạn có thể sử dụng CSS bên dưới để thử nghiệm
.wpcf7-submit {
background: #555555;
color: #ffffff;
}
Với các phần CSS này, mọi biểu mẫu được tạo bằng Biểu mẫu liên hệ 7 sẽ trông giống như hình ảnh cuối cùng ở trên. Nhưng điều gì sẽ xảy ra khi bạn muốn một biểu mẫu cụ thể trông khác với tất cả các biểu mẫu khác?
Cách tạo kiểu cho một biểu mẫu cụ thể
Lấy ID CSS cụ thể cần thiết để thực hiện chỉnh sửa kiểu cho một biểu mẫu cụ thể có thể hơi phiền phức, nhưng có thể thực hiện được với một chút mày mò
Điều đầu tiên bạn muốn làm thực sự là thêm mã ngắn biểu mẫu vào trang web của bạn và xem trước nó. [Bạn sẽ nhận thấy rằng trong mã ngắn đó có một số cho ID – nhưng đó không thực sự là ID đầy đủ mà bạn sẽ cần. ]
Sau đó, sử dụng tính năng kiểm tra thành phần của Google Chrome hoặc tính năng tương tự trong trình duyệt khác, hãy xem mã cho biểu mẫu. Sử dụng cái này, bạn sẽ tìm thấy ID mẫu đầy đủ
Trong trường hợp của tôi, số ID trong mã ngắn của tôi là 4407. Hóa ra ID đầy đủ là wpcf7-f4407-p4405-o1. Điều đó có nghĩa là tôi có thể thực hiện các chỉnh sửa khác, chỉ đối với biểu mẫu cụ thể đó, bằng cách sử dụng mã bên dưới với nhiều tiêu chí khác với cài đặt trên toàn trang web của tôi
#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}
Cách tạo kiểu cho các trường cụ thể
Bạn có thể làm điều tương tự với các trường cụ thể. Thay vì theo dõi một lớp CSS hoặc ID cụ thể trong trình duyệt của bạn, tất cả những gì bạn phải làm là thêm nó vào trình tạo biểu mẫu
Khi bạn đang tạo thẻ để đặt trong trình tạo biểu mẫu, bạn sẽ nhận thấy rằng có hai tùy chọn để tạo ID, Lớp hoặc cả hai
Trong ví dụ này, tôi đã chọn tạo một lớp có tên là trường tùy chỉnh. Nếu bạn làm tương tự [hoặc điều gì đó tương tự], thì bạn sẽ chỉ có thể tạo kiểu cho trường đó bằng cách sử dụng id [hoặc lớp] mới của bạn như tôi có bên dưới
#customized-field {
color: #ffffff;
border: 2px solid #333333;
}
Cách tạo bố cục biểu mẫu tùy chỉnh cho hộp kiểm và nút xuyên tâm
Theo mặc định, hộp kiểm và bán kính hiển thị từ trái sang phải
Tuy nhiên, do sở thích cá nhân hoặc trường hợp sử dụng cụ thể trong đó hiển thị chúng từ trên xuống dưới có thể thích hợp hơn, bạn có thể sử dụng một trong hai tùy chọn bên dưới
Để hiển thị các hộp kiểm hoặc nút radio của bạn từ trên xuống dưới và bên trái, hãy sử dụng cái này
________số 8Để hiển thị các hộp kiểm và các nút xuyên tâm của bạn từ trên xuống dưới và ở bên phải, hãy sử dụng cái này. Ngoài ra, hãy đảm bảo rằng khi bạn tạo thẻ cho tùy chọn này, bạn chọn hộp kiểm “nhãn trước tiên”
.wpcf7-list-item {
display: table-row;
}
.wpcf7-list-item * {
display: table-cell;
}
Tiền thưởng. Cách xóa tiêu đề trường và sử dụng văn bản giữ chỗ thay thế
Mẹo này không yêu cầu sử dụng CSS như các mẹo khác ở trên, mà là một tinh chỉnh đơn giản đối với phần đánh dấu được sử dụng trong trình tạo biểu mẫu Contact Form 7
Đôi khi không cần thiết phải có tiêu đề trường, đặc biệt là khi bạn có thể đặt văn bản giữ chỗ trong chính các trường để giải thích thông tin nào thuộc về trường đó
Nếu đó là trường hợp trên trang web của bạn, thì tất cả những gì bạn phải làm là xóa tiêu đề trong trình tạo biểu mẫu và thêm văn bản giữ chỗ như tôi đã làm trong ví dụ bên dưới
.wpcf7-form {
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
0Kết quả là một hình thức sạch hơn với ít lộn xộn hơn
Tóm lại là
Tôi hy vọng rằng tôi đã chỉ ra trong các ví dụ ở trên rằng plugin Contact Form 7 có khả năng tùy biến cao. Đúng, nó yêu cầu một chút mày mò nhưng đối với một plugin miễn phí có thể được mong đợi
Tôi nghĩ rằng việc thiếu các tùy chọn kiểu dáng theo mặc định là một phần lý do tại sao plugin hoạt động tốt như vậy đối với rất nhiều người. Vì vậy, thật công bằng khi bất kỳ ai nhận được nhiều giá trị từ nó, những người muốn có nhiều phong cách hơn cam kết bỏ ra vài phút để tải xuống phiên bản của một trong các ví dụ mã ở trên
Bạn có bất kỳ lời khuyên về phong cách Biểu mẫu liên hệ 7 nào của riêng mình không?