Invisible Recaptcha Badge Positioning Issue

Question

I recently started using Google's new method of Recaptcha - their new Invisible Recaptcha. I realized that the implementation of this version was a little different, as you attach the recaptcha attributes directly to your submit button which then calls google's recaptcha api and begins the verification process. I have all of that working fine, but the one major issue that I am having is with the "Protected by recaptcha" badge positioning.

Upon adding the recaptcha configuration to my submit button, I start seeing the badge on the right of my screen. According to other sites, this badge is supposed to just be a square recaptcha logo until it is hovered and then it is supposed to slide out to be the large rectangle that I am seeing initially on my site.

Here is an image of what I am seeing on my site after implementing the invisible recaptcha.

Here is the submit button code containing the recaptcha attributes:

<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="key"
data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>

Note: The other data-badge options such as inline and bottomleft cause the same positioning issues.

The code of of the form containing the button:

    <form action="processjoin.php" method="post" id="signupform" style="padding-top:10px;padding-bottom:10px;max-width:50%;">
        <h2 class="sr-only">Login Form</h2>
        <div></div>
        <div class="illustration"><i class="icon ion-ios-pulse-strong"></i>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Your Name" class="form-control" id="name" />
                    </div>
                    <div class="form-group">
                        <input type="text" name="username" placeholder="Username" class="form-control" id="username" />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="email" name="email" placeholder="Email" class="form-control" id="email" />
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" placeholder="Password" class="form-control" id="password" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block g-recaptcha" data-sitekey="6LfdMhkUAAAAAHl-LXZm_gPP1g-UX0aWt8sMR4uW" data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
            </div>
            <a href="#" class="forgot">
                <div></div>Already have an account? Sign in.</a>
        </div>
    </form>

I am experiencing two issues with this recaptcha badge:

1. The badge is glitched outside of its bounding box/border type thing
2. It also isn't positioned partially off-screen until hovered, like it is supposed to be. I am seeing the full rectangle before I interact with it in any way with my mouse. I should be seeing the square logo until I hover over it, and it slides out to be the full rectangle.

Basically, I need to figure out how to position this properly so that it slides in from off-screen like it is supposed to, and is contained properly inside of its border.

Google Chrome Developer tools tell me that these are the current attributes of the badge div, generated when the window is loaded:

I really appreciate any help that you can provide! If I'm incorrect in thinking that the badge is required, please correct me and I'll force its removal with CSS, however, I'm afraid that this may mess up the captcha verification process and violate Google's policy.

Answer 1

This might help: https://developers.google.com/recaptcha/docs/invisible#config

You can set data-badge="inline" to allow you to control the CSS.