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 margin/padding from top of my form

    Asked by yourwebshop on February 08, 2016 at 08:39 AM

    I tried this and it didn't work, i want zero padding or margin on top:

     

    .form-all {

    padding-top: 0;

    margin-top: -10px;

    }

     

    any help would be great.  I'd suggest that being a default, as i need to do this with every form.


    Thanks.

     

    Page URL:
    http://mandilewebdesign.com/yws/v3/contact-your-web-shop.html

    top thanks all and
  • Profile Image
    JotForm Support

    Answered by Charlie on February 08, 2016 at 09:41 AM

    I checked your form directly and I see that this is how it looks like: https://form.jotform.com/60056135502141 

    If you still want to adjust the top spacing of your form, you can use this CSS code:

    .jotform-form {

        padding-top: 0px !important;

    }

    Paste it under your CSS tab in your Form Designer Tool.

    This is how it looks like: https://form.jotform.com/60384032931955 

     

     

    When I checked your website, I see that the form is somehow moved or positioned below the address and phone text.

     

    Is that the large space you are referring to? The space in your website? 

    If you want your website to look like this:

     

    Just adjust the width of your iFrame embed code, change it form 100% to 50% or depending on your own preference. That will align your form on your "Address" and "Phone" texts.

    Here's your iFrame embed code, the width attribute is highlighted in yellow:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60056135502141" frameborder="0" style="width: 50%; height: 531px; border: none;" scrolling="no"> </iframe>

     

    Let us know if any of the solutions above worked for you.

  • Profile Image

    Answered by yourwebshop on February 08, 2016 at 10:09 AM

    Thanks, that is why you guys are the best out there.

  • Profile Image
    JotForm Support

    Answered by Charlie on February 08, 2016 at 10:35 AM

    Thank you for the kind words :)

    I'm not sure which one worked. But if it is regarding the space in your website, I see a flaw on my suggestion about the width setting to 50%. I presume you would like your website to be mobile responsive.

    To resolve the problem, instead of setting the iFrame code's width to 50%, you need to wrap the iFrame embed code on a similar element of your "Address" and "Phone" texts.

    Basically this is how it should look liked:

    <div class="col-sm-4">

      "Address" text

      "Phone" text

    </div>

    <div class="col-sm-6">

      <iframe> JotForm iframe code here</iframe>

    </div>

    We want the iFrame code to be wrapped on the same element that makes your website mobile responsive, not sure how your form works or if you are using a website builder. But based from my understanding, the class col-sm-6 should occupy around 60% of the same row. So you need to wrapped the iframe code using a <div> element with a class col-sm-6.

    I'm not sure if that will help.