How to style Squarespace reCAPTCHA

This tutorial will show you how to style Squarespace reCAPTCHA. The reCAPTCHA is faded out be default and only fades in when the reCAPTCHA on hover and when the Form or Newsletter is clicked. The code used was provided by Schwartz Edmisten. This will work on Squarespace 7.1.

Complexity: Easy

---

Step 1

Go to Design > 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.

---

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, express 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.