Giới hạn độ rộng của biểu mẫu liên hệ trong chủ đề Genesis

Một số chủ đề con của Genesis đặt kiểu mặc định cho các trường biểu mẫu (biểu mẫu liên hệ của bạn) thành độ rộng 100%. Điều này tạo nên một hình thức đẹp, thân thiện với thiết bị di động trên điện thoại hoặc máy tính bảng. Trên màn hình lớn hơn, nó có thể không phải là giao diện bạn muốn cho biểu mẫu liên hệ của mình, đặc biệt nếu chủ đề con của bạn là toàn chiều rộng.
Bạn có thể thực hiện một số chỉnh sửa nhanh đối với phần “Biểu mẫu” trong style.css của mình để giới hạn độ rộng của biểu mẫu liên hệ. Tôi sẽ sử dụng chủ đề Mẫu của Genesis, nhưng bạn sẽ tìm thấy phần tương tự trong hầu hết các chủ đề con.

Lưu ý rằng có thể có các kiểu bổ sung được thêm vào chủ đề của bạn cho các plugin biểu mẫu cụ thể. Tôi thích sử dụng Ninja Forms hơn vì chúng sử dụng các kiểu chủ đề của tôi và thật dễ dàng để thêm các kiểu bổ sung, nếu tôi muốn làm nhiều hơn.

Đầu vào và vùng văn bản

Phần mã đầu tiên xác định kiểu cho đầu vào (đối với trường tên và email), chọn (đối với danh mục hoặc kho lưu trữ thả xuống), và vùng văn bản (đối với vùng thông báo biểu mẫu liên hệ).
input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #333;
	font-size: 18px;
	font-weight: 300;
	padding: 16px;
	width: 100%;
}
Nếu bạn muốn đặt đầu vào (cho các trường tên và email) ít rộng hơn toàn chiều rộng (100%), bạn có thể thêm phần này ngay bên dưới đoạn mã trên.
input {
	max-width: 450px;
}
Nếu bạn sử dụng trường chọn trong biểu mẫu liên hệ của mình, bạn cũng có thể muốn thêm trường đó vào CSS ở trên.

Nếu bạn cũng muốn giới hạn chiều rộng của vùng văn bản, bạn có thể thêm phần này để thay thế.

textarea {
	max-width: 800px;
}

Bạn có thể điều chỉnh các độ rộng này sao cho phù hợp nhất với bạn. Ví dụ: nếu bạn muốn tất cả các trường nhập của mình có cùng chiều rộng, nhưng không muốn chúng là 100% cho các trang có chiều rộng đầy đủ, bạn có thể sử dụng:

input,
select,
textarea {
max-width: 700px;
}

Các nút gửi biểu mẫu

Thông thường, các nút gửi sẽ được đặt thành độ rộng tự động, thường hoạt động tốt cho hầu hết các biểu mẫu. Nút gửi tự kích thước để phù hợp với văn bản của nút. Đây là phần mã có nút gửi trong chủ đề Mẫu Genesis.
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	background-color: #333;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 300;
	padding: 16px 24px;
	text-transform: uppercase;
	width: auto;
}
Nếu bạn không thích giao diện của chiều rộng tự động, bạn cũng có thể điều chỉnh chiều rộng hoặc thậm chí thêm chiều rộng tối đa cho từng bộ chọn này. Nếu bạn thêm chiều rộng tối đa, hãy đảm bảo rằng nó phù hợp với chiều rộng văn bản trên tất cả các nút gửi của bạn.

Mẫu bình luận bên dưới bài viết

Trong phần “Nhận xét” của style.css, bạn sẽ tìm thấy các kiểu cho biểu mẫu nhận xét.
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
	width: 50%;
}
Sử dụng 50% cho chiều rộng, cho phép biểu mẫu nhận xét mở rộng quy mô, 50% chiều rộng cho các trường nhập có thể quá nhỏ trên điện thoại. Bạn có thể thay đổi chúng để chúng 100% với chiều rộng tối đa là 450px, giống như bạn đã làm đối với biểu mẫu liên hệ.
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
	width: 100%;
	max-width: 450px;
}
Điều thú vị về việc đặt chiều rộng tối đa theo pixel, thay vì phần trăm, là bạn thực sự không cần phải điều chỉnh lại chiều rộng ở các kích thước màn hình nhỏ hơn. Các trường sẽ tự động có chiều rộng đầy đủ ở kích thước màn hình nhỏ.

Bạn đã có nó - một vài chỉnh sửa nhanh cho phần “Biểu mẫu” trong style.css của bạn để giới hạn độ rộng của biểu mẫu liên hệ trong các chủ đề Genesis.