Search code examples
cssinvisible-recaptcha

Can custom CSS change the display of Invisible ReCAPTCHA?

I am using Invisible ReCAPTCHA for my WordPress CF7 forms. The Advanced Captcha settings allow for positioning the badge either at bottom-right, bottom-left, or inline. I like the compact display of just the badge icon with a bottom setting, but I don't like its sticky nature scrolling with the viewport, especially on narrow mobile devices. The inline setting positions the captcha at the bottom of my form just above the Submit button, but unfortunately, it is displayed in its full, expanded state. Can anyone suggest CSS to either:

1) Use bottom-right setting and prevent it from scrolling?

2) Change inline setting to display only the Badge icon (with protected by content revealed on hover)?

Screenshots

Solution

  • I figured it out!

    1. Go to Invisible Recaptcha's Advanced Settings panel, select Badge > bottom-right.

    2. To your CSS stylesheet, add:

    .grecaptcha-badge {
  width: 70px !important;
  height: 60px;
  position: static !important;
  float: right !important;
  transform: translateY(12px);  /* Bottom-aligns badge icon & CF7 submit button.
                                   Your value may need to be different */
}
.grecaptcha-badge:hover {
    width: 256px !important;
}