How to remove the empty blank space above and at the bottom of the form.

  • ilanagriffo
    Asked on October 23, 2015 at 11:21 AM
    And when i try to embed it - it has a lot of white space a the top, and the form doesn't seem to be centered under the "contact" - is it possible to change that?
  • beril JotForm UI Developer
    Replied on October 23, 2015 at 11:27 AM

    Hi again,

    Could you try injecting the following CSS code to your JotForm with the margin reduced further to -40px to see if that helps?
    .form-all {
    padding-top: 0;
    margin-top: -40px;
    }

    Here is how to do that:
    1)  Click on Setup & Embed.

    How to remove the empty blank space above and at the bottom of the form Screenshot 50

     

    2) Click on Preferences.

    How to remove the empty blank space above and at the bottom of the form Screenshot 61

     

    3) Click on Form Styles.

    How to remove the empty blank space above and at the bottom of the form Screenshot 72

     

    4) Copy and paste the code above to Inject Custom CSS.

    How to remove the empty blank space above and at the bottom of the form Screenshot 83

    You can also use the following CSS code, as it’s pretty short and concise. This also removes the top spacing of the form.

    .jotform-form {padding:0}

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • ilanagriffo
    Replied on October 23, 2015 at 11:51 AM

    Thanks - that got rid of the space below "contact" but not above...

     

    The "details" is still not the right width, and the whole form seems to be on the right instead of centered on my page :(

    ilanagriffo.com/contact

  • Mike_G JotForm Support
    Replied on October 23, 2015 at 2:43 PM

    I have checked your website where your form is embedded, it seems to be positioned centered on the page. The reason why it looks like it's not is because of the lengthy textbox fields as shown on the image below.

    How to remove the empty blank space above and at the bottom of the form Screenshot 20

    You can add this CSS codes to your form using this guide: How-to-Inject-Custom-CSS-Codes

     

     .form-textbox {

    width: 250px !important;

    }

    .form-textarea{

    max-width: 590px !important;

    width: 592px !important;

    }

    .jotform-form{

    padding: 0px !important;

    }

    Please check this form: https://form.jotform.com/52955121681961

    I hope this helps. Let us know if you will be needing any further assistance. Thank you. 

  • ilanagriffo
    Replied on October 23, 2015 at 2:50 PM

    Thank you - it's perfect now!