In this post, I will share how to create Contact Form Lightbox in Squarespace 7.1.

Notes

• Send me a message if you have any questions/the code doesn’t work.

Let’s start

1. Download Lightbox Anything Plugin

First, you need to download Squarespace Lightbox Anything Plugin, you will have file:

• Squarespace Plugin Lightbox.zip

Extract this zip file, you will have

• instructions.html (plugin documentation)
• plugin-lightbox.js
• plugin-lightbox.css
• plugin-lightbox.less

2. Upload Files to Squarespace

Next, you need to upload 2 files: plugin-lightbox.js & plugin-lightbox.css to your site. See this guide if you don’t know how to upload.

3. Insert code to Footer Code Injection

Next, access Home > Settings > Advanced > Code Injection

and insert this code to Footer

<!-- Plugin Lightbox -->
<link href="/s/plugin-lightbox.css" rel="stylesheet">
<script src="/s/plugin-lightbox.js"></script>
<script>pluginLightbox();</script>
<!-- end Plugin Lightbox -->

4. Creating Contact Form

Next, in Pages > Not Linked, creating a Blank Page > Name it Contact Form

Edit “Contact Form Page” > Insert Contact Form

5. Finding Page URL

Next, you need to find “Contact Form Page” URL

6. Creating Lightbox Contact Form

Next, you can edit Button, then insert this link to Button

#lightbox>page-url

eg here: #lightbox>contact-form

Done!

7. Customize Lightbox

Open instructions.html > Scroll down to bottom > You will see detail instruction! (just copy & paste, no need to know code).

To change Lightbox Width, insert this code to Home > Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
.c-lightbox__content {
    max-width: 40% !important;
}
}
/* Tablet */
@media screen and (min-width:768px) and (max-width:1023px) {
.c-lightbox__content {
    max-width: 50% !important;
}
}
/* Desktop */
@media screend and (min-width:1024px) {
.c-lightbox__content {
    max-width: 90% !important;
}
}

Done. If you have any questions, just click Ask a question button. I will answer in 24 hours.