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 can I align the label of a Checkbox with the actual box?

    Asked by xe7en on February 28, 2017 at 05:50 AM

    Hi,

     

    how to move the text at radio button to the same "start" (see below)?

    My form is a responsive form - I am using "Responsive Mobile Widget".

     

    I have try to use this:

    .form-radio-item label, .form-checkbox-item label {

    display: block !important;

    margin-left: 19px;

    margin-top: -17px;

    }

     

    but it doesnt work for me.

     

     

    Page URL:
    humilife.de

  • Profile Image
    JotForm Support

    Answered by Jim_R on February 28, 2017 at 07:19 AM

    I'm quite confused with your current setup. Your form has 2 Checkboxes:

    1. First checkbox has 1 option:

    ja, ich verfüge über ein Haus mit kontrollierter Wohnraumlüftung

    2. Second checkbox has 2 options:

    ja, bitte senden Sie mir die Informationsbroschüre zur Diffusionsluftbefeuchtung zu.

    ja, ich habe Interesse an einer unverbindliche Vorreservierung. <br /><div>Bitte senden Sie mir einen Rabattgutschein in Höhe von <b>100,00 Euro</b> zu. </div>

    Notice that you have 2 options and a 3rd one that doesn't have a checkbox. This was because, instead of pressing enter, you manually typed in <br /> and enclosed the 4th option inside a <div></div>

    Since we don't know yet whether you want to have 1 + 2 checkboxes or 1 + 3 in total, I'll just assume that it's 1 + 3 since that makes more sense (meaning 1 Checkbox, then 3 more below it BUT without those HTML tags).

    Seeing that you have heavily customized your form with CSS, just inject these at the end of your entire code:

    @media only screen 

      and (min-device-width: 320px) 

      and (max-device-width: 480px)

      and (-webkit-min-device-pixel-ratio: 2)

      and (orientation: portrait) {

      .form-checkbox-item label {

        display: flex;

        margin-left: 35px !important;

      }

    }

    RESULT:

    In case we misunderstood your question, just get back to us with a bit more info and a clearer description of what you're trying to do so we can better assist you.