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

The issue is that the Iframe code that I use stretch the box where the form is embedded.

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" onDISABLEDload="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.

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:

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.

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)

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!

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

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.

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.

 

 

 

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.

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

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.

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

 

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" onDISABLEDload="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!

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.

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!

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).