Bạn đang muốn thêm phong cách CSS của riêng bạn vào Biểu mẫu liên hệ 7 trong WordPress? Show Điều đầu tiên bạn cần cài đặt plugin Contact Form 7, bạn có thể tìm thấy nó ở đây Khi bạn đã kích hoạt plugin này, bạn có thể bắt đầu tạo và tùy chỉnh biểu mẫu của mình cho phù hợp. Sau khi bạn đã tạo biểu mẫu của mình, đừng quên rằng bạn cần phải dán 'mã ngắn' cho mỗi biểu mẫu vào bất kỳ trang nào bạn muốn biểu mẫu xuất hiện. Đối mặt với hướng dẫn này, chúng tôi sẽ giả định rằng bạn đã nhúng mã ngắn vào trang Liên hệ của mình. Phải, chúng ta hãy đến với nó Nơi để thêm CSS tùy chỉnh vào Contact Form 7 trong trang web của bạnTrước khi chúng tôi bắt đầu, tôi muốn rõ ràng về nơi bạn nên thêm mã CSS của mình cho các biểu mẫu Các đoạn CSS bên dưới có thể được đặt trong kiểu tệp chủ đề của bạn. css , trừ khi bạn đang sử dụng một chủ đề con, trong trường hợp này, mã sẽ phải được đặt bên trong kiểu tệp chủ đề con của bạn. css, không phải là chủ đề mẹ Ví dụ – Nếu bạn đang sử dụng Genesis Child Theme, bạn có thể chỉ cần vào Giao diện> Trình chỉnh sửa> Biểu định kiểu (kiểu. css) chọn chủ đề khi bạn đang sử dụng. Xem hình dưới đây Nếu bạn đang sử dụng một tờ báo , bạn có thể đi thẳng đến Trang Dashboard > Tùy chọn chủ đề > Cài đặt kiểu & bố cục và sử dụng hộp CSS tùy chỉnh được cung cấp  Bây giờ chúng ta hãy quay lại để nhúng shortcode. Một lần nữa, điều này có thể được đặt ở bất kỳ nơi nào trong một bài đăng trên blog hoặc trang tĩnh
Css Background và border contact form 7Mã CSS sau bên dưới sẽ tạo kiểu cho nền và đường viền của biểu mẫu liên hệ 7 của bạn. Điều đó có nghĩa là tất cả các biểu mẫu trên trang web của bạn Nếu bạn không muốn thêm tùy chỉnh nền hoặc đường viền, chỉ cần bỏ qua đoạn mã bổ sung này Nếu bạn sử dụng mã bên dưới mà không sửa đổi nó, bạn sẽ kết thúc với màu nền xám nhạt với viền màu xám đậm. Bạn có thể điều chỉnh các đánh giá được đánh dấu bằng màu đỏ theo ý thích của mình / * css background và border contact form 7
----------------------------------------------- * /
.wpcf7 {
background: #A3A3A3;
border: 1 px solid #494949 ;
width: 700 px;
}Các trường nhập css và biểu mẫu liên hệ vùng văn bản 7Mã CSS sau sẽ tạo kiểu cho kích thước phông chữ, trường nhập biểu mẫu, vùng văn bản, màu nền, màu phông chữ, chiều rộng biểu mẫu và phần đệm. Bạn có thể điều chỉnh các giá trị này (được đánh dấu bằng màu đỏ) theo sở thích của bạn Nếu bạn sử dụng mã bên dưới mà không sửa đổi, bạn sẽ thấy mỗi trường biểu mẫu có màu xám nhạt / * Form liên hệ
--------------------------------- * /
.wpcf7 input[type = "text"],
.wpcf7 input[type = "email"],
.wpcf7 input[type = "tel"],
textarea
{
font-size: 16px;
background: #f5f5f5 ;
border: none;
color: #000 ;
width: 95%;
padding: 2%;
}Nút css (gửi) biểu mẫu liên hệ 7Cuối cùng, mã CSS sau đây sẽ tạo kiểu cho Nút gửi biểu mẫu liên hệ 7 của bạn Có ba quy tắc ở đây. đầu vào, đầu vào. di chuột và nhập liệu. tích cực. Hãy để tôi giải thích những gì từng người làm nếu bạn không hoàn toàn chắc chắn
Vì vậy, bạn có thể thay đổi các giá trị cho từng cái này thành kiểu theo sở thích của bạn Nếu bạn sử dụng mã bên dưới mà không sửa đổi, bạn sẽ thấy một nút màu đỏ và nó sẽ thay đổi thành màu xám khi bạn di con trỏ chuột lên đầu nó / * Button submit contact form 7
------------------------------- * /
.wpcf7 input[type = "submit"] {
color: #ffffff;
font-size: 18 px;
font-weight: 700;
background: #9ED9330;
padding: 15px 25px 15px 25px;
border: none;
border-radius: 5px;
width: auto;
text-decoration: none;
text-transform: uppercase;
}
.wpcf7 input:hover[type = "submit"] {
background: #494949;
transition: all 0,4s ease 0s;
}
.wpcf7 input:active[type = "submit"] {
background: #000000;
}Cách thêm khoảng cách lề giữa đầu vào biểu mẫu và vùng chứa biểu mẫuNếu bạn đang sử dụng tùy chỉnh nền và đường viền với các trường biểu mẫu của bạn trong các trường này, bạn có thể nhận thấy các trường nhập của bạn quá gần với các vùng chứa đường viền Nếu bạn muốn thêm khoảng cách xung quanh đó, hãy sử dụng mã CSS sau Bạn có thể điều chỉnh theo sở thích của mình. Việc tăng giá trị px sẽ tăng không gian xung quanh các trường biểu mẫu của bạn và các vùng chứa nền của bạn / * lề contact form 7
------------------------- * /
.wpcf7 form{
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
}Toàn bộ css form sẽ như sauNếu bạn sử dụng tất cả các mã CSS trên được cung cấp mà không sửa đổi bất kỳ điều gì, các biểu mẫu của bạn sẽ trông giống như thế này Lưu ýVì vậy, một hướng dẫn nhanh chóng và dễ dàng để thêm một số CSS tùy chỉnh đơn giản vào biểu mẫu liên hệ 7 của bạn để làm cho chúng trở thành duy nhất cho trang web của bạn
Nếu bạn có một số kiến thức cơ bản về CSS, bạn có thể chơi xung quanh với các giá trị để thực hiện sự cá nhân hóa các biểu mẫu liên hệ của mình Tất nhiên, nếu bạn không cảm thấy thoải mái khi làm rối tung các đoạn mã CSS và không ngại cài đặt một plugin khác vào blog WordPress của bạn, thì có một giải pháp thay thế
Có thể tôi đã đề cập đến plugin này khi bắt đầu hướng dẫn. Tuy nhiên, bạn nên tắt mã hóa một cái gì đó vào trang web của mình theo cách thủ công hơn là cài đặt một plugin WP khác Trong mọi trường hợp, plugin này có tất cả các tùy chọn cần thiết để giúp bạn tùy chỉnh biểu mẫu của mình bằng một cú nhấp chuột đơn giản Tôi sẽ cập nhật bài hướng dẫn này trong tương lai gần với nhiều mẹo tạo kiểu hơn , Bây giờ, hãy thưởng thức những gì mình đã làm được |
