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

    Can I edit the style of form collapse headings?

    Asked by vitmel on April 27, 2011 at 05:43 AM

    I would like to change background in the "Heading" or "Form Collapse"

    heading form collapse style CSS
  • Profile Image
    JotForm Support

    Answered by NeilVicente on April 27, 2011 at 06:49 AM

    Hi,

    For Form Collapses, modify and inject this CSS code:

    .form-collapse-table {
    background-color: #F5F5F5
    }

    Replace #F5F5F5 with any HTML Color Codes or HTML Color Names you prefer. To learn how to inject custom css, refer to this user guide.
    For your heading, use this css code:
    .form-header-group {
        background-color: #F5F5F5;
    }

    Again replace #F5F5F5 with any color you'd like. Hope you find this helpful. Let us know if you have other questions.
    Neil

  • Profile Image
    JotForm Support

    Answered by abajan on April 27, 2011 at 07:16 AM

    The thing is, the default background of form collapse fields contains an image (soft-grad.png which is a 9 pixels wide by 96 pixels high) which will need to be overidden with the following injected CSS:

    .form-collapse-table {
    background-image:url('url_of_your_image_of_similar_dimensions');
    }

    Here is an example. Feel free to clone the form, so you can see how the code was used in the Preferences. Changing the collapse arrow would be a bit trickier but I'm sure that can be done as well.

  • Profile Image

    Answered by jasonklass on August 08, 2011 at 06:35 PM

    So does this mean we have to recreate the image to change the color of the collapsed form?

  • Profile Image
    JotForm Support

    Answered by NeilVicente on August 08, 2011 at 07:26 PM

    @jasonklass

    No, you don't have to do that. Pardon my original response to this thread. I guess I hastily gave a solution without extensive testing.

    Anyway, here is an updated version of the code I posted:

    .form-collapse-table {
        background-image:none;
        background-color:red;
    }

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

     

    Replace red with any color that will suit your requirement. You may add color: black; inside the .form-collapse-mid selector to change the color of the form collapse text.

    We hope you find the discussion in this thread informative. Feel free to ask any questions you have relating to this issue or to Jotform in general.


    Neil

  • Profile Image
    JotForm Support

    Answered by abajan on August 08, 2011 at 07:43 PM

    Just to add my two cents' worth: For the first rule above you could use the shorthand background property. Thus:

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

    As to styling that pesky arrow, the quest continues! :)


    ~ Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on August 08, 2011 at 09:22 PM

    Actually, it appears that I too was hasty in my first reply and had I investigated the arrow issue a bit more, I would have been able to reveal that "it" is actually two (2) arrows. Here are their URLs:

    http://cdn.jotfor.ms/3.0.4142/images/arrow-closed.png
    http://cdn.jotfor.ms/3.0.4142/images/arrow-open.png

    Here are the rules targetting them in the main JotForm stylesheet:

    .form-collapse-right-hide {
    background:url(/3.0.4019/images/arrow-closed.png) no-repeat center;
    }

    .form-collapse-right-show {
    background:url(/3.0.4019/images/arrow-open.png) no-repeat center;
    }

    So, you would need to inject the following rules and replace the highlighted URLs with those to images of your own arrows:

    .form-collapse-right-hide {
    background-image:url(/3.0.4019/images/arrow-closed.png);
    }

    .form-collapse-right-show {
    background-image:url(/3.0.4019/images/arrow-open.png);
    }

    It ought to work but I haven't tried it as yet. When I do, I'll provide the link here to the form with collapse fields containing arrows of a different color. (Knock wood!)


    ~ Wayne

    UPDATE: It worked! Check the arrows in the form at the link now. (In error, I originally had just background instead of background-image in the declarations of both rules.)

    The thing is you have to have an application that can edit or create images with alpha transparency (I used trusty old GIMP). Otherwise you'll end up ugly looking arrows. Also, if the intention is to use the secure version of the form and you don't wish users to see messages like "This page has secure and non-secure items etc." I think you will have to use a solution similar to what is suggested by Aytekin in this thread.

  • Profile Image

    Answered by Mary on August 02, 2012 at 10:38 PM

    I am trying to get the collapse form to match the other buttons on my site. They are a dark green with a darker shadow as it goes down the button is there anyway that this can be recreated in the collapse form? Your response is greatly appreciated. The website is betterlawngarden.com the home page is where the form will go, so I want the collapse to match the two buttons there

  • Profile Image

    Answered by Mary on August 02, 2012 at 10:58 PM

    I figured it out using what abajan had said earlier about the image... i didn't know that the button i was using was actually an image but with some investigating and the use of the paint program I was able to figure it out... i would like to remove the white outline around the collapse form though any suggestions?

  • Profile Image
    JotForm Support

    Answered by idarktech on August 02, 2012 at 11:25 PM

    Hi Mary,

    Glad to hear you were able to figure it out. To remove the collapse white shadow, please add this css code to your existing css.

    .form-collapse-table {

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    }

    Feel free to open a new thread if you have any other questions. Thanks!

  • Profile Image

    Answered by NALIAForms on February 16, 2015 at 04:58 PM

    Is it possible to turn the collapse heading into a black underline and black arrow (medium size) only.

    I am trying to achieve a more minimalistic look. I dont like the box 

  • Profile Image

    Answered by Shadae on February 16, 2015 at 06:08 PM

    Hi NALIAForms,

    As this is an old thread, I have moved your post to a new thread: http://www.jotform.com/answers/517149 

    Your inquiry will be addressed there.

    Thank you.