What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    I want to update the CSS for the "collapse form"

    Asked by mzelicskovics on August 04, 2011 at 10:44 PM

    I want to remove the white space between each collapsed form. They are labeled as item submissions. Here is the link to the way it looks right now and the attachment is a mockup of how I want it to look.

    http://www.shopfashionablylate.com/submit-an-item-2

    Thank You!

    Page URL:
    http://www.shopfashionablylate.com/submit-an-item-2

    Screenshot
  • Profile Image
    JotForm Support

    Answered by mliz on August 05, 2011 at 05:55 AM

    Hello,

    You can use the following css code to remove the white space in between
    the collapse form.

    To get to the Custom Inject CSS:

    1. Open your form in JotForm
    2. Click on 'Setup &  Embed
    3. Select 'Preferences
    4. Choose 'Form Styles' tab
    5. Add the following code in the  Inject Custom CSS section

    .form-section-closed
    {
    height: 58px;
    }

    Let us know if this works for you. Thanks for using JotForm.


    Best Regards,
    Mliz

  • Profile Image

    Answered by mzelicskovics on August 05, 2011 at 08:34 AM

    Hi Mliz,

    I tried that, but it doesn't seem to work. Here is my custom injected CSS. Maybe I have something in there that is messing it up, I'm not sure. Could you take a look?

    .form-all {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000 !important;
    font-family: Arial;
    font-size: 11px;
    margin: 0 auto;
    padding-top: 0px;
    width: 910px;
    }
    .qq-upload-button {
    background: -moz-linear-gradient(center top , #ec008c 0%, #ec008c 100%) repeat scroll 0 0 transparent;
    border: 1px solid #C64F00;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: block;
    font-size: 14px;
    padding: 8px 0;
    text-align: center;
    text-shadow: 0 -1px #C64F00;
    }
    .form-collapse-mid {
    float: left;
    font-size: 14px;
    margin: 15px 45px 16px 20px;
    text-shadow: 0 2px 0 #FFFFFF;
    }
    .form-collapse-table {
    background: url("/3.0.4140/images/soft-grad.png") repeat-x scroll 0 0 #F5F5F5;
    border: 1px solid #CCCCCC;
    height: 45px;
    position: relative;
    }
    .form-collapse-right {
    height: 45px;
    position: absolute;
    right: 0;
    width: 45px;
    }
    .form-section-closed {
    height: 45px;
    overflow: hidden;
    }

  • Profile Image
    JotForm Support

    Answered by NeilVicente on August 05, 2011 at 12:16 PM

    Hi,

    Please try this css code:

    .form-all ul + ul.form-section-closed[style] {
        height: 47px !important;
        }

    Unfortunately, this will not work with IE 6 and 7 due to browser compatibility issue. Still, I think it's better than nothing ;)


    Neil