How to Change the Position of the v2 Invisible reCAPTCHA Badge

Introduction

Would you like to change the position of the Google’s Invisible reCAPTCHA badge on your form? You can easily use PHP to change the default position.

When using Google’s v2 Invisible reCAPTCHA, there is a badge that will show in the bottom right corner of the webpage. By default, the position is always set to bottomright. With a small code snippet you can change this position to either bottomleft or inline.

by default the invisible reCAPTCHA badge appears in the bottom right-hand side of the screen

In this tutorial, we’re going to use a PHP snippet to change the location of this badge from the bottomright to the inline.

Creating your form

Before we create our form, we’re going to make sure our Google settings are set correctly.

If you need help in setting up your Gooogle reCAPTCHA, please check out this documentation.

set the Google invisible captcha

Once you’ve confirmed your Gooogle Invisible reCAPTCHA, you can create your form and add your fields.

On the General Settings tab inside the form builder, be sure to toggle the option to Enable Google Invisible v2 reCAPTCHA.

enable the Google recaptcha on the form builder settings

Adding the code

In our example code, we’re going to change this position to inline. You’ll need to copy this snippet to your site. If you need help in adding snippets to your site, please review this tutorial.

/**
 * Google v2 Invisible ReCAPTCHA badge position
 *
 * @link https://wpforms.com/developers/how-to-change-the-position-of-the-v2-invisible-recaptcha-badge/
 */

function wpf_dev_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_dev_invisible_recaptcha_position', 10, 2 );

Once the above code is added to your site, the badge will now appear just above the Submit button rather than floating in the bottom right corner.

With the code above you've now changed the position of the invisible reCAPTCHA badge

And that’s it! You’ve now successfully adjusted the position of the badge. Would you like to display shortcodes inside your HTML form field? Try out our tutorial on How to Display Shortcodes Inside the HTML Field.

Filter Reference: wpforms_frontend_recaptcha