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

    Editing CSS for a cleaner form

    Asked by Masalamedia on May 09, 2013 at 10:08 PM

    My form's Paypal area is cluttered with a lot of labels I don't seem to have control over, there is a lot of unwanted space, and the drop down menus are not lined up in a visually pleasing way.

    I'm attaching a "REAL FORM" and "DESIRED FORM" PNG. Can your wizards help me figure out how to hide the unwanted labels and get my fields to be more nicely arranged and professional looking?

    Thanks-

    Page URL:
    http://form.jotformpro.com/form/31286061007950?

    Screenshot
    professional png thanks
  • Profile Image
    JotForm Support

    Answered by EltonCris on May 10, 2013 at 12:55 AM

    Hi,

    Inject the following CSS codes to your form.

    .form-product-item:first-child .form-sub-label-container{

    margin-top: -230px;

    margin-left: 150px;

    }

    label[for="input_33_1002"] + br {

    display: none;

    }

    label[for="input_33_custom_1001_0"], label[for="input_33_custom_1007_0"] {

    display: none;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Result: 

    Let us know if you want further adjustment. Thank you!

  • Profile Image

    Answered by Masalamedia on May 10, 2013 at 01:54 AM
    Thanks a lot! Now what about a left padding on the drop down menu fields so they line up with the label text rather than the checkbox. In other words, indenting them a bit.
  • Profile Image

    Answered by Masalamedia on May 10, 2013 at 01:56 AM
    Also, if you look carefully at the mockup I provided, I am trying to also get rid of the grey price field next to the field label.
  • Profile Image
    JotForm Support

    Answered by EltonCris on May 10, 2013 at 05:15 AM

    @Masalamedia

    Replace my previous CSS codes to this.

    .form-product-item:first-child .form-sub-label-container{

    margin-top: -230px;

    margin-left: 150px;

    }

    label[for="input_33_1002"] + br {

    display: none;

    }

    label[for="input_33_custom_1001_0"], label[for="input_33_custom_1007_0"] {

    display: none;

    }

    label[for="input_33_1001"] span, label[for="input_33_1007"] span {

    display: none;

    }

    #input_33_custom_1001_0, #input_33_custom_1007_0{

    margin-left: 18px;

    }

    Result:

    Thanks!

  • Profile Image

    Answered by Masalamedia on May 10, 2013 at 07:51 PM

    I'm having trouble decyphering the labels in your code... but I'd like those two drop down controls to move up about 15-20 pixels each, so that they are closer to the labels that apply to them.

    I tried putting a margin-top value of -20px in the #input_33 line but got no joy.

    One last assist? Thanks a million.

     

    M

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 10, 2013 at 09:09 PM

    No worries. Use the following CSS. Bolded codes are the ones added.

    .form-product-item:first-child .form-sub-label-container{

    margin-top: -230px;

    margin-left: 150px;

    }

    label[for="input_33_1002"] + br, label[for="input_33_1001"] + br, label[for="input_33_1007"] + br {

    display: none;

    }

    label[for="input_33_custom_1001_0"], label[for="input_33_custom_1007_0"] {

    display: none;

    }

    label[for="input_33_1001"] span, label[for="input_33_1007"] span {

    display: none;

    }

    #input_33_custom_1001_0, #input_33_custom_1007_0{

    margin-left: 18px;

    }

    If you want further adjustment, contact us anytime. :) Cheers!

  • Profile Image

    Answered by Masalamedia on May 10, 2013 at 09:22 PM

    Thanks - I really appreciate it.

    On my screen, the quantity drop down control is now showing below the "Transcripts" label. I'm seeing this on Chrome and Firefox (mac) and IE10. Can you kindly adjust so the QTY is back up where it appears in your screen shot above, to the right of the "Transcripts $5.00" line?


    Thanks

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 10, 2013 at 10:16 PM

    @Masalamedia

    Look for this line on the injected CSS, it doesn't have period "."

    .form-product-item:first-child .form-sub-label-container{

    margin-top: -230px;

    margin-left: 150px;

    }

    Add period and that should fixed it :)