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

    Modifying the color and look of a checklist (not widget)

    Asked by montsho on August 10, 2015 at 03:50 AM

    Hey there amazing Jotform support! I promise I searched high and low and could not find the answer to this question.

    I want my form check boxes to all LOOK THE SAME. It's my understanding I CAN NOT change the look of a checklist widget with CSS. I'm trying to change the default checklist (not a widget) so that the actual check box is a white square box. I was able to change the box to a flat box with the designer BUT the box in the designer is rounded and grey. Can I change the box to white and completely square? If so, how? I could not figure out the CSS.

     

    Screenshot
    check find color modify color checklist
  • Profile Image

    Answered by Sammy on August 10, 2015 at 07:43 AM

    I have tried accessing the form but it seems you have deleted it, please let us know if you still need some help with the check-boxes.

    Meanwhile you can review this resource regarding styling of check-boxes using CSS

    http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

     

  • Profile Image

    (Private)

    Answered by montsho on August 10, 2015 at 10:30 AM

    Hey! My form is NOT deleted. Not sure why that's what you saw. Here's the link:

    http://form.jotformpro.com/form/52197968569983

     

    I'm attaching an image of what I would like the checkboxes to look like. (#5)

     

  • Profile Image

    Answered by montsho on August 10, 2015 at 10:33 AM

    I'm not sure what is going on with the forum. I have to post 2 and three times bc it's not taking my posts on the 1st time. It's also marking my replies as private and they ARE NOT MEANT TO BE PRIVATE. AND the image uploader is not working. I tried it several times, in different browsers and rebooted my computer. See screenshot.

  • Profile Image

    (Private)

    Answered by Sammy on August 10, 2015 at 12:56 PM

    I'm able to access the form now, kindly paste the code in this pastiebin site

    http://pastiebin.com/55c8d5d085e4a

    Unfortunately for the coupon input it is contained in an iframe which does not allow direct modification using custom CSS code so that portion will remain with the default look.

    By default when posting a thread to an already private thread it will be marked as private since the main thread is already set to private, this option is available when you are creating a new thread

    A private thread is viewable only by the poster and the support team

  • Profile Image

    Answered by montsho on August 10, 2015 at 01:03 PM

    And again the forum form is NOT working. This is what I see when I try to respond to your replies. There is nothing that says make my ANSWER private. It just says post answer. But my responses are being posted private. All I can figure is that since I COULD NOT UPLOAD MY IMAGE BC YOUR IMAGE UPLOADER IS NOT WORKING, your form made my answer private bc my image is "private" on Facebook.

    I'm going to attach the image separately bc the IMAGE UPLOADER IS STILL NOT WORKING. UUUUUUuuuuggghhh...Cmon Jotform.

  • Profile Image

    Answered by montsho on August 10, 2015 at 01:05 PM

    This is what I see when I post an answer:

  • Profile Image

    Answered by montsho on August 10, 2015 at 01:07 PM

    Now on to my question. PASTE WHAT CODE? 

     

    MY QUESTION AGAIN:

    I want my form check boxes to all LOOK THE SAME. It's my understanding I CAN NOT change the look of a checklist widget with CSS. I'm trying to change the default checklist (not a widget) so that the actual check box is a white square box. I was able to change the box to a flat box with the designer BUT the box in the designer is rounded and grey. Can I change the box to white and completely square? If so, how? I could not figure out the CSS.

     

    I am asking about the DEFAULT CHECKLIST TOOL.

  • Profile Image

    Answered by montsho on August 10, 2015 at 01:18 PM

    Also, my original post was not marked private.

  • Profile Image
    JotForm Support

    Answered by Welvin on August 10, 2015 at 02:43 PM

    Inject the following custom CSS codes to your form:

    .form-checkbox-item:not(#foo) label:before {

        border: 2px solid #F8F9FF !important;

        border-radius: 0px !important;

    }

    #coupon-container {

    border-radius: 0px !important;

    border: 1px solid #fff !important;

    }

    #coupon-input {

    background-color: transparent !important;

        color: #fff !important;

        padding: 2px !important;

        border: 1px solid #fff  !important;

    }

    #coupon-button {

    background-color: #ebc52a !important;

        border: 1px solid #ebc52a !important;

        color: #fff !important;

        padding-bottom: 2px !important;

        padding-top: 2px !important;

    }

    The style output should be like this: http://www.jotformpro.com/form/52215956290962 (Cloned version of your form).

    Here's how to add: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. Please add the codes at the bottom part.

    Thanks

  • Profile Image

    Answered by montsho on August 10, 2015 at 04:26 PM

    AND BOOM! Worked like a charm. #happydance

    So appreciate your amazing commitment to customer service JOTFORM TEAM.

    Not to be unappreciative but can you guys fix the image uploader issue please??? I use this forum and it's a life saver. I want others to be able to see my questions answered so they can get the same help if needed.