Form iframe not appearing properly

  • 15 October 2020
  • 6 replies
  • 141 views

First-time poster here. We have a Nintex form on https://www.constructiverenovations.com/vendor-application/ which, until recently (although I don't know exactly when), was working fine. This is a WordPress-based site and the embed code is in a simple HTML widget in the Elementor page editor. The iframe now won't assume its normal full height and, instead, cuts off after only about 160 pixels. I have tested the same code with other pages in the test version of the site and get the same bad result; yet, the embed code works fine within a plain-vanilla HTML page (i.e., outside the WordPress setup). We've made no CSS or other changes that would account for this disparity. Would greatly appreciate any help on this.


6 replies

Userlevel 5
Badge +13

@bwray_fayfin Have you tried playing around with the height of the iframe and potentially setting a pixel amount rather than just a percentage. I am not aware of any changes that should of caused this issue.


 

@leighburke Thanks! Did try that, but this is a multi-page form with differing heights based on received responses. It now appears this is a known WordPress glitch (see https://stackoverflow.com/questions/20793122/iframe-height-not-working-on-wordpress-page) and I'll be trying to address it with the code suggested therein.


Update: It didn't work. 😞 Also, for what it's worth: Chrome DevTools console reports the following error from the Nintex script:


Uncaught TypeError: Cannot read property 'toString' of null

...about this line:


var ntxContainer = document.getElementById(ntxFormId.toString());

Now, this may have been that way for a long time and I don't think it's related; but am just noting it. 

@bwray_fayfin 


 


We are having the exact same problem with our forms.  


 


Your form seems to be working now.  Would you mind sharing what the fix was?

Badge +1

@leighburke 


 


I don't know if this is a known issue and if this convertToSeamless function is supposed to resize the iframes automatically, but the issue is that it seems to be getting all of the scripts on the page and assuming that the Nintex-included one (included with the embed code) will be the second-to-last one, as seen here:


var ntxScripts = document.getElementsByTagName('script');
var ntxFormId = ntxScripts[ntxScripts.length - 1].getAttribute('data-id');
var ntxContainer = document.getElementById(ntxFormId.toString());

Unless the script included with the iframe is the second-to-last script, this won't work. Can this be changed to something like this instead?


let ntxScripts = document.querySelector("script[data-id^='ntxFormContainer']");
let ntxFormId = ntxScripts.dataset.id;
let ntxContainer = document.getElementById(ntxFormId);

This would select the first script with a data-id that begins with ntxFormContainer, which is similar to what the current code for this is trying to do; to select every Nintex form script on the page you'd need to make the first variable a querySelectorAll and then loop through the elements you get back.


 


As of now it doesn't work, though, and I'm having to do a manual solution instead of this working the way it's intended, which is very difficult since I have no visibility into the iframe as it's cross-domain.

Userlevel 5
Badge +13

@joseph_parsley  I will raise this with the Product team for you. Thanks for the feedback.

Userlevel 5
Badge +13

@joseph_parsley I would suggest logging a case with the support team(support@nintex.com) to investigate this issue.

Reply