How to customize a light box contact form in Squarespace // Light box form #squarespacecss tutorial

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. Here are the codes from this tutorial: /* How to change the background overlay color */ .sqs-modal-lightbox-content .lightbox-background{ background: pink; opacity: 0.5 } /* Add a border & outline */ .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: https://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 } 🔗 Related Content 🔗 For additional squarespace tutorials, check out my collection at insidethesquare.co/squarespace-tutorials ⭐ NEW: grab the 5 codes I use on every site: https://insidethesqure.co/five ⭐️ Free Class on CSS for Squarespace: https://insidethesquare.co/learn 🔡 Free guide to common font & text CSS properties: https://insidethesquare.co/textguide ⧠ How to create custom borders with code: https://insidethesquare.co/border 📺 How to add CSS to one page of your website: https://insidethesquare.co/squarespace-tutorials/single-page - - - ❤️ Like this tutorial? You can buy me a coffee to say thanks! ☕ https://buymeacoffee.com/insidethesquare - - - 📑 Get access to my collection of CSS codes for Squarespace at https://insidethesquare.co/css - - - 💻 WEBSITE → https://insidethesquare.co 📧 NEWSLETTER → https://insidethesquare.co/email 🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10 - - - The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥