[Share] Click Navigation Link - Open Form Popup

If you can't make it work, you can share site url, I can help easier.

#1. First, you need to edit Site Footer

#2. And add a Form Block

#3. Click Design > Enable Lightbox

#4. Add a Link item in Main Navigation > Enter text/URL

• Text: enter any text that you want, in my example, we will use “Contact“
• URL: #contact

Make sure the option “Open link in new tab” is disabled

#5. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('header#header [href*="#contact"]').on("click", function(event){
      event.preventDefault();
    $('button.lightbox-handle')[0].click();
  })
})
</script>

@tuanphan This is extremely helpful, thanks! The issue I am running into is that this approach works when tested in Squarespace Editor mode, but when I test on my webpage the popup form never becomes visible... any clue why that would be?

8 hours ago, flyfishingnerd said:

@tuanphan This is extremely helpful, thanks! The issue I am running into is that this approach works when tested in Squarespace Editor mode, but when I test on my webpage the popup form never becomes visible... any clue why that would be?

Can you share your site url?

@tuanphan trailheadcrossfit.com

7 hours ago, flyfishingnerd said:

@tuanphan trailheadcrossfit.com

I see you haven't done Step 4 yet. Can you check again?

@tuanphan sorry for the delayed response. All steps are currently enabled on my website trailheadcrossfit.com. Still the same issue where the code works when I am in Squarespace Editor, but the lightbox/form does not pop up when in browser.

7 hours ago, flyfishingnerd said:

@tuanphan sorry for the delayed response. All steps are currently enabled on my website trailheadcrossfit.com. Still the same issue where the code works when I am in Squarespace Editor, but the lightbox/form does not pop up when in browser.

This should be 1 number 0

000000 is invalid

1 hour ago, tuanphan said:

This should be 1 number 0

000000 is invalid

@tuanphan Thanks, but even after updated to a single '0' I still have the same issue.

3 hours ago, flyfishingnerd said:

@tuanphan Thanks, but even after updated to a single '0' I still have the same issue.

#5. Try this code for step 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('a[href="#contact"]').on("click", function(event) {
        event.preventDefault();
        $('button.lightbox-handle').click(); 
    });
});
</script>