Remove bottom Iframe padding on the Form?

  • Profile Image
    brewerben
    Asked on March 23, 2016 at 02:38 PM

    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?

  • Profile Image
    jonathan
    Answered on March 23, 2016 at 03:13 PM

    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.

  • Profile Image
    brewerben
    Answered on March 23, 2016 at 03:20 PM

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

  • Profile Image
    jonathan
    Answered on March 23, 2016 at 03:45 PM

    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"

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

     

     

     

  • Profile Image
    brewerben
    Answered on March 23, 2016 at 03:57 PM

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

  • Profile Image
    jonathan
    Answered on March 23, 2016 at 04:09 PM

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

       <iframe

          id="JotFormIFrame"

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

  • Profile Image
    jonathan
    Answered on March 23, 2016 at 04:13 PM

    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.

  • Profile Image
    brewerben
    Answered on March 23, 2016 at 04:39 PM

    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.

  • Profile Image
    jonathan
    Answered on March 23, 2016 at 04:48 PM

    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