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 excess padding from embedded form

    Asked by SomethingHappened on October 01, 2016 at 04:29 PM

    I've created a form and have it embedded on my privately-hosted WordPress site and I'm having a tricky issue with some excess padding.

    To embed the form I am using:

    <script src="https://form.jotform.com/jsform/62691157993166" type="text/javascript"></script>

    The CSS I'm already using in the form's CSS designer is this:

    form.jotform-form{ padding: 0; } div.form-all{ width: 100%; }

    And that takes care of most of the padding issues, width, border, etc, etc and it looks 95% like what I want, but there's still some excess padding on all four sides of the form that I'd like to eliminate.

    My form is currently at: https://somethinghappened.tech/contact-test/ and if you compare it to another page on my site, say the services page here: https://somethinghappened.tech/services/ you will notice the difference in padding.

    Any ideas?  Thanks.

    Page URL:
    https://somethinghappened.tech/contact-test/

    JotForm jsform site compare
  • Profile Image
    JotForm Support

    Answered by Mike_G on October 01, 2016 at 11:35 PM

    I have checked both your "contact-test" and "services" page and have not found any forms in it. I believe you're working with it and you removed it temporarily. Please let us know once the forms are back so we will be able to make some tests and apply the necessary solution to your issue.

    By the way, can you try using the iframe code of your form instead of the normal embed script when you embed your form to your website?

    We will wait for your response. Thank you.

  • Profile Image

    Answered by SomethingHappened on October 02, 2016 at 01:08 PM

    Ah, sorry the test page was unpublished, it's there now.

    And there is no form on the services page, I'm just providing that as an example so you can compare where and how the text aligns to demonstrate the issue of the extra padding.

     

  • Profile Image

    Answered by SomethingHappened on October 02, 2016 at 01:12 PM

    I just tested using the iframe and the positioning and sizing is the same.

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 02, 2016 at 05:02 PM

    I'm not sure how would you like your form in your website to look exactly, but the padding that you're noticing are part of each field

    which can be removed by adding the CSS codes below to your form.

    .form-line {

        padding: 0px !important;

    }

    Or, if you only want the excess spaces around the form to be removed, you can try to add the following codes below instead.

    li#id_3 {

        padding-top: 0px !important;

    }

    li#id_11 {

        padding-bottom: 0px !important;

        padding-top: 0px !important;

    }

    .form-line {

        padding-left: 0px !important;

        padding-right: 0px !important;

    }

    If, in any case, I have misunderstood your requirements, please feel free to let us know and give us more details.

    Thank you.