Request: invisible reCAPTCHA attribute data-style

Hi stucyber,

Sure, I can help out with this. It looks like you switched the reCAPTCHA style to the standard checkbox option, and that’s definitely the simplest solution.

If you’d like to switch back to the invisible option, here’s a bit of code you could use to place the badge inline with your form:

/**
 * Change the position of Google Invisible ReCAPTCHA badge.
 *
 * @link https://developers.google.com/recaptcha/docs/invisible#render_param
 * @param array $data
 * @param array $form_data
 * @return array
 */
function wpf_invisible_recaptcha_position( $data, $form_data ) {
	
	$type = wpforms_setting( 'recaptcha-type', 'v2' );
	if ( 'invisible' === $type ) {
		$data['badge'] = 'inline';
	}
	return $data;
}
add_filter( 'wpforms_frontend_recaptcha', 'wpf_invisible_recaptcha_position', 10, 2 );

So this would look very similar to what you have now, except that instead of a checkbox you’d just see that invisible reCAPTCHA badge.

In case it helps, here’s our tutorial with the most common ways to add custom code like this.

For the most beginner-friendly option in that tutorial, I’d recommend using the Code Snippets plugin. This will protect your code from updates and keep it easy to manage right within your WordPress admin area.

I hope this helps! ??

Sorry for replying that late, but I’m very grateful for you helping me out!

Cheers, David

After we make the badge inline, how do we then align the badge on the right side of the form?

Hi blahraptors,

To do what you’ve described you can use some custom CSS:

div.wpforms-container-full .wpforms-form .wpforms-recaptcha-container {
    float: right !important;
}

In case it helps, WPBeginner has a detailed tutorial on how to add custom CSS like this to your site.

Hope this helps ??

@ethanchoi I would like to float my v2 invisible captcha left, I tried your CSS but it had no affect:

div.wpforms-container-full .wpforms-form .wpforms-recaptcha-container {
    float: left !important;
}

Do I need to modify a PHP file somewhere to make the captcha inline for this to work? Please let me know.

• This reply was modified 5 years, 10 months ago by gizmodious. Reason: typo for code
• This reply was modified 5 years, 10 months ago by gizmodious. Reason: another typo :(
• This reply was modified 5 years, 10 months ago by gizmodious.
• This reply was modified 5 years, 10 months ago by gizmodious.

Hi gizmodious,

My guess is that your reCAPTCHA badge is bumping into the left edge of the form container. Since the badge is already left-aligned in this container when you apply that code snippet to make it inline, there’s no further it can go without some further-modified CSS.

I’d definitely recommend checking the impacts of this on some different device sizes, but you can try something like this:

div.wpforms-container-full .wpforms-form .wpforms-recaptcha-container {
    position: absolute;
    left: 0;
}

Absolute positioning will let the badge move beyond the form container, and then left will push it all the way to the left side. But it’s important to note that absolute positioning can feel a bit tricky to control sometimes, and I’d recommend checking out this tutorial from CSS Tricks for some extra details on how it works.

We won’t be able to provide further support for this customization, but I hope this helps to get you on the right track!

@jquigam I actually inserted/modified your js into snippet and modified with the grecaptcha.render parameters from google. I modified it slightly from:

$data['badge'] = 'inline';

To:

$data['badge'] = 'bottomleft';

Everything is working great now.

• This reply was modified 5 years, 10 months ago by gizmodious.
• This reply was modified 5 years, 10 months ago by gizmodious.

Hi gizmodious,

Ok excellent! That’s even better ??