WIP: Contact Form Honeypot causes overflow on RTL sites

Browser: Any browser
OS: both android and apple devices

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

Hello,

I’m having an issue with our contact form. Enabling honeypot feature on any type of field will result in a huge space on mobile and mobile view. And by disabling the honeypot feature, the page appears normal.

Hi Alamaond,
Thanks so much for your report, and welcome to the forum!

Unfortunately, I cannot reproduce the issue. Would you be so kind as to provide a live link to the affected site, so I can inspect the HTML?

I assume the styles are overridden by something, but definitely need a live link to check the issue.

Best regards,
timmse

Hello

This is the link:

edited

Thanks so much!
I was able to identify the problem. It only occurs on RTL sites.
We’ll update this thread as soon as it’s fixed.

Disable the honeypot until then, or use the following workaround:

Add this CSS to Page Settings (or Bricks » Settings) » Custom Code » Body Footer scripts, and replace XXXXXX with the “ID” of the form field (you can find this directly below the honeypot settings). That should override the current styles. Alternatively, you could theoretically also add it to the code element located below your form.

<style>
div.form-group:has(input[name="form-field-XXXXXX"]){
  
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  
}
</style>