Squarespace Lightbox Form CSS

↓ Scroll down for the custom code

When you use the Form Block in Squarespace, you have the option of setting it to open as a lightbox. This means that instead of having the full form embedded on your page, there is a button the user clicks to pop open the form in a modal or “pop up” window. This is particularly useful when you don’t want to interrupt the flow of your page content with a big swath of form questions.

Form Block Lightbox styles

With Form Blocks, you can style the fonts and colors using Squarespace’s Site Styles. The drawback? For whatever reason, the site styles you chose for your Form Block (fonts, etc.) don’t carry over to the lightbox. So you get an ugly unstyled pop up.

Here’s how to fix it:

Custom CSS

Paste this into your Custom CSS and adjust as needed:

/* form lightbox */
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content  {
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.form-wrapper input[type=submit] {
 	font-family: sofia-pro !important;
	border-radius: 0px 8px 8px 8px;
}
.sqs-modal-lightbox {
 font-family: 'sofia-pro';
}