SOLVED: Adding reCaptcha Breaks Form

Bugs
1

Browser: Chrome 122
OS: macOS2
URL: https://livelyneighborfood.com/
Video: Watch - Screencastify

This is new. Why does adding reCaptcha push the submit button to the next line? I couldn’t find anything by inspecting the page. This form is halfway down on the linked page.

Thanks
Bill

2

Hi Bill,
Thanks so much for your report!

“Breaks the form” is a bit of an exaggeration, don’t you think? :smiley:

The gap is caused by the padding at the bottom of the form group, which shouldn’t be there in the case of the recaptcha - at least not if it’s not visible.

I have added the problem to the bug tracker.

In the meantime, you can simply remove the padding by adding this to the custom CSS of the form:

%root% .form-group.captcha {
  padding-bottom: 0;
}

Best regards,
timmse

3

Hi timmse.

I didn’t mean to alarm - I should have said it breaks the layout.

The suggested CSS didn’t fix it.

FWIW, the form displays correctly in the builder (with or without this fix) but not on the page.

Thx
B

4

Having the same issue. Removing the padding didn’t work but adding width:0; fixed it.

5

Same here, alo. Here’s what I added to the form custom CSS:

.captcha {
width: 0;
}

6

Hi guys,

We’ve fixed this issue in Bricks 1.10, now available as a one-click update in your WordPress Dashboard.
You can see the full changelog here: Bricks 1.10 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
M