Form liên hệ hiển thị bình thường trên máy tính nhưng ô chọn ngày lại tràn ra ngoài màn hình điện thoại? Nếu bạn gặp lỗi Contact Form 7 trên Flatsome ở trường ngày/tháng/năm, hãy kiểm tra CSS chiều rộng của ô nhập trước khi thay đổi cấu trúc form.
Bài viết này hướng dẫn cách giới hạn chiều rộng của ô chọn ngày bằng CSS, giúp trường nhập nằm gọn trong vùng nội dung. Cách xử lý phù hợp với trường hợp phần tử gây tràn là input type="date"; nếu cả hàng hoặc cột của form đều bị tràn, bạn cần kiểm tra thêm bố cục bên ngoài.
Dấu hiệu ô chọn ngày bị lỗi trên mobile
- Ô chọn ngày rộng hơn các trường họ tên, email hoặc số điện thoại.
- Mép phải của ô nhập vượt khỏi khung form hoặc bị cắt.
- Trang có thể xuất hiện thanh cuộn ngang nếu phần tràn không bị che.
- Lỗi chỉ xuất hiện ở một số kích thước màn hình hoặc trình duyệt.
Trong Contact Form 7, trường ngày thường được tạo bằng form-tag như [date ngay-hen] hoặc [date* ngay-hen]. Dấu sao thể hiện trường bắt buộc nhập.
Vì sao ô chọn ngày bị tràn màn hình?
Giao diện ô chọn ngày phụ thuộc vào trình duyệt và hệ điều hành. Vì vậy, cùng một form có thể hiển thị khác nhau trên Safari của iPhone và Chrome của Android.
Những điểm nên kiểm tra gồm chiều rộng cố định, giá trị min-width, khoảng đệm, đường viền và kích thước cột chứa form. Khi tổng chiều rộng vượt quá vùng chứa, ô nhập có thể bị tràn.
Không nên kết luận đây là lỗi chung của Flatsome hoặc Contact Form 7 trên mọi thiết bị. Muốn xác định chính xác nguyên nhân của từng website, cần kiểm tra phần tử và CSS thực tế bằng công cụ Inspect.
Cách sửa bằng CSS
Bước 1: Mở phần CSS bổ sung
Trong quản trị WordPress, vào Giao diện → Tùy biến → CSS bổ sung. Nếu website đang lưu CSS riêng trong cài đặt Flatsome hoặc child theme, bạn có thể thêm tại vị trí đó. Chỉ cần chọn một nơi để tránh lưu nhiều bản trùng nhau.
Bước 2: Thêm đoạn mã dưới đây
/* Giới hạn chiều rộng ô chọn ngày trong Contact Form 7 */
.wpcf7 .wpcf7-form-control-wrap input[type="date"] {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
min-height: 48px;
padding: 0 12px;
}Nếu đã dùng đoạn CSS cũ trong bài, hãy thay thế bằng đoạn trên để dễ quản lý.
width và max-width giới hạn chiều rộng theo vùng chứa; min-width: 0 cho phép ô nhập thu nhỏ; box-sizing: border-box tính cả padding và đường viền trong chiều rộng khai báo. Chiều cao tối thiểu 48px giúp ô nhập dễ thao tác hơn trên điện thoại.
Selector bắt đầu bằng .wpcf7 nên chỉ áp dụng cho ô ngày trong Contact Form 7, không tác động tới ô ngày ở form đặt hàng hoặc form khác bên ngoài plugin. Mã không đặt lại font chữ, màu sắc hay nút gửi.
Bước 3: Lưu và xóa cache
Bấm lưu hoặc đăng thay đổi. Nếu website có plugin cache như LiteSpeed Cache, hãy xóa cache trang liên quan và cache CSS đã tối ưu nếu đang bật. Sau đó tải lại trang trên điện thoại hoặc mở bằng tab ẩn danh.
Nếu thêm CSS mà vẫn chưa hết lỗi
Kiểm tra xem quy tắc mới đã được tải và có bị CSS khác ghi đè hay không. Nếu vùng chứa dùng chiều rộng cố định hoặc các cột không xuống dòng trên mobile, cần sửa chính vùng chứa đó; tăng CSS cho ô ngày sẽ không giải quyết được toàn bộ bố cục.
Với trường hợp đã kiểm tra và cần điều chỉnh giao diện mặc định của ô ngày, có thể thử thêm hai thuộc tính sau vào quy tắc trên:
-webkit-appearance: none;
appearance: none;Hai thuộc tính này có thể thay đổi cách trình duyệt vẽ ô nhập. Chỉ giữ lại nếu giao diện và thao tác chọn ngày vẫn hoạt động phù hợp trên thiết bị cần hỗ trợ; không bắt buộc thêm ngay từ đầu.
Kiểm tra sau khi chỉnh sửa
- Mở trang ở màn hình nhỏ, kiểm tra ô ngày có nằm gọn trong form không.
- Kiểm tra cả khi ô trống và sau khi đã chọn ngày.
- Chạm vào ô ngày để xác nhận bộ chọn ngày vẫn mở được.
- Kiểm tra thông báo khi bỏ trống trường bắt buộc và thử gửi form.
- Xem lại trên máy tính, Safari iPhone và Chrome Android nếu có thiết bị.
Đoạn CSS này xử lý phần hiển thị. Nếu form vẫn không gửi được, báo lỗi máy chủ hoặc không nhận được email, bạn cần kiểm tra riêng cấu hình gửi thư và phản hồi của form.
Khi ô ngày là nguyên nhân gây tràn, việc giới hạn chiều rộng đúng vùng chứa là bước xử lý nên thử trước. Sau khi lưu, hãy kiểm tra trên thiết bị thực tế để xác nhận kết quả cho website của bạn.
