Squarespace: Navigation Button to Lightbox Form

Question: When clicking the Navigation item button, the contact form opens in the lightbox. How do I create one without using code?

Answer

Step 1. Install Code

First, you need to download this plugin.

Next, upload 2 files to your Squarespace site

  • plugin-lightbox.js
  • plugin-lightbox.css

(in plugin folder, you will see instructions.html, open this file, you will see “how to upload files to Squarespace” video)

Then, paste these code to Code Injection Footer

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

Step 2. Create Contact Form

In Pages > Not Linked > Create Contact Page

Then design your contact page

Step 3. Find Contact Page Slug

Right Click on Contact (or Hover > click Gear icon) > Look at URL Slug. It is Page Slug.

Step 4. Create Button to Lightbox

Main Navigation > Create New Page > Other: Link

Name it:

  • Lightbox or any name what you like

Link:

  • #ligthbox>pageslug

Done! See result!

FAQ

How to make navigation link to button?

Depend your template, you need different code. You can post this on Squarespace Forum. I believe you will get answer for 1-3 days!

If you have any questions, just fill in this form. I will answer!

Share this post:

Posted in