Customize the Squarespace Lightbox Form | AJM Learn
Learn how to customize the Squarespace lightbox form using CSS to change the button, fonts, and colors.
UPDATE! SOME CSS IN VIDEO IS OUTDATED – CHECK THE UPDATED CSS BELOW AND IN THE ORIGINAL POST :)
The trusty lightbox form. You create lightbox forms by first creating a regular form, then enabling lightbox mode. But the box is so… boring. I started seeking out ways to change the style of the Squarespace lightbox form when a client was just absolutely not having the stock white and black form style and discovered bits of CSS for changing just about everything in the box.
Original post:
https://ajmexperience.com/learn-posts...
For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
Get our full CSS Library:
https://www.ajmexperience.com/squares...
——————
HERE'S THE CODE:
// ROUND THE CORNERS OF THE BOX //
.lightbox-content {
border-radius: 8px;
}
// CHANGE X CLOSE COLOR //
.lightbox-close {
color: #7cccbd !important;
}
// CHANGE THE FONTS //
// form title //
.sqs-block-form-lightbox .form-title {
color: #7cccbd !important; }
// field title //
.sqs-block-form-lightbox .title {
color: #7cccbd !important; }
// caption text //
.sqs-block-form-lightbox .caption-text {
color: #7cccbd !important; }
// EDITING THE BUTTON STYLE, FONT, AND COLOR //
.sqs-block-form-lightbox .button {
color: #ffffff !important;
background: #7cccbd !important;
letter-spacing: 0.1em;
font-weight: 600;
font-family: Poppins !important;
text-transform: uppercase;
padding: 20px;
}
// CHANGING THE BACKGROUND COLOR //
This one is fun! You can keep it simple and just change the background color, or you can put a custom image as the background. If you’re planning to place an image, the dimensions will depend on how long the form is. For the example image below, I used the dimensions 550 x 710.
This client wanted to display their Google Reviews and a watermark of their icon, so I created a background image strategically placing both.
.lightbox-content {
background: #ffffff !important;
background-image:url(XXX)!important;
background-size: 100% !important;
background-position: 100% !important;
background-repeat: no-repeat !important;
}
Important note! Background images tend do not work great on mobile, so use this code instead if you’d like these changes to only show on desktop.
@media only screen and (min-width: 750px) {.lightbox-content {
background: #ffffff !important;
background-image:url(XXX)!important;
background-size: 100% !important;
background-position: 100% !important;
background-repeat: no-repeat !important;
}}
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.