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 coding for multiple checkboxes

    Asked by MelissaH on February 11, 2014 at 06:55 PM

    I want to be able to export multiple selections under one question into individual cells in excel 2010. In order to do that I understand I have to create seperate check boxes with no label. That creates a formatting issue. Below is my source code. I know basic css and html but can't figure this out or find any other resource on teh web to help me. Anyone know how to code the CSS on this form to line up the check boxes to look like they are under teh same question? The from link is http://form.jotformpro.com/form/40246329693964

    Thank you in advance.

     

    <li class="form-line" id="id_11">
              <label class="form-label-top" id="label_11" for="input_11"Which types of fitness activities/Club services interest you? </label>
              <div id="cid_11" class="form-input-wide">
                <div class="form-multiple-column"><span class="form-checkbox-item"><input type="checkbox" class="form-checkbox" id="input_11_0" name="q11_whichTypes11[]" value="Personal Training" />
                    <label for="input_11_0"Personal Training </label></span><span class="clearfix"></span>
                </div>
              </div>
            </li>
            <li class="form-line form-line-column" id="id_24">
              <label class="form-label-top" id="label_24" for="input_24">  </label>
              <div id="cid_24" class="form-input-wide">
                <div class="form-single-column"><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_24_0" name="q24_input24[]" value="Pilates" />
                    <label for="input_24_0"Pilates </label></span><span class="clearfix"></span>
                </div>
              </div>
            </li>
            <li class="form-line form-line-column" id="id_25">
              <label class="form-label-top" id="label_25" for="input_25">  </label>
              <div id="cid_25" class="form-input-wide">
                <div class="form-single-column"><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_25_0" name="q25_input25[]" value="Swimming" />
                    <label for="input_25_0"Swimming </label></span><span class="clearfix"></span>
                </div>
              </div>
            </li>

    Page URL:
    http://form.jotformpro.com/form/40246329693964

    Screenshot
    checkboxes checkbox style size source excel
  • Profile Image

    Answered by Carina on February 11, 2014 at 08:22 PM

    Please insert the following css code:

    #id_24, #id_25, #id_26, #id_27, #id_28, #id_29, #id_30, #id_31, #id_32, #id_33, #id_34, #id_35, #id_36, #id_37, #id_38, #id_39, #id_40

    {

    padding-top:1px;

    padding-bottom:1px;

    padding-left:36px;

    padding-right:6px;

    margin:2px 0;

    width: 145px;

    }

    It still has some space between the options but this way they get aligned. As a suggestion I would make personal training a separated option, not indexed to the question, as this creates a visual separation from the rest of the options.

    Kindly let us know if you need more assistance.

     

  • Profile Image

    Answered by MelissaH on February 12, 2014 at 11:50 AM
    THANK YOU!!

    ...