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

    Remove bottom Iframe padding on the Form?

    Asked by brewerben 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?

    Page URL:
    northtexas.ag

    Screenshot
    adjust padding
  • Profile Image
    JotForm Support

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

    Answered by brewerben 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
    JotForm Support

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

    Answered by brewerben 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
    JotForm Support

    Answered by jonathan 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
    JotForm Support

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

    Answered by brewerben 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
    JotForm Support

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