How can I remove the top padding of the form?

  • LicenceTT
    Asked on June 1, 2016 at 8:31 AM

    When inserting the form (with a black background) on my website (white background), I observed that there is a top padding in a slightly darker color than white, which is really annoying. Is there any possibility or workaround to get rid of this padding?

    Thanks in advance,

    Rob 

  • Charlie
    Replied on June 1, 2016 at 9:41 AM

    Can you share us the website link where you have embedded the form? That will help us inspect fully and have a working CSS code for you.

    We'll wait for your response.

  • LicenceTT
    Replied on June 2, 2016 at 5:02 AM

    Dear Charlie,

     
    My website is currently offline so I can not provide you a link. However, I attached a screenshot of the issue. Its just that the top margin of the form is not in the background color of the rest of the form.
     
    How can I remove the top padding of the form? Image 1 Screenshot 20
  • Ashwin JotForm Support
    Replied on June 2, 2016 at 5:20 AM

    Hello,

    To solve your problem and provide you custom css code, we will need to see your webpage URL where you have embedded your form. Only then we will be able to give you correct css code.

    If you cannot share the webpage URL, we can still try and solve this. Please inject the following custom css code in form and see if that solves your problem:

    .form-all {

        margin-top: -50px !important;

    }

    You can increase/decrease the value of margin-top based on how your embedded form appears in webpage. The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • LicenceTT
    Replied on June 2, 2016 at 5:31 AM

    Hey,

    I tried this code but this only shifts the white space down. While debugging I tried to set the padding to zero, which removes the white area on top of the form, but leaves a small (about 10px) white area on the bottom of the form.

    .jotform-form {
    padding: 0px 0px;
    }
     
     
    user agent stylesheet

     

  • LicenceTT
    Replied on June 2, 2016 at 5:32 AM

    When I leave the padding to 60px 0px, and disable this style line, all white area is gone. How do I disable this line in the form?

  • Chriistian Jotform Support
    Replied on June 2, 2016 at 6:45 AM

    Can you please try to inject this following CSS code in your form to remove the top padding in your form?

    .jotform-form {

        padding-top: 0px !important;

    }

  • LicenceTT
    Replied on June 2, 2016 at 7:00 AM

    Thanks christian,

     

    This worked. I also had to include bottom padding of course.

     

    Is there also a way to get the submit button more responsive, like a mouseover effect?

  • Chriistian Jotform Support
    Replied on June 2, 2016 at 7:13 AM

    You can try to add this custom CSS code in your form to change the color of the submit button upon hover.

    .form-submit-button:hover {

        background: grey; 

    }

    You can change the value grey to any color that you like.

  • LicenceTT
    Replied on June 2, 2016 at 7:18 AM

    T

    hanks, also any ideas how to delete the shadow of the button and the shadow on the text inside the button? It looks rather silly when the color is changed so. Thanks in advance, this really helps a lot!
  • Ashwin JotForm Support
    Replied on June 2, 2016 at 8:54 AM

    Hello,

    I have moved your question to a new thread and you will be answered here:  https://www.jotform.com/answers/852030 

    Thank you!