How to customize a light box contact form in Squarespace
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
In this tutorial you’ll learn how to customize the look of a Lightbox contact form on your Squarespace website. We’ll be using custom CSS to change the overlay color, add a border, and update the style of the form title.
As always, the codes we’re using in this video are below, but there are quite a few parts of this code that you’ll want to update to make it uniquely yours! Be sure to watch the video so you’ll understand what you’ll need to customize.
If this is your first time using CSS for Squarespace, awesome! 🙌 I have a lot more to teach you - check out my free class on basic CSS for Squarespace here: insidethesquare.co/learn
How to change the background overlay color
.sqs-modal-lightbox-content .lightbox-background{
background: pink;
opacity: 0.5
}
Add a border
.lightbox-content{
border-radius:15px;
border:3px solid pink;
outline:2px solid purple
}
Update the title font style
.lightbox-content .form-title{
color:purple!important;
font-size:20px!important;
}
To create an even more customized title, check out my free guide to common font & text properties here: insidethesquare.co/textguide
Customize the form field background color
.sqs-modal-lightbox-content .sqs-block-form .field-list .field input, .sqs-modal-lightbox-content .field textarea {
background: #e5f5f6!important;
border-radius:5px!important
}
⭐️ Free Class on CSS for Squarespace
🔡 Free guide: common font & text CSS properties