Squarespace Lightbox with a Form

This Squarespace lightbox with a form will allow you to use hyperlink to a lightbox that has a 3rd party form embedded into the lightbox.  The 3rd party form that I am using is a WuFoo form.

If you’re 3rd party form has a lot of fields, then you’ll want to view my other tutorial that shows the lightbox opening in an iFrame lightbox.

Step 1

Complete the initial setup of a Squarespace lightbox

Step 2

For this step, we are going to create the text link for the lightbox.

  1. Add the Code Content Block to your page
  2. Paste the code shown below in the Code area
<a href="#/" data-featherlight="#contact-form">Contact Us</a>

After you tested the lightbox and if it isn’t working, replace “#/” with “#” to see if that works

Step 3

For this step, we are going to create the lightbox that appears after clicking the link from Step 2 above.

  1. Edit the Code Content Block you added in Step 2 above
  2. Paste the code shown below BELOW the code you added in Step 2 above
<div style="display:none;">
<div id="contact-form">
<!-- Form Embed Code - START -->
<div id="wufoo-p1x0suz71i0zl5h">
Fill out my <a href="https://kensdesigns.wufoo.com/forms/p1x0suz71i0zl5h">online form</a>.
</div>
<div id="wuf-adv" style="font-family:inherit;font-size: small;color:#a7a7a7;text-align:center;display:block;">Use <a href="http://www.wufoo.com/gallery/templates/">Wufoo templates</a> to make your own HTML forms.</div>
<script type="text/javascript">var p1x0suz71i0zl5h;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'kensdesigns',
'formHash':'p1x0suz71i0zl5h',
'autoResize':true,
'height':'597',
'async':true,
'host':'wufoo.com',
'header':'show',
'ssl':true};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { p1x0suz71i0zl5h = new WufooForm();p1x0suz71i0zl5h.initialize(options);p1x0suz71i0zl5h.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');</script>
<!-- Form Embed Code - END -->
</div>
</div>

So, after you pasted the code from Step 2 and Step 3, below is the entire block of code you should have

<a href="#/" data-featherlight="#contact-form">Contact Us</a>

<div style="display:none;">
<div id="contact-form">
<!-- Form Embed Code - START -->
<div id="wufoo-p1x0suz71i0zl5h">
Fill out my <a href="https://kensdesigns.wufoo.com/forms/p1x0suz71i0zl5h">online form</a>.
</div>
<div id="wuf-adv" style="font-family:inherit;font-size: small;color:#a7a7a7;text-align:center;display:block;">Use <a href="http://www.wufoo.com/gallery/templates/">Wufoo templates</a> to make your own HTML forms.</div>
<script type="text/javascript">var p1x0suz71i0zl5h;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'kensdesigns',
'formHash':'p1x0suz71i0zl5h',
'autoResize':true,
'height':'597',
'async':true,
'host':'wufoo.com',
'header':'show',
'ssl':true};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { p1x0suz71i0zl5h = new WufooForm();p1x0suz71i0zl5h.initialize(options);p1x0suz71i0zl5h.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');</script>
<!-- Form Embed Code - END -->
</div>
</div>

Step 4

Test out the lightbox.  I recommend to open the page in a browser window where you aren’t logged into Squarespace.  If you are using Google Chrome, open up an Incognito Window and go to your page URL.

Step 5

After you tested the lightbox and verified it works, the last step is to go back into Edit mode and edit the text I provided you with your own text.