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.
- Add the Code Content Block to your page
- 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.
- Edit the Code Content Block you added in Step 2 above
- 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.