This Squarespace lightbox iframe will allow you to use hyperlink to an iFrame lightbox that has a 3rd party form embedded into the iFrame lightbox. The 3rd party form that I am using is a WuFoo form. You’ll want to use an iFrame lightbox if you have a lot of fields on your form making it a long form, especially on mobile devices.
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" data-featherlight="iframe" data-featherlight-iframe-height="767" data-featherlight-iframe-width="414">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-x1g1qrbk0bgxqdz">
Fill out my <a href="https://kensdesigns.wufoo.com/forms/x1g1qrbk0bgxqdz">online form</a>.
</div>
<div id="wuf-adv" style="font-family:inherit;font-size: small;color:#a7a7a7;text-align:center;display:block;">HTML Forms powered by <a href="http://www.wufoo.com">Wufoo</a>.</div>
<script type="text/javascript">var x1g1qrbk0bgxqdz;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'kensdesigns',
'formHash':'x1g1qrbk0bgxqdz',
'autoResize':true,
'height':'904',
'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 { x1g1qrbk0bgxqdz = new WufooForm();x1g1qrbk0bgxqdz.initialize(options);x1g1qrbk0bgxqdz.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" data-featherlight="iframe" data-featherlight-iframe-height="767" data-featherlight-iframe-width="414">Contact Us</a>
<div style="display:none;">
<div id="contact-form">
<!-- Form Embed Code - START -->
<div id="wufoo-x1g1qrbk0bgxqdz">
Fill out my <a href="https://kensdesigns.wufoo.com/forms/x1g1qrbk0bgxqdz">online form</a>.
</div>
<div id="wuf-adv" style="font-family:inherit;font-size: small;color:#a7a7a7;text-align:center;display:block;">HTML Forms powered by <a href="http://www.wufoo.com">Wufoo</a>.</div>
<script type="text/javascript">var x1g1qrbk0bgxqdz;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'kensdesigns',
'formHash':'x1g1qrbk0bgxqdz',
'autoResize':true,
'height':'904',
'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 { x1g1qrbk0bgxqdz = new WufooForm();x1g1qrbk0bgxqdz.initialize(options);x1g1qrbk0bgxqdz.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
In order for us to be able to scroll down the form on a mobile device, we have to add some CSS code.
- Click the gear icon for the page that has this form to get to the page Sett
- Click on the Advanced tab
- Paste the code shown below in the Page Header Code Injection area
<style>
.featherlight-content {
-webkit-overflow-scrolling: touch;
overflow: scroll;}
</style>
Step 5
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 6
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.