iFrame not resizing when optional field appears

[markjamesm]

Describe the bug When filling out a contact form, if you select "United States" as Country, a new form field appears. The addition of the new field causes a scrollbar to appear at the right of the form, indicating that the form did not properly resize. The bug only appears on desktop; mobile works normally.

To Reproduce Steps to reproduce the behavior:

1. Go to https://mayahtt.com
2. Click on the "Get in touch" button to be taken to the contact form at the bottom of the page
3. Select "United States" as the Country. A new field called "State will appear"
4. The form does not resize properly.

Expected behavior The form updates to accommodate the new form field (note the scrollbar in the screenshot below).

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version: 129.0.6668.59 (Official Build) (64-bit)

Smartphone (please complete the following information):

• Device: iPhone XS Max
• OS: iOS 17.6.1
• Browser Stock browser, Safari

[davidjbradshaw]

I've just tried this in both Chrome and Safari and cannot reproduce the issue.

I'm also not seeing iframe-resizer running on your page, I would expect to see which version is being used logged to the console.

[davidjbradshaw]

If you still have an issue and would like me to take a deeper look, can you please install the last beta version, as it has more detailed log output, and set the log option to true, so I can see what is going on.

[markjamesm]

Hi David,

I've done some debugging, and it appears that the way I'm creating the iFrame is causing the issue. Using the guide provided on the iFrame-Resizer website works fine, but ideally I would like to capture the conversionPageUrl. As the below code worked fine on version 4.3.9, is there something in the newer version preventing this method from working?

<style>
    iframe {
        width: 100%;
        height: 100vh;
        border: 0px;
    }
</style>

<noscript>
    <iframe src="https://www2.mayahtt.com/l/504061/2018-02-06/67n2mt" id="pardotForm" type="text/html"
        allowTransparency="true"></iframe>
</noscript>

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@5.3.1-beta.1/js/iframeResizer.js"></script>

<script>
    $(document).ready(function () {
        iframeResize({
        license: 'xxxx',
        waitForLoad: false,
        log: true,
    }, '#pardotForm');
</script>

<script type="text/javascript">
    var conversionPageUrl = "Conversion_Page_URL";
    var formUrl = 'https://www2.mayahtt.com/l/504061/2018-02-06/67n2mt';
    var params = window.location.search.replace('?', '');
    var thisScript = document.scripts[document.scripts.length - 1];
    var iframe = document.createElement('iframe');
    var title = decodeURIComponent(document.location);

    iframe.setAttribute('src', formUrl + '?' + params + '&' + conversionPageUrl + '=' + title);
    iframe.setAttribute('id', 'pardotForm');
    iframe.setAttribute('type', 'text/html');
    iframe.setAttribute('allowTransparency', 'true');

    thisScript.parentElement.replaceChild(iframe, thisScript);
</script>

[davidjbradshaw]

I think the issue is your creating the iframe after calling iframeResize(). Try swapping the order of the last two <script> blocks. You’re also missing a closing bracket on your call to iframeResize().

Replacing the script block with the iframe is a novel approach, I think this is a bit risky, as your not getting the element your element to replace via an ID, so it risks the whole page breaking, if you add another script to the page.

Taking all the above in, I end up with the following:

<style>
  iframe {
    width: 100%;
    height: 100vh;
    border: 0px;
  }
</style>

<noscript>
    <iframe src="https://www2.mayahtt.com/l/504061/2018-02-06/67n2mt" id="pardotForm" type="text/html"
        allowTransparency="true"></iframe>
</noscript>

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@5.3.1-beta.1/js/iframeResizer.js"></script>

<script type="text/javascript" id=“iframeScript”>
    const conversionPageUrl = "Conversion_Page_URL";
    const formUrl = 'https://www2.mayahtt.com/l/504061/2018-02-06/67n2mt';
    const params = window.location.search.replace('?', '');
    const title = decodeURIComponent(document.location);
    const id = 'pardotForm';

    const thisScript = document.getElementById(‘ iframeScript’);

    const iframe = document.createElement('iframe');

    iframe.setAttribute('src', formUrl + '?' + params + '&' + conversionPageUrl + '=' + title);
    iframe.setAttribute('id', id);
    iframe.setAttribute('type', 'text/html');
    iframe.setAttribute('allowTransparency', 'true');

    thisScript.parentElement.replaceChild(iframe, thisScript);
</script>

<script>
  $(document).ready(() =>
    iframeResize({
      license: 'xxxx',
      waitForLoad: false,
      log: true,
    }, '#pardotForm')
)
</script>

[markjamesm]

Thanks David. I think I'll refrain from using this method as I've previously had issues with the iFrame loading in the wrong location, and occasionally pages would auto-scroll to the contact form anchor link on their own. For example, the frame would sometimes appear below the site footer:

This is how it renders normally:

The issues were intermittent and happened across browsers on various user's machines, but I wasn't able to reproduce it reliably. I upgraded to v.5.3.1 in the event that it may have been the old iFrame-Resizer causing the problem (I know 5.x has received significant updates), but given your comment and my tests I suspect it is due to the script replacement.