[Share] Form Block Lightbox CSS

Some custom CSS for Form Block Lightbox.

You can add code to Website Tools (under Not Linked) > Custom CSS

#1. Change Title size

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

#2. Add subtitle

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

#3. Align center Title

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

#4. Change close X icon style

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

#5. Submit button color

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

#6. Submit button hover color

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

#7. Form background color

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

#8. Form background image

/* 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;
}

#9. Add a frame around lightbox

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

#10. Overlay color behind lightbox

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

If you have any questions, or want to request new code, just comment below

This is great, thanks so much for the info - is there anyway to target this CSS to just one form block? Also if there's any way to do the same CSS for the open form button?

1 hour ago, raego said:

This is great, thanks so much for the info - is there anyway to target this CSS to just one form block? Also if there's any way to do the same CSS for the open form button?

Yes. We can target with ID, but you need to share link to page where you use form & which CSS you want to apply, I can give the code.

In case you know inspect HTML, find this ID

and to apply this ID, suppose #3 code, we will use new CSS like this

/* align title */
form[data-form-id="65dbf1edf3365648bccd9900"] .form-title {
    text-align: center;
    margin-left: 22px;
}

Open Form: You want to change text size, color, background or?