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 do I remove all of the spacing around the form? Tried everything.

    Asked by hmansfield 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.

    Page URL:
    http://homebasedstartup.com/

  • Profile Image
    JotForm Support

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

    Answered by hmansfield 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.