How do I remove all of the spacing around the form? Tried everything.

  • Profile Image
    hmansfield
    Asked on February 18, 2013 at 03:15 AM

    I thought this would be a simple form. 2 fields and a submit button. But it's been 2 days now.

    I've read just about every article and I none of the things seem to work.

    Why is there so much wasted space around the form? It makes it impossible to embed in a defined area.

    I've tried everything. Even setting the background to "Transparent" doesn't work. It just shows white....margin:0, padding:0, none of that removes the space.

    It may have something to do with why I have to make the form so wide for the fields and button to fit on one line. If I reduce it just 1px, the submit button is forced to the next line, and yet there is all of that space to the right of the button. At least 250px of extra white space. What is that?

    I've left it exactly where I've given up  so that you can see what I'm talking about.

    Why can't I just have the fields and the button. Why do I need all of that extra spacing around it?  Why do I have to have a background?



    Any help is appreciated.

  • Profile Image
    EltonCris
    Answered on February 18, 2013 at 05:29 AM

    Hi,

    I have made a little changes on your CSS codes to saved some spacing. It's highlighted below.

    .form-line {

    padding:5px;

    margin: 0 0 !important;

    }

    .form-submit-button{

    margin-top:0 !important;

    color:white;

    background:#77838F;

    border-style:outset;

    border-color:#0066A2;

    height:33px;

    width:200px;

    font: Arial bold;

    font-size:18px;

    }

    .form-label-top{

    display:none;

    }

    .form-sub-label {

    display:none;

    }

    .form-all {

    padding-top: 0;

    margin-top: 0;

    }

    ---------------

    Now, please use the following iframe embed code.

    <iframe allowtransparency="true" src="//www.jotform.us/form/30460944077152" frameborder="0" style="width:100%; height:50px;border:none;padding:none;background:transparent !important;" scrolling="no"></iframe>

    I have added a background transparent property since your website's default iframe style has a a white background. I have also adjusted the height.

    Do let us know if you have further questions abou this. Thanks!

  • Profile Image
    hmansfield
    Answered on February 18, 2013 at 10:03 AM

    Ah! It was my theme that was setting the iframe background. I didn't even think to look there. Thank you so much.

    I just embedded the new iframe with your adjustments and it works great!

    Can't tell you how much I appreciate your  help.