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.