Form - checkbox field alignment problem - and recaptcha question

How To
1

Hi
I am trying to use the form checkbox field for a consent. The problem is that my text is more than one line, so the checkbox goes above the text instead of to the left of it. How can I fix this problem? I’m coming from Elementor and this just worked there, so I must be missing something. Thanks for your help.

Also, I enabled Google Recaptcha v3, and inserted the API etc - it shows that it is active, but on the front end there is no indication that recaptcha is present - how can I check that it is working?

Screenshot of the form: Screenshot by Lightshot
Screenshot of my settings: Screenshot by Lightshot
Spam protection on - screenshot - Screenshot by Lightshot

1 Like
2

Please share the page where this is happening. Then we can provide CSS if necessary.

3

Hello! I’m having the same issue with Google reCaptcha. I’ve added the API keys and turned on ‘Enable reCAPTCHA’ in the Spam Protection section of the Form element’s settings. However, nothing happened after turning that on, and I’m unclear on how to get an “I’m not a robot” reCAPTCHA checkbox to display. Would appreciate any help! Thanks!

UPDATE I’ve just realized that the “I’m not a robot” checkbox I was hoping for is a reCAPTCHA v2 option. Apparently v3 is invisible and verifies requests with a score instead. So I guess I need to use a form plugin if I want to have the v2 “I’m not a robot” checkbox?

4

As far as I know, V3 still needs to show something on the screen to show that it is active, even if the user doesn’t have to click, and that is not showing for me, so am confused.

5

Hi
The form is on Home2 - Digilyfe
Thanks for looking and helping.
Regards
Maurice

6

You can apply this CSS to the object:

.brxe-form .options-wrapper > li {
    display: flex;
    text-align: left;
}

If you want a bit of padding on the checkbox add this too:

.brxe-form .form-group input {
    padding: 0 0 0 1em;
}
2 Likes
7

Thanks for this. The tick box shows in the middle of the two lines, and not next to the first line, which would be normal. Also, the padding pads the heading, but not the tickbox unfortunately. Any ideas?

I’m trying to make it look like this: Screenshot by Lightshot

8

Add the following to the .brxe-form .options-wrapper > li {

    flex-direction: row;
    align-items: flex-start;

Note that the checkbox is a bit higher than the text. This has to do with the text’s line-height.
You can solve that by adding this:

.brxe-form .options-wrapper label {
    margin: -5px 5px 0 0;
}
2 Likes
9

Perfect, thank you so much for helping me with this

10

No problem at all, if you have any further questions let me know.