Buy me a coffee

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!

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

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder