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

    Adding form to WordPress: the plugin method makes the page to jump, and the Iframe code stretches the box where the form is embedded.

    Asked by ASSETAviation on September 15, 2016 at 11:26 PM
    The issue is that the Iframe code that I use stretch the box where the form is embedded.
  • Profile Image
    JotForm Support

    Answered by Chriistian on September 15, 2016 at 11:37 PM

    Can you please try using the iFrame code below instead. I've included the script code so that the size should automatically fit based on your box.

     <iframe id="JotFormIFrame-62581015954861" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62581015954861?nojump" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = false; if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { ifr = document.getElementById("JotFormIFrame"); } var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } </script>

     

    If the issue persists, please let us know.
    Regards.

  • Profile Image

    Answered by ASSETAviation on September 16, 2016 at 12:57 AM

    Hi Chriistian, I have embedded the code that you have provided, but there is still a lot of space underneath (I removed the box, but all this space is still there). Also, now another problem appeared, when you select yes to all the questions, the final option is cut off on the screen, and you cannot see next and back buttons see the image below:

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 16, 2016 at 01:47 AM

    I checked your the form on the website that you previously linked (https://assetaviation.edu.au/aerodrome-reporting-officer-training/) and it looks like I am able to see the final option on your form.

    Are you perhaps referring to a different page on your website? If so, please provide us with the link to that page so we can check the form further. I will be waiting for your response.
    Regards.

  • Profile Image

    Answered by ASSETAviation on September 16, 2016 at 02:08 AM

    Hi Chriistian, maybe we are selecting different options, the issue is definitely there. I've put the screenshots below, so you can see:

    step 1

    step 2

    step 3

    step 4

    step 5 - bottom section is not visible (submit button and back button)

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 16, 2016 at 03:31 AM

    Hello ASSETAviation,

    Have you reverted the embed code already? I did check your webpage where you have embedded your form and found that you are still using your form's script embed code. Please check the screenshot below:

     

    Please inject the iFrame embed code which my colleague have shared and see if that solves your problem.

    Do get back to us if the issue persists.

    Thank you!

  • Profile Image

    Answered by ASSETAviation on September 16, 2016 at 07:42 PM

    Hello, team, I've checked and the code that I am using is what you have provided. I've cleared cache, to make sure that you can see the updated page. The issue is still there. Also, I've noticed that this code places this symbol at the end of the form and my all content that follows after the form disappears (this is at the back end, the front end looks as it should).

     

     

    So, now we have three issues:

    The first one - the form stretches the space below

    The second - if you go up and follow the steps that I've provided you will see that the form cuts off at the bottom.

    The third - the code places something after the form, that shows this sign (see screenshot above) and the rest of content disappear at the back end.  

    Kind regards,

    Elena

  • Profile Image
    JotForm Support

    Answered by Mike on September 16, 2016 at 09:19 PM

    It seems that embedded form does not have enough space on your website.

    For example, if we remove the max-width parameter applied to the mk-grid class, the form placeholder element will have enough space to hold the whole form.

    I would like to suggest checking this issue with your website theme developer.

    The media icon might represent the auto-height javascript code that follows the form iFrame.

  • Profile Image

    Answered by ASSETAviation on September 16, 2016 at 11:05 PM

    Hello team, I would like to disagree with you, because, when the form is embeded with this snippet via jotform plugin [jotform id="62581015954861"], everything is working fine, except the form jumps (but everything is visible, and there is no space under the form). Therefore, I think the issue is in the code that embed's the form. I have embeded the form with this snippet, so you can see for yourself.

    Could you please help.

     

     

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on September 16, 2016 at 11:48 PM

    I have checked the form with the plugin embedded version, and you are correct, the only issue is that the form jumps.

    I see we have tried many methods, but another issue occurs. I am not sure if this is going to work, but, could you add "?nojump" in plugin ? Example:

    [jotform id="62581015954861?nojump"]

    Otherwise, we will need to escalate this to our back-end team to get further help. Thanks for your patience.

  • Profile Image

    Answered by ASSETAviation on September 17, 2016 at 02:08 AM

    Thank you BDAVID, I've tried [jotform id="62581015954861?nojump"] as you've suggested, but it did not work. Hope your back end team can help.

    Kind regards, Elena

  • Profile Image
    JotForm Support

    Answered by Boris on September 17, 2016 at 02:43 AM

    As my colleague Mike pointed out above, your form being cut off when embedded seems to be a design issue coming from your website itself. Your form is currently using the best possible iframe embed code:

    <iframe id="JotFormIFrame-62581015954861" style="width: 100%; height: 539px; border: none;" src="https://form.jotform.com/62581015954861?nojump" width="300" height="150" frameborder="0" scrolling="no"> </iframe> <script type="text/javascript"> window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = false; if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { ifr = document.getElementById("JotFormIFrame"); } var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } </script>

    However, the container element (.mk-video-container) inside of which you have embedded this form is set to have 0 pixels of height, and an additional "padding" on its bottom which is set in percentages of your website:

    From looking this up further, this looks like something created by a Wordpress theme called "Jupiter", which your site seems to be using. It is unfortunately not something we can control from our (JotForm) side, as it is being caused by the element on your website.

    The container element .mk-video-container is not getting any higher than about 625 pixels, while your JotForm form needs 865 pixels of vertical height to display with the answers you've provided in your screenshots. This element is not resizable. To correct the issue with it being too short, you would need to add CSS code such as the following into your Wordpress website, and not to the form:

    .mk-video-container { min-height: 865px; }

    Please try it out, and let us know whether your form is displaying fully after that.

  • Profile Image

    Answered by ASSETAviation on September 17, 2016 at 03:42 AM

    Hello team, when I add this CSS code to the Wordpress site, it helps and the whole content is visible. But when the form is embeded with the I frame it stretches the space below the form. See below.

    When the form is embeded with this snippet [jotform id="62581015954861"] nothing stretches, everything looks like it supposed to look, but the form jumps. See below

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on September 17, 2016 at 06:21 AM

    I checked your form and I see the problem. I run a couple of tests, but I wasn't able to locate the cause of this issue in your page's source code. I understand that my colleagues adjusted the iFrame code so it fits your page, but could you please try embedding this code instead:

    <iframe id="JotFormIFrame-62581015954861" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.co/62581015954861?nojump" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>

    Please run a test and let us know if that prevented jumping.

    We'll wait for your response.

    Thank you!

  • Profile Image

    Answered by ASSETAviation on September 17, 2016 at 06:44 AM

    Hello Nik, thank you,

    I've used this iframe code:

    and inserted this CSS code to the Wordpress site: .mk-video-container { min-height: 865px; }

    This eliminated two problems: 1. Form is not jumping anymore; 2. Full content is visible, however, the third problem is still there i.e when the form is embeded with the I frame it stretches the space below the form. See below.

    When the form is embeded with this snippet [jotform id="62581015954861"] nothing stretches, everything looks like it supposed to look, but the form jumps. See below

     

    Hope you can help to resolve this issue.

  • Profile Image
    JotForm Support

    Answered by Nik_C on September 17, 2016 at 07:30 AM

    Thank you very much for your results.

    I'm glad we are close to fixing the problem. I see that jumping is not an issue anymore. Regarding the space, first let's decrease min-height of class: .mk-video-container to 445px. So it should look like this:

    .mk-video-container {

        min-height: 445px;

    }

    Then I see that few divs have bottom padding which when they all add together gives that empty space.

    For example:

    If could also try to put some fixed height for iFrame instead of percentage. For example 300px or similar. Also, please check your mk-video container if it has some paddings or margins that cause this space.

    We'll wait for your response.

    Thank you!

  • Profile Image

    Answered by   on September 17, 2016 at 08:13 AM

    Hi Nick, I've done what you've suggested, but 1. it doesnot remove the space and 2. it starts to cutting off the content, so I've brought everything back as the site is live.  As I mentioned earlier, when the form embeded with this [jotform id="62581015954861"] everything is good (no added space, no cutoff content), except jumping. Would it be possible to add something to this snippet, so the form stops jumping? 

    Thank you for your help!

  • Profile Image
    JotForm Support

    Answered by BDAVID on September 17, 2016 at 12:50 PM

    I think that will not be possible. But I have already asked our back-end team, you will be updated via this thread if it's possible.

    In the mean time, I looks like you could stay with the Iframe(extra space issue) or plugin method(jumping issue).