How to style Squarespace reCAPTCHA
If you’re using built-in Forms or Newsletter Blocks in Squarespace 7.1, you may have noticed the reCAPTCHA that appears when spam protection is enabled. While essential for preventing spam, the default reCAPTCHA badge or widget often clashes with the overall aesthetic of your website.
In this tutorial, you’ll learn how to style the reCAPTCHA badge on your Squarespace site using CSS — including options to move it, fade it, or even hide it discreetly within Google’s acceptable use policies. The code used was provided by Schwartz Edmisten. This will work on Squarespace 7.1.
Table of Contents
Why Style reCAPTCHA?
Maintain a consistent site design
Prevent visual clashing with dark/light backgrounds
Improve form layout and aesthetics on mobile
Complexity: Easy
Step-by-Step Instructions
Step 1
Go to Pages > Custom Code > Custom CSS and paste the code
//Google Recaptcha
.captcha-container {
opacity: .2;
transition: opacity .3s ease;
}
.newsletter-form-body:focus-within .captcha-container, .form-wrapper:focus-within .captcha-container, .captcha-container:hover {
opacity: 1;
}
Step 2
When you mouse over the reCAPTCHA or when the Form or Newsletter is click the reCAPTCHA becomes more visible.
Key Takeaways
reCAPTCHA is essential for preventing spam on forms and newsletter blocks in Squarespace 7.1.
You can’t change its design or color, but you can style its placement and visibility using custom CSS.
Hiding the badge entirely violates Google’s terms — proceed with caution.
Always test your form functionality after applying custom CSS to ensure reCAPTCHA still works.
FAQs
Can I match the badge background to my site’s color scheme?
Not directly — Google doesn’t allow altering the badge’s colors, but you can adjust placement and opacity to reduce visual impact.
Will hiding the badge break my forms?
If you're using invisible reCAPTCHA, the form may still work, but hiding the badge goes against Google’s rules and is not recommended.
What if reCAPTCHA isn’t showing?
Ensure you’ve added your site/secret key and that spam protection is enabled in your form settings.
Conclusion
While you can't redesign reCAPTCHA from scratch, you can certainly improve its position and visual harmony with your Squarespace site. With just a few lines of CSS, you can clean up your layout and ensure your spam protection tool blends — not breaks — your site’s design.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
