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

    Centering checkboxes and form collapse

    Asked by Swilliams987 on September 16, 2012 at 11:40 PM

    Hello,

    I managed to center the headings, but am still having difficulty centering the text in the form collapses and the checkboxes. Can you please provide me with a solution?

    Thanks!

    Page URL:
    http://form.jotform.us/form/22561197503149

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Rodjit on September 17, 2012 at 12:09 AM

    Hi Swilliams987,

    For the form collapse tool, you'll need this codes and inject them to your form:

    .form-collapse-mid {

    text-align: center !important;

    width: 100%;

    }

    For the checkboxes, you have to get it's ID by right clicking the field in the form builder and then apply the CSS codes. Example for the terms and agreement checkbox field.

    #id_20 {

    text-align: center !important;

    width: 100%;

    }

    Hope this helps you.

     

    Rodjit

  • Profile Image

    Answered by Swilliams987 on September 17, 2012 at 12:11 PM

    Thanks! The form collapse worked. For the checkboxes, technically it worked because the checkboxes were moved the the center but I guess I needed the checkboxes, the text, and the images on each line centered.

    And, how would this work for radio buttons too?

    Thanks again!

  • Profile Image

    Answered by pinoytech on September 17, 2012 at 12:25 PM

    Use this codes to inject and inject into your form:

    #id_20, #id_110, #id_137 {

    text-align: center !important;

    }

    .form-captcha {

    margin: auto;

    }

    If you need further assistance, feel free to contact us at anytime.

    Have a good day!

  • Profile Image

    Answered by Swilliams987 on September 17, 2012 at 05:54 PM

    Unfortunately, not only was I not able to get it to work, more problems were created. My images were lost and the formatting is way off- now I'm having to make fields smaller to fit for some reason- and some of my labels are smaller than others.

  • Profile Image
    JotForm Support

    Answered by jonathan on September 17, 2012 at 08:53 PM

    @Swilliams987

    Is this how you wanted it..

    I tested it on this cloned form of yours http://www.jotform.me/form/22607564445456

    This are the CSS code I used

     

    #id_110 {text-align: center !important;width: 100%;}

    #id_133 {text-align: center !important;width: 100%;}

    #id_137 {text-align: center !important;width: 100%;}

    .form-captcha {margin:auto}

     

    Please inform us if you have further inquiry.

    Thanks.