Squarespace iFrame Lightbox with a form

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.

  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" 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.

  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-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.

  1. Click the gear icon for the page that has this form to get to the page Sett
  2. Click on the Advanced tab
  3. 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.