How to Lightbox a Contact Form on Your Squarespace Website
Today, I’m excited to show you a really cool feature that’s actually built right into Squarespace—no CSS required. If you’ve been wanting to add a sleek, modern contact form to your website without cluttering up your layout, I’ve got just the trick: the lightbox feature.
A lightbox is a pop-up window that displays your contact form when visitors click a button. This method helps keep your page design clean and user-friendly, while still making it super easy for visitors to get in touch with you. So let’s dive in and walk through how you can set this up on your own Squarespace site.
Watch the video
Check out the YouTube video below. 👇🏼
Why Use a Lightbox for Your Contact Form?
If you’ve ever tried placing a full contact form directly on your homepage, you know it can be a little overwhelming—especially in tight spaces like the hero section. A lightbox keeps things looking clean by hiding the form behind a button. Visitors can still reach out to you quickly, but the form doesn’t take up valuable space on your main page.
This is a great solution for:
Simplifying your homepage layout: No more giant forms dominating the screen.
Keeping your website visually appealing: Visitors only see the form when they need it.
Improving the user experience: Your visitors can focus on the main content without distractions, yet still contact you easily.
Step-by-Step Guide to Adding a Lightbox Contact Form
Step 1: Add a Contact Form Block
Let’s start by adding a contact form block to your page:
Scroll to the section of your page where you want to have the button that the contact form will pop out of and hit the “Edit” button in the top left of the screen
Find and click on the “Form” block
Once the Form block is added, use it’s menu to choose which information fields you would like included on the form
You can also edit aspects of the form design here as well
Step 2: Enable the Lightbox Feature
This is where the magic happens—no CSS needed!
Click on the form block, and then hit “Edit.”
Navigate to the Design tab and scroll down to find the “Lightbox” option. It’s as simple as toggling this on, and just like that, your form will now open in a lightbox instead of directly on the page.
Once the lightbox is enabled, you’ll notice the form disappears from the main page layout and is hidden behind the button. Now, when visitors click the button, the form will pop up in a sleek, centered lightbox window.
Step 3: Customize the Button Text and Design
To make the button stand out and fit with your site’s design, you can customize it:
Change the button text to something clear and engaging like “Get in Touch” or “Contact Us.”
Head to the button's Design settings and choose the alignment and button style (primary, secondary, or tertiary) based on your website’s look and feel. You can also adjust the color and hover effects to make it more attention-grabbing.
Step 4: Test and Preview the Lightbox
Once you’ve set everything up, always preview and test the lightbox to make sure it works smoothly:
Save your changes and click the button to see the lightbox in action. When the contact form appears in the pop-up, check that all the fields are aligned and functional.
If your form needs additional fields, such as a file upload option or a date picker, you can add those while in the form settings.
Why This Looks Better Than a Traditional Form
Traditional contact forms, especially in a hero section or homepage, can get bulky and take up a lot of space. By using a lightbox, you create a clean, professional look that doesn’t overwhelm your visitors. Plus, the interactive pop-up adds a modern, polished touch to your site.
Wrapping Up
And that’s all there is to it! Setting up a lightbox for your contact form on Squarespace is quick and easy, and it can really make a difference in how your site looks and functions. Your visitors will appreciate the streamlined design, and you'll still be giving them an easy way to contact you.
📨 Join my mailing list to get Squarespace tips & tricks right in your inbox
Your Designer
I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
