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

    How can I get rid of the extra white box around iFrame form?

    Asked by Kiki123 on March 21, 2016 at 08:04 PM

    Hello, I have an additional white box around a form. How can I get rid of this? Form placed in responsive Muse site. Screenshot attached. Help appreciated.

    Page URL:
    http://psychic-janie.businesscatalyst.com/index.html

  • Profile Image

    Answered by victor on March 21, 2016 at 08:51 PM

    To remove the white area of your iframe, you can inject and play with the margin values

    .form-all {

        margin-top:-50px;

        margin-bottom:-50px;

    }

    You may inject this code in the designer under the CSS tab

    Please let us know if this helps.

  • Profile Image

    Answered by Kiki123 on March 22, 2016 at 07:43 AM

    Hi Victor,

    Thanks for your suggestion. I have injected the CSS you supplied and played with the margin value, eventually reducing it to -px with no success. I'm new to JotForm I not sure which option in CSS Helper would help, if any. The white space around the forms varies, depending on whether I make the form Responsive or not. The jpg attached shows the form with a lot of white space underneath. I cannot see the white space when viewing the form in JotForm or when viewing in Muse, it only shows when viewed in a browser (Safari in this case). Grateful for any further suggestions.

  • Profile Image

    Answered by Boris on March 22, 2016 at 09:30 AM

    I see what you mean - there are two forms on that page, and you are having problems with the second form. The reason why this happens is because there are two forms on the same page, but both of them are left with the same ID - JotFormIFrame.

    Both of the forms are trying to set their height to their own size, but as they have the same ID, there is a conflict with setting the height. Both forms will set their height to the same value, according to the last message they receive about the height of one of them.

    In order to rectify this, you would need to change the embed codes of your second form. We only need to change the ID in the second embed code to be different from the first form, so you can replace this:

        <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60614539931357" 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 = 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>

    with this:

        <iframe id="JotFormIFrame2" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60614539931357" 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 = document.getElementById("JotFormIFrame2");
            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("JotFormIFrame2");
            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>

    Please let us know if this resolves the issue you were having.

  • Profile Image

    Answered by Kiki123 on March 22, 2016 at 11:13 AM

    Hi Boris,

    Thank-you for your suggestion. I used the JotFormiFrame2 code but unfortunately the white appear around the form is still appearing. I would mention this form is a clone of a form I did for www.janies-salon.co.uk. This form works perfectly. To use this form for the Psychic site (apart form changing the colour and text) I had to use iFrame code. If the plain Embed or Muse Platform code was used both forms would disappear when the browser window width passed through a breakpoint. I'm wondering if I should start this form form scratch rather than use a clone? Any more ideas appreciated.

    http://psychic-janie.businesscatalyst.com/index.html

  • Profile Image
    JotForm Support

    Answered by david on March 22, 2016 at 11:52 AM

    Adding this code to your form should remove the top and bottom margins:

    .form-all, .supernova{
        margin-top : -30px !important;
        margin-bottom : -40px !important;
    }

    You should then be able to adjust the width of the form to fit the space required.  Here is how the form looked in my test page:

    The extra space at the top and bottom was indeed removed.

  • Profile Image

    Answered by Kiki123 on March 22, 2016 at 02:20 PM

    Hi David,

    Thanks for you advice - alas your suggestion does not work for me! As before, there is white space around the form, particularly at the bottom.  I adjusted the px quality in your code to see if it would make a difference but unfortunately it didn't. I'm beginning to worry I'm doing something wrong when inputting the codes that have been suggested so, but I'm pretty confident I'm doing this correctly. I copy and pasted your code into CSS section in the Designer window. Any more thoughts appreciated.

  • Profile Image
    JotForm Support

    Answered by david on March 22, 2016 at 02:38 PM

    You can also try simply removing the background.  You can do so by adding this code:

    .form-all{
        margin-top : -40px !important;
        margin-bottom : -40px !important;
    }
    .supernova {
        background : none !important;
    }

    That should remove most of the spacing and allow for the white portion to become see transparent.  The background of my test page is set to grey and the white from the form no longer shows when testing:

     

  • Profile Image

    Answered by Kiki123 on March 22, 2016 at 04:14 PM

    Hi David,

    Success! That code has done the trick. I changed the the margin amounts to -px, otherwise the top of the form disappears. Once I did that the form appears just how I want it. Many thanks David and thanks to Boris and Victor for their suggestions too :)

  • Profile Image
    JotForm Support

    Answered by david on March 22, 2016 at 04:20 PM

    Glad to hear it is now working, you are very welcome!  If there is anything else we can assist you with, let us know and we will be happy to help.