How to Make Your Form Pop Out of a Button into a Lightbox
With no code! Forms are some of the most useful features on a Squarespace site. Not only can you collect information from your visitors and capture leads, but you can customize the form to include check boxes, text fields, even file uploads! But you might not always have room on your page for all the questions you’d like to ask on your form. What’s a designer to do?
Enter lightbox mode. 💡
It’s not code, it’s not magic, it’s just a single toggle in your form settings and your whole form will display neatly tucked away as a simple button on your website that only pops open when clicked.
What’s a lightbox, you might ask?
Great question. A lightbox is just a little window overlaid on top of the rest of your site when clicked. Sometimes you’ll see lightboxes used in image galleries, so when you click on a single image it will display larger on top of the rest of the content without losing your place on the page behind it. We’re doing that with forms!
Watch the Video
Click to see a couple of use cases and an easy step-by-step guide. 🪄👩🏻💻
How to Add a Form
in Fluid Engine, go to Add Block
choose a Form block
drag to position
customize fields
What does it look like?
The look and feel will depend on the colors, fonts, and styles (and maybe custom code) set up in your website, but here’s an example of a form that’s fully displayed on the page, no lightbox button (yet).
Turn Your Form into a Lightbox Button
click into the Form
click the Edit pencil
at the top of the small menu, click Design
scroll down to Lightbox
toggle it on!
click Save
What does it look like now?
Again, styles can vary site to site, but here are a few buttons and their resulting lightbox forms in various designs.
Forms tucked away as Buttons
Forms open in a Lightbox
Additional Button Customizations
left, right, or center align the button using the arrow options
change the button text from “Open Form” to anything you want
and of course, you can change the overall Button Styles in the Site Styles menu
And there you have it. Great job!
Now you, too, hold the secret no-code, one-click hack to tuck your forms away into a magical clickable button. Enjoy! Reach out if you have questions and as always, have a blast designing your Squarespace website.
Get insider access to my exclusive updates
(no spam, I promise)
Your Designer
I’m Kessiah, a Squarespace website designer for happy visionaries of all industries. I work with businesses and brands of all shapes and sizes, including startups, corporations, agencies, nonprofits, and solopreneurs. If you’ve got a project you’d like to discuss, you can email me at hello@kessiah.com, leave me a note here, or book in for a free 15 minute consultation call here to tell me all about what you have in mind.
