Remove bottom Iframe padding on the Form?

Hi I am trying to get rid of this padding on the bottom of my form. I have tried everything that I can think of. Is this a form issue or my site? If form, how do I adjust it?

I checked your embedded form https://www.jotform.us/form/60763888176168   on the website, and I see that it seems to have the appropriate bottom padding and height already.

 

Please let us know if I checked the wrong problem and issue still remains.

Thanks.

Hmm. I just checked on two different browsers and the large gap is still there

I am not sure what was changed, but you are right, when I checked again the website, it now has the more obvious gap.

 

Can you please re-embed the form iframe code using this one:

 

    <iframe

      id="JotFormIFrame"

      onDISABLEDload="window.parent.scrollTo(0,0)"

      allowtransparency="true"

      src="https://form.jotform.com/60763888176168"

      frameborder="0"

      style="width:100%;

      height:493px;

      border:none;"

      scrolling="no">

    </iframe>

    <script type="text/javascript">

      window.handleIFrameMessage = function(e) {

        var args = e.data.split(":");

        var 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 = 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>

 

 

The only thing I modified on the iframe embed code was the height of iframe. I set it to 493px because that seems to be needed lenght to fit the form vertically.

 

Let us know if still not working.

 

 

 

I changed the height. It shows that the height in the form is correct but the iframe is still too tall.

Please try omitting the script part of the iframe embed code. Use only the iframe part like this:

   <iframe

      id="JotFormIFrame"

      onDISABLEDload="window.parent.scrollTo(0,0)"

      allowtransparency="true"

      src="https://form.jotform.com/60763888176168"

      frameborder="0"

      style="width:100%;

      height:493px;

      border:none;"

      scrolling="no">

    </iframe>

 

Let us know how it goes.

Can you tell us also what is the website builder you were using?

I could not determine it exactly by viewing only the soure code of the website page. Perhaps we can determine the source of conflict within the web page editor.

Thanks.

Have you also alread checked using just the default embed code?

 

If not, try the script code version instead of the iframe one instead.

Thanks.

That one worked better. The only reason I was using the iframe was because my site started running slow because of the form and I was told to use the iframe embed. Thanks for your help.

It is possible that script embed can indeed cause conflict with other scripts exsiting on the website where the form was used. For such case, we do suggest the iframe embed method since it properly insulate the form scripts againts other existing script on the page.

But for your website, it seems to work just fine and no script conflict was happening. 

Do let us know if issue arises on further used of the embedded form on the website.

Best