What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Iframe embedded form is not displaying in full

    Asked by mcwood968 on June 14, 2016 at 02: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

     

     

     

    Page URL:
    http://www.healthitconferences.com/iframe-resizer

    Screenshot
    iframe embed cut off
  • Profile Image
    JotForm Support

    Answered by EltonCris on June 14, 2016 at 04: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:

    Landscape:

    Let us know if you have further questions.

     

     

  • Profile Image

    Answered by mcwood968 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. :)

  • Profile Image

    Answered by mcwood968 on June 20, 2016 at 09:16 AM

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

  • Profile Image
    JotForm Support

    Answered by jonathan 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.

     

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

     

    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.