How can I add space on the bottom of my form when fully collapsed

  • Sandy563
    Asked on June 22, 2018 at 11:34 AM

    Please see screen shot. How can I add more "green" to the bottom?


    Jotform Thread 1506328 Screenshot
  • BJoanna
    Replied on June 22, 2018 at 11:53 AM

    Please add the following CSS code to your form:

    ul.form-section.page-section {

        padding-bottom: 20px;

    }

    How to Inject Custom CSS Codes

    Result:

    1529682544padding Screenshot 10

    Here is my demo form - https://form.jotform.com/81724257551963 

    Feel free to test it and clone it

  • Sandy563
    Replied on June 22, 2018 at 2:29 PM

    BJoanna - Thank you!! The green looks perfect.

    I have one more question. When I embed the form on my site, I cannot see the blue on the bottom of the form (the background). Is there anything I can do on the Jot Form side or does it have to do with my website?

    1529692174Donationformpage2 Screenshot 10

  • aubreybourke
    Replied on June 22, 2018 at 3:07 PM

    Try adding this CSS to what you already have:

    .form-all{

        margin-bottom: 50px;

    }

    How-to-Inject-Custom-CSS-Codes


  • Sandy563
    Replied on June 22, 2018 at 3:43 PM

    I'm sorry - Adding the code above did not work to show the blue on the bottom. Any other ideas?

  • luisvcsilva
    Replied on June 22, 2018 at 4:14 PM

    Try to use the IFrame code when embedding your form, but change the height value to a larger one, so the part that contains the blue stripe of your form doesn't get chopped off. Alternatively you can activate scrolling, and let the user scroll down your form within the frame region. The image below shows where you should edit the IFrame code:

    1529698321hereAndHere Screenshot 10


    Let us know if this code solved the issue,

    Thanks.

  • Sandy563
    Replied on June 22, 2018 at 4:45 PM

    Thank you luisvcsilva -- Activating the scrolling allows me to see the blue line on the bottom. So technically it did work, but I really don't want to use the scrolling because there is no real need for it.

    I'm still hoping for another solution....

  • luisvcsilva
    Replied on June 22, 2018 at 4:54 PM

    You can also increase the height of the frame (first arrow in the image of my last post). Could you provide us the URL of the webpage that you're embedding the form so we can further investigate the issue?


    Thanks.