Hi Deonped,
Can you post a link to the booking form on your site?
Hi deonped,
When I clicked on the Request Booking button, it correctly reloaded the page and flagged the missing fields with errors. Since this is a live site, I didn’t want to successfully submit a test booking without permission.
Is it ok if I make a booking to see what happens?
Hi NateWr
Yes please go ahead and test. Just put testing system in the comments field.
Thanks
Hi deonped,
It looks like your theme has hidden important form details, like required fields and error messages, using CSS code. There are two problematic rules:
.rtb-booking-form label {
display: none;
}
.rtb-booking-form .rtb-error {
display: none;
}
The first snippet is hiding the labels which appear above the field. For that reason, your custom checkbox field is hidden completely.
The second snippet is hiding the error message. That means that when the checkbox field is incomplete, and returning a required field error, you can’t actually see this error or correct it.
Here’s a screenshot of what your form looks like when I disabled those two styles:
http://i.imgur.com/9vIO4du.png
I believe the folks behind the Berg theme have updated a couple times to improve compatibility with my plugin. If you contact them and point them to this comment, they should help you fix it for the time being and provide a fix in a future update to the theme.
And to give a head-start, here is how I’d solve the labels issue. Each form field has a class which represents it’s type. With this you could target just the labels of non-checkbox and radio fields:
.rtb-booking-form fieldset > div:not(.rtb-checkbox):not(.rtb-radio) {
display: none;
}
However, to improve accessibility, they should really be hiding the label using a technique that’s more friendly to screen readers:
.rtb-booking-form fieldset > div:not(.rtb-checkbox):not(.rtb-radio) {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
left: -2000px;
}
Hi NateWR
I was told to add the following into the custom css which has fixed the error:
.rtb-booking-form label { display: block; overflow: hidden; font-size: 14px; font-weight: 400; margin: 15px 0 0 }
.rtb-booking-form input[type=checkbox] { width: auto; float: left; height: auto; margin-right: 5px; }
.rtb-checkbox.seating-choice label { margin: 5px 0 0; }
.rtb-booking-form form fieldset { margin: 15px 0}
.rtb-booking-form .rtb-error { display: block; font-size: 12px; margin: 0 0 30px 0; }
Thanks again for the help
deonped
Great! Glad they got it working for you.
