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

    How to have unlabelled check box or radio button.

    Asked by NRCsupport on February 09, 2014 at 02:41 PM

    I would like to have a question with a single check box or radio button with no label to the right of the box or button.

    When I try to do this I encounter two problems.

    1. The box or button is always checked when first displayed, whatever I set using "default selected button" tool. I want it to be unchecked, so that the user can check it to confirm that they've seen the question.

    2. When displayed the blank label isreplaced by "option 1"

    Is there a way to have an unlabelled check box or radio button behave like a labelled one? For example could I have a label, but make it invisible.

    John

    check label confirm selected
  • Profile Image
    JotForm Support

    Answered by jonathan on February 09, 2014 at 04:09 PM

    Hi John

    Use this test form http://form.jotform.me/form/40395768918471? for reference

    1. If you leave the single option checkbox or radio option without any value(options) for selection they will become default selected.

    There should always be an option value for the input field to work. You can hide the option value using injected CSS codes. In my test form this is the CSS code I used to hide the option value of the select input fields (checkbox and radio button)

    .form-checkbox-item label, .form-radio-item label{
    visibility: hidden !important;

    }

     

    2. The filler value becomes "option 1" when the option value is left blank or null. This is related to answer on #1.

    You can test submit the test form. You will see in the Thank You page the value of the select input fields.

    Hope this answers your question. Inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by NRCsupport on February 09, 2014 at 04:53 PM

    Thanks Jonathan.

    If I inject that CSS code, won't it apply to all check boxes and/or radio items.

    I only want to hide the label in the special cases where I have a single box. I also have normal check boxes and radio buttons which do need their labels visible.

    Is there a way of applying injected CSS to individual fields rather than to an entire class?

    Best wishes, John

  • Profile Image
    JotForm Support

    Answered by BDAVID on February 09, 2014 at 05:16 PM

    Hi, in this case you can inspect the form with your browser and get the specific Class or ID of the label that you want to hide. 

     

  • Profile Image

    Answered by NRCsupport on February 09, 2014 at 06:52 PM

    Thanks, I'll try that.

    If I use an ID, will the ID remain unchanged if I makefurther changes to the form?

  • Profile Image
    JotForm Support

    Answered by jonathan on February 09, 2014 at 08:29 PM

    Hi John,

    To use the specific label ID#, you can try CSS code like this

     

    label[for="input_3_0"],label[for="input_4_0"]

    {

    visibility : hidden !important;

    }

    You check this on the test form http://form.jotform.me/form/40395768918471?

    Thanks.

  • Profile Image

    Answered by NRCsupport on February 10, 2014 at 02:33 AM

    Hi Jonathan,

    Thanks that works perfectly.

    If I later add fields into the form above the check box, will the ID get altered, and if so will the rule update automatically to the new ID?

  • Profile Image
    JotForm Support

    Answered by jonathan on February 10, 2014 at 05:01 AM

    Hi John,

    If add another option on top of the existing options of Checkbox or Radio button, the label ID# will point not change. It will still get assigned to the label according to sequence.

    I tested this on the test form http://form.jotform.me/form/40395768918471?

    I inserted another select option on top of the 2 existing options. As you can see on the form now, it was still the 1st label ID#(1st option) that was tag by the CSS code. The orinal select option was push back in the sequence.

    Thanks.

  • Profile Image

    Answered by NRCsupport on February 10, 2014 at 05:10 AM

    Thanks, that is good.