Buy me a coffee

Form Lightbox

Change title size

Add this code to CSS Custom Box and click Save

/* Lightbox form title size */
div.lightbox-inner .form-title {
    font-size: 50px !important;
}

change-title-size-01-min

Add a subtitle

Add this code to CSS Custom Box and click Save

/* add sub text */
div.lightbox-inner .form-title:after {
    content: "enter some text here";
    display: block;
    font-size: 16px;
}

add-a-subtitle-01-min

Align center title

Add this code to CSS Custom Box and click Save

/* align title */
div.lightbox-inner .form-title {
    text-align: center;
    margin-left: 22px;
}

align-center-title-01-min

Change X icon style

Add this code to CSS Custom Box and click Save

/* Change X icon style */
div.lightbox-close {
    color: #f1f !important;
    font-size: 30px !important;
}

change-x-icon-style-01-min

Change button color

Add this code to CSS Custom Box and click Save

/* Form Lightbox Button */
div.lightbox-inner input.button {
    background-color: #f1f !important;
    color: #000 !important;
}

change-button-color-01-min

Button hover color

Add this code to CSS Custom Box and click Save

/* Form Lightbox button hover */
div.lightbox-inner input.button:hover {
    background-color: #000 !important;
    color: #f1f2f3 !important;
}

button-hover-color-01-min

Change box background color

Add this code to CSS Custom Box and click Save

/* Form lightbox background color */
div.lightbox-content {
    background-color: #f1f !important;
}

change-box-backgrond-color-01-min

Change box background image

Add this code to CSS Custom Box and click Save (you can change the example image URL to URL that you want)

/* Form lightbox background image */
div.lightbox-content {
    background-image: url(https://cdn.pixabay.com/photo/2023/03/15/16/17/feather-7854908_1280.jpg) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

change-box-background-image-01-min

Add a frame around Form Lightbox

Add this code to CSS Custom Box and click Save

/* add a frame around form lightbox */
div.lightbox-content {
    border: 3px solid #f1f;
}

add-a-frame-around-form-lightbox-min

Overlay color behind Form Lightbox

Add this code to CSS Custom Box and click Save

/* Overlay color behind lightbox form */
.sqs-modal-lightbox-content .lightbox-background {
    opacity: 0.8 !important;
    background-color: violet !important;
}

overlay-color-behind-form-lightbox-01-min

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder