How can I remove the padding around the embedded form?

  • scottcovert
    Asked on February 24, 2017 at 3:35 AM

     

    I want the grey area gone (I know I could change the color to white, but whatever color, I want all that extra padding at the top gone, so that the form is closer to the video above it.

    Jotform Thread 1075071 Screenshot
  • BJoanna
    Replied on February 24, 2017 at 6:01 AM

    That is the background color of your form.

    You can change it inside of Form Designer > Color Scheme tab. Currently background color is #f5f5f5. If you want to change it to white then change #f5f5f5 to #ffffff.

    How can I remove the padding around the embedded form? Image 1 Screenshot 20

    Here is my cloned form with white background: https://form.jotform.com/70543070985964 

    Feel free to clone it.

    If you also want to remove the shadow around the form add this CSS code to your form:

    .supernova .form-all {

        border:none;

        box-shadow: none;

    }

    How to Inject Custom CSS Codes

    Hope this will help. Let us know if you need further assistance. 

  • scottcovert
    Replied on February 24, 2017 at 3:18 PM

    As stated in my original question, I know how to change the color. I just don't want the big space between the video and the form.

    How can I get rid of most of that blank space at the top of the form?

    I left it gray to show the area I am talking about. Changing the color is not the problem.

  • Support_Management Jotform Support
    Replied on February 24, 2017 at 5:00 PM

    I just don't want the big space between the video and the form.

    The page you linked https://weeklyoptions.coach/c1 doesn't show the video anymore but I think I see what you mean:

    How can I remove the padding around the embedded form? Image 1 Screenshot 20

    To remove that gap, inject the following CSS codes:

    .jotform-form {

      padding: 0;

    }

    (NOTE: If it doesn't work, append the !important tag)

    .jotform-form {

      padding: 0 !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes