Home > Deployment > Responsive iFrames

When deploying a RackForms job we'll often use the Embed button on the top of the page in the RackForms editor. This method makes it easy to place a form on any valid HTML destination.

In the "good old days" of the web this was all that was needed to properly place forms on parent pages. In the new world of responsive design however, things are a bit more involved.

Specifically, a key tenant of responsive design is content width is not set to a specific value, but rather shrinks and grows to match the available screen width. If we think about this conceptually for a moment, this means not only is our width "liquid" but so too is our page height. A block of text that's a single line at a 820 pixel screen width becomes four lines at 360 pixels. Multiply this over many lines of text and many form field items and it adds up quick. A form that may be 400px high on a 800px wide page could be 600px high on a mobile phone screen.

The bottom line for us then, is a responsive form needs to have an iFrame that responds not only to width, but height as well. Oddly, the width part is easy. If we set an iFrames width property to be 100% that's exactly what happens. As the parent page changes size, the iFrame's content width also grows and shrinks. With height there is no such luck. For some reason their is no 100% height setting that works for iFrame content, which means we need a different way:

The RackForms Responsive iFrame Script.

This script uses JavaScript placed on the parent page to continuously query the form pages natural height, which then updates the iFrame's height property. The end result is a an embedded form page that always has the proper iFrame height set.

There are a few items to note however. First, this process only works when both pages share the same security level. If the parent page (the only hosting the iFrame) is HTTPS, then the form server must also be HTTPS. Second, this script may not work if the hosting domains differ. In recent years web browsers have been getting stricter with so called cross origin resource sharing. If you find the script isn't working, you may need to place the form on the same domain as the parent page.

Using the script is easy:

1. Include this script just before the closing HTML tag of the same page you added the RackForms iFrame:

<script type="text/javascript" src="resize-iframes.js"></script>

2. Optional: set_width and set_height control for which direction we want to resize in.

3. Optional: rs_width_offset and rs_height_offset control the padding.

In short, download the script above and save it to the parent pages web hosting. Place the script tag on the same page as the iFrame at the bottom of the page.

If you have any questions please feel free to shoot us an email!