Remove excess padding from embedded form

  • Profile Image
    SomethingHappened
    Asked 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.

  • Profile Image
    Mike_G
    Answered 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
    SomethingHappened
    Answered 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
    SomethingHappened
    Answered on October 02, 2016 at 01:12 PM

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

  • Profile Image
    Mike_G
    Answered 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.