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

    Custom CSS: Help with form alignment

    Asked by guest_23028792568059 on December 26, 2012 at 07:41 AM

    Hi

     

    This is the form:

    http://form.jotformeu.com/form/22765115796361

    Is there a way to have the I consent label and radio button on one single line> Currently it is wrapoping the text to the left, I don't want to adjust the width of the other labesl, just this one.

     

    Thanks In Advance

    Merry Christmas

    D

  • Profile Image
    JotForm Support

    Answered by Welvin on December 26, 2012 at 08:33 AM

    Hi,

    First, set the label of the field to TOP and inject this custom CSS codes to your form;

    #cid_12 {

    margin-left: 252px !important;

    margin-top: -26px !important;

    }

    This is the output from the clone version of your form: http://www.jotformpro.com/form/23603911686961?

     

    Thanks

  • Profile Image

    Answered by guest_23028792568059 on December 26, 2012 at 08:57 AM

    Thanks:) That is a lot better, however would you be able to move the I agree text so that is aligns on the left with the rest of the text?

    Thanks In Advance

     

    D

  • Profile Image
    JotForm Support

    Answered by Welvin on December 26, 2012 at 09:10 AM

    Hi,

    Re-check this form: http://form.jotformpro.com/form/23603911686961?. Is this what you mean?

    What I did is to add the "I Agree" text on the label and inject this codes to hide the "I Agree" text next to the checkbox:

     

    #input_12_0 + label {

    display: none !important;

    }

    Let me know if you have questions.

     

    Thanks

  • Profile Image

    Answered by guest_23028792568059 on December 26, 2012 at 09:22 AM

    Hi

    It all looks great but what I was referring to(my fault, I said the wrong thing), can you move the

    I give my ................... text over a couple of pixels so that the I lines up with all the other labels?

     

    Thanks again for your help

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on December 26, 2012 at 09:39 AM

    Hi there, 

    Please try injecting the following CSS code and let us know if that has solved the problem:

    #label_12{padding-left:3px;}

    Here is what it would look like:

    http://form.jotformpro.com/form/23604169431955?

  • Profile Image

    Answered by Dannilee on December 28, 2012 at 02:11 PM

    Hi

    Thanks

    Can you tell me how to move the radio box closer to the text? Something like 3 spaces after the * would be great.

     

    Then it's all good :)

  • Profile Image
    JotForm Support

    Answered by Mike_T on December 28, 2012 at 03:32 PM

    You may adjust a bit your custom CSS code. For example, try to change the highlighted value from 281px to 260px.

    #cid_12 {
    margin-left: 281px !important;
    margin-top: -26px !important;
    }

    Change to:

    #cid_12 {
    margin-left: 260px !important;
    margin-top: -26px !important;

    Thank you for using our service :)