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 do I indent a few questions?

    Asked by rlzolinas on May 04, 2017 at 08:58 AM

    I would need corrective action taken and additional work order needed indented under all items.

    Page URL:
    https://form.jotformpro.com/71226393693967

  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 04, 2017 at 10:24 AM

    Hello rlzolinas,

    I did check your form and both the question seems to be displayed correctly. Please check the screenshot below:

     

    I would suggest you to please let us know what changes you want to do and how you want both the fields to be indented, we will try to help you.

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by rlzolinas on May 04, 2017 at 10:30 AM

    I would like those questions indented. Maybe 100 pixels to the right?

  • Profile Image

    Answered by RyanC on May 04, 2017 at 10:41 AM

    Just add these custom CSS

    .form-line {

        padding-left : 120px;

    }

     

     

     

    If you want the questions only

     

    .form-label-top {

        font-weight : bold;

        padding-left : 120px;

    }

  • Profile Image

    Answered by rlzolinas on May 04, 2017 at 10:48 AM

    Hi, I do not want all of the questions to move though. I would like the sub questions indented under the main questions like this:

    2. check ceramic floor tile in front of shower

            corrective action taken

            additional work order needed?

    3. check showerhead for flow

            corrective action taken

            additional work order needed?

  • Profile Image

    Answered by RyanC on May 04, 2017 at 11:19 AM

    Try to add these codes

     

    #label_8, #label_9,#label_11,#label_12#label_14,#label_15,#label_17,#label_18,#label_20,#label_21,#label_23,#label_24,#label_26,#label_27,#label_29,#label_30,#label_32,#label_33,#label_35,#label_36 {

        padding-left : 60px;

    }

     

    #label_38,#label_39,#label_41,#label_42,#label_44,#label_45,#label_47,#label_48,#label_50,#label_51 {

        padding-left : 60px;

    }

     

    #input_8,#input_11,#input_14,#input_17,#input_20,#input_23,#input_26,#input_29,#input_32,#input_35,#input_38,#input_41,#input_44,#input_47,#input_50 {

        margin-left : 60px;

    }

     

    #cid_9,#cid_12,#cid_15,#cid_18,#cid_21,#cid_24,#cid_27,#cid_30,#cid_33,#cid_36,#cid_39,#cid_42,#cid_45,#cid_48,#cid_51 {

        margin-left : 60px;

    }

     

    #label_12 {

        padding-left : 60px;

    }

     

  • Profile Image

    Answered by rlzolinas on May 04, 2017 at 11:25 AM

    The yes/no radio buttons are still aligned left. Other wise, this would work.

  • Profile Image

    Answered by RyanC on May 04, 2017 at 11:29 AM

    #cid_9,#cid_12,#cid_15,#cid_18,#cid_21,#cid_24,#cid_27,#cid_30,#cid_33,#cid_36,#cid_39,#cid_42,#cid_45,#cid_48,#cid_51 {

        margin-left : 60px;

    }

     

    Try to add these, then clear browsing data your browser and then try to open

  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 04, 2017 at 01:01 PM

    Hello rlzolinas,

    You do not need to inject separate css code for input and labels. I believe the best way is to add margin per row and that should solve your problem. I would suggest you to please inject the following custom css code and see if this gives you desired result:

    li#id_8, li#id_9, li#id_11, li#id_12, li#id_14, li#id_15, li#id_17, li#id_18, li#id_20, li#id_21, li#id_23, li#id_24, li#id_26, li#id_27, li#id_29, li#id_30, li#id_32, li#id_33, li#id_35, li#id_36, li#id_38, li#id_39, li#id_41, li#id_42, li#id_44, li#id_45, li#id_47, li#id_48, li#id_50, li#id_51 {

        margin-left: 60px;

    }

    The following guide should help you on how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Thank you!