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

    CSS for Collapsed field help

    Asked by Mrkay on November 15, 2013 at 06:14 AM

    I've been using some CSS on my form (Mainly copy and pasting from other forms as I am a CSS novice) but there are a few things I can't do. Could you please assist.

     

    How can I remove the white bounding box from around the collapsed field?

    Can I reduce the height of the collapsed field and ensure the collapsed arrow moves with the current text?

    Can I decrease the space between the Postcode box and the Manual Address Entry collapsed field so it is similar to the distance the rest of the fields are at?

    I'd also like to match the font and font size of the other fields? If we can adjust the size of the collapsed arrow icon as well.

     

    Thanks

    Page URL:
    http://form.jotformpro.com/form/33163012738953?

    size height font size font
  • Profile Image
    JotForm Support

    Answered by jonathan on November 15, 2013 at 07:39 AM

    Hi,

    Please try adding this CSS codes to existing on your form 

     

    #collapse_25{border:none;

    margin-top: -10px;

    height:30px !important;

    font-size:8px;

    padding-bottom:40px;

    }

     

    I tried this on a test form http://form.jotform.me/form/33183517860456? check if this works for you.

    Inform us if you need help.

    Thanks.

  • Profile Image

    Answered by Mrkay on November 15, 2013 at 07:43 AM

    Thanks that seems to work, however I think I may have some conflicting CSS now. Could you take a look for me?

    And also can the Submit button be moved higher up now?

     

    This is my complete CSS at the moment:

     

    .form-collapse-table{background:none #3A3935 !important;}

    .form-collapse-table{height:40px !important;} // Reduce the height of the collapse field.form-section-closed {height:40px !important;} // Reduce the height of the collapse while closed#collapse-text_25 {margin-top:6px;} // To bring the text in the middle.form-collapse-table{text-shadow:none;}.form-collapse-table {background-image:none;background-color:black;border-color: #3A3935;}.form-collapse-mid {text-shadow:none;}.form-collapse-table:hover {box-shadow:none;text-shadow:none;background: #114CDF;}a {color: #FE0000}.form-line {padding-left: 20px;}.form-all {padding-top: 0;}.form-html {max-width: 530px;width: 530px;margin-left: 40px;}

    #collapse_25{border:none;margin-top: -10px;height:30px !important;font-size:8px;padding-bottom:40px;}

  • Profile Image
    JotForm Support

    Answered by jonathan on November 15, 2013 at 08:59 AM

    Hi,

    I have reduced the injected CSS in my test form

    to this

     

    .form-collapse-table{background:none #3A3935 !important;}

    // To bring the text in the middle

    .form-collapse-table{text-shadow:none;}

    .form-collapse-table {background-image:none;background-color:black;border-color: #3A3935;}

    .form-collapse-mid {text-shadow:none;}

    .form-collapse-table:hover {box-shadow:none;text-shadow:none;background: #114CDF;}a {color: #FE0000}

    .form-line {padding-left: 20px;}

    .form-all {padding-top: 0;}

    .form-html {max-width: 530px;width: 530px;margin-left: 40px;}

    .form-collapse-mid {

    margin: 10px 45px 10px 20px;

    }

     

    Tell us if this works for you already. 

    Don't hesitate to inform if there is more we can help you with.

     

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on November 15, 2013 at 08:59 AM

    Sorry, this was the test form http://form.jotform.me/form/33183517860456?

    Thanks.