Recaptcha V2 Checkbox can't be placed manually within form builder

[icreatestuff]

What happened?

In Freeform V4 we could specifically place where this type of Recaptcha appeared within the form.

In V5 this appears to always be automatically rendered right before the closing form tag {{ form.renderClosingTag }} or </form>.

The overview section of the docs here states that it would be rendered before the submit button, but if I'm using some custom implementation of the submit button to render it elsewhere in the form other that it's default position before the closing form tag, then the reCAPTCHA checkbox doesn't render above it, but instead still above the closing tag.

 {{ form.renderTag({
    disable: ["submitButtons"]
}) }}
    {% set page = form.pages.current %}

     <div>
        <div>
            {# Custom placement of submit button #}
            {{ page.buttons.renderSubmit() }}
        </div>
    </div>
    
    {# reCAPTCHA V2 Checkbox still rendered here #}
{{ form.renderClosingTag }}

Either, the automated placement of the reCAPTCHA needs to stick above the submit button, wherever it is placed, manually as above or with its automatic placement at the very end of the form, or there needs to be a way to manually place the checkbox elsewhere which could be:

• With a similar render tag as the submit button now has or;
• By drag and drop within the form builder layout

If I'm missing another option that already exists to place it I'm all ears.

Looking forward to hearing your thoughts.

Errors and Stack Trace (if available)

No response

How can we reproduce this?

1. Create a form with the reCAPTCHA V2 checkbox integration enabled
2. Manually move the submit button using the submitRender() tag in Twig
3. Notice how the recpatcha checkbox doesn't appear above the submit button anymore

Freeform Edition

Pro

Freeform Version

5.5.9

Craft Version

4.12.0

When did this issue start?

No response

Previous Freeform Version

No response

[icreatestuff]

Is there anything that can be done to customise the placement of the reCAPTCHA?

[gustavs-gutmanis]

Hi @icreatestuff

Sorry, but currently it isn't possible to alter the position of captchas. We will, however, think of a solution that would let you change their positions.

[icreatestuff]

Thanks for the reply @gustavs-gutmanis, appreciate you adding it to the list to explore a solution.

[kjmartens]

This will be available in Freeform 5.7+ (available by end of October 2024).

I'll update this with a link to the docs for setting it up, etc. 🙂

[kjmartens]

This is now available in Freeform 5.7.0 🙂

In your formatting template, simply place {{ form.renderCaptchas }} wherever you would like the captcha to be shown in the form.

[icreatestuff]

Thanks for the update @kjmartens 👍

[icreatestuff]

For the custom submit button placement we can pass along a class attribute to the tag to implement some styling customisations.

@kjmartens is it possible to do the same for this renderaptchas tag so we can have some control over the styling of the container div? I tried

{{ form.renderCaptchas({
    class: 'mt-5'
}) }}

but that didn't do anything. I also couldn't see any mention of this option in the docs here

[kjmartens]

Sorry for the delay @icreatestuff,

I will note this feature request, and we'll see if it's something we can add quickly. 🙂

[kjmartens]

Actually, this should already be possible @icreatestuff.

If you use the following, it should apply the classes and other attributes to the wrapper div:

{{ form.renderTag({
    captchas: {
        class: ["custom-class", "another-class"],
        "data-test": true,
    }
}) }}

[icreatestuff]

Thanks @kjmartens that works great