Iframe embedded form is not displaying in full

  • mcwood968
    Asked on June 14, 2016 at 2:41 PM

    I'm trying to get the iframe to be truly responsive (based on device, screen, and orientation) so my form neither gets cut off nor leaves a huge blank space at the bottom of the form if the user rotates their device.

    -- In the Form Designer I've selected "Make this form responsive" but that only handles the content of the form, not the iframe.

    -- I tried the Mobile Responsive widget but it also only handles the content of the form itself, not the iframe.

    -- I'm now trying to implement an iframe resizer script on github... https://github.com/davidjbradshaw/iframe-resizer.  It requires that one of the JS files be place within the page contained within the iframe.  I've tried adding a basic Text block to the top of my form and editing its source code so it contained a only the script link <script type="text/javascript" src="//healthitconferences.com/s/iframeResizercontentWindow.js"></script> but that didn't work. When viewing the source code on my site the script HTML is not there. So how can I add this script into HTML page that jotform generates and loads into the iframe?  

    -- Using the full source code is not an option since other, non-technical team members may need to modify the form within JotForm in the future.

    -- My site is built on Squarespace and I have embedded my form by copying the code in JotForm > Publish > Platforms > Squarespace and pasting the code into a code block within my page in Squarespace.

    -- My JotForm link... https://form.jotform.com/61585790637165.

    -- Page on my site where I'm trying to resolve this issue... http://www.healthitconferences.com/iframe-resizer.

    -- Attached screenshot shows the bottom of the form being cut off.  I'm using the developer tools in Firefox w/ responsive mode turned on with a device setting of 360x640.  When I rotate this screen to be landscape orientation the full form displays with a giant amount of empty space at the bottom of the form after the submit button.

    I appreciate the help!

    Melissa

     

     

     

    Jotform Thread 860603 Screenshot
  • Elton Support Team Lead
    Replied on June 14, 2016 at 4:49 PM

    Unfortunately, you can't embed a script into your form. That will be stripped off for security reasons.

    Actually, script embed and iframe embed codes have built-in iframe resizer feature. 

    For iframe, if you have noticed, there's a script included when you take the iframe embed code, part of it is used to calculate the total height of the form. Once there's a change in the iframe content, the iframe height will automatically adjust according to the content height.

    However, in your case, it seems the reCaptcha field is the one causing the form to cut off since the iframe resizer script executes first before the reCaptcha field is generated. I will forward this to our developers so they can further investigate and fix the problem.

    For now, I have injected the following CSS codes into your form. Defining a height of the captcha field through CSS should fix it. This value will be fed up into the iframe resizer during the iframe height calculation (this is the exact height value of the captcha field once generated on the form).

    li#id_15 {

        height: 162px;

    }

    This should give you the following result:

    Portrait:

    Iframe embedded form is not displaying in full Image 1 Screenshot 30

    Landscape:

    Iframe embedded form is not displaying in full Image 2 Screenshot 41

    Let us know if you have further questions.

     

     

  • mcwood968
    Replied on June 14, 2016 at 11:47 PM

    Thank you so much for explaining this in detail. I really appreciate the help! I can breathe a sigh of relief now. :)

  • mcwood968
    Replied on June 20, 2016 at 9:16 AM

    Further testing has shown that simply adding a height to the reCaptcha code block actually does not solve the issue.  

  • jonathan
    Replied on June 20, 2016 at 10:08 AM

    I was still able to see the issue as well when I test on your website on mobile browser.

    Iframe embedded form is not displaying in full Image 1 Screenshot 30

     

    But using the form URL only https://www.jotform.us/form/61585790637165 did not show the same issue.

    Iframe embedded form is not displaying in full Image 2 Screenshot 41

     

    I think you just need to get again the updated iframe publish code of the form and re-publish it on your website.

    User guide: Getting-the-form-iFrame-code

    Make sure to clear first the previous embedded code before re-embedding.

    Let us know if this still did not fix the issue.