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

    Form Designer Tool: "Other" checkbox when "Allow Other" is enabled does not match the styling of the other regular check boxes

    Asked by Beeri on March 09, 2016 at 05:38 AM

    I want to make my Other checkboxes where users can input text to match the regular, larger checkboxes above them. How can I do this?

     

    checkbox checkboxes other other checkboxes input buttons
  • Profile Image
    JotForm Support

    Answered by Jan on March 09, 2016 at 07:13 AM

    You will need to apply custom CSS in order to align and match the "other" checkboxes to the regular options.

    Please try injecting this custom CSS and check if this will work for you.

    .form-checkbox-other {
    vertical-align: middle;
    margin-right: 1px !important;
    margin-left: 4px !important;
    margin-top: 0px !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    left: 4px;
    width: 18px;
    height: 18px;
    background-color: transparent;
    border: 2px solid #828282;
    }

    Here's a guide on how to inject custom CSS. Here's how it looks like: 

    Hope this helps. Thank you.

  • Profile Image

    Answered by Beeri on March 09, 2016 at 07:51 AM

    Hi Jan, 

    THanks for responding. Unfortunately the code doesn't do what I am looking for. As you can see, your other box is not identical to the regular boxes. I want the box to have the same black outline, and have a white background. The checkmarks on the normal boxes is a small green checkmark graphic, while the other box turns blue with a small white checkmark

  • Profile Image
    JotForm Support

    Answered by Charlie on March 09, 2016 at 09:36 AM

    It looks like it's a bug on the check box/radio button themes that we have, it should actually get the same styling for the "Other" check box. Let me forward this to our developers to have it checked and fixed. Apologies for the inconvenience.

    I'll try to come up with a working CSS code as an alternative, I'll get back to you as soon as I'm able to work it out.

  • Profile Image
    JotForm Support

    Answered by Charlie on March 10, 2016 at 09:27 AM

    Hi,

    So I managed to find the working CSS code as an alternative while this is still being fixed.

    .form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other::before {

        background-color : transparent !important;

        border : 2px solid #828282 !important;

        content : '' !important;

        position : absolute !important;

        display : inline-block !important;

        vertical-align : baseline!important ;

        margin-right : 4px !important;

        -moz-box-sizing : border-box !important;

        -webkit-box-sizing : border-box !important;

        box-sizing : border-box !important;

        -webkit-border-radius : 2px !important;

        -moz-border-radius : 2px !important;

        border-radius : 2px !important;

        left : 4px !important;

        top: 2px !important;

        width : 18px !important;

        height : 18px !important;

        cursor : pointer !important;

    }

     

    .form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other {

       cursor: pointer;

      -webkit-appearance: none !important;

      -moz-appearance: none !important;

      appearance: none !important;

      outline: 0 !important;

    }

     

    .form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other:checked::after {

        opacity : 1 !important;

        background-color : #008000 !important;

        box-shadow : 0 3px 0 0 #008000, 3px 3px 0 0 #008000, 6px 3px 0 0 #008000, 9px 3px 0 0 #008000, -23px 6px 0 0 rgba(255, 255, 255, 0.68), 10px 1px 0 0 rgba(255, 255, 255, 0.68);

        transform : rotate(-45deg) !important;

        content : '' !important;

        position : absolute !important;

        z-index : 10 !important;

        display : inline-block !important;

        top : 7px !important;

        left : 10px !important;

        width : 4px !important;

        height : 4px !important;

    }

    You can paste it under your CSS tab in your Form Designer Tool. However, make sure that you don't have other CSS code conflicting with it. Here's my cloned form using that code: https://form.jotform.com/60693632275965. You can clone it to have a copy of it in your account and review how I setup my CSS there. Here's a guide on how to clone my form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Let us know if that works as a temporary workaround.