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

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.

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.

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.

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

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

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.

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.

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:

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

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.