How do I indent, reduce spacing between and shorten text boxes in only 3 areas without changing the rest of the form?

  • BLueList
    Asked on January 28, 2018 at 9:12 AM

    Question 4 of my survey is Phone Numbers. Underneath I have 3 fields: Home, Office and Mobile. I would like to indent these fields and shorten the area code and phone number text boxes without changing the rest of the form. Lastly how do I  shorten the space between these fields without changing the rest of the form<

    Jotform Thread 1364500 Screenshot
  • David JotForm Support Manager
    Replied on January 28, 2018 at 10:31 AM

    If this is what you want to accomplish:

    1517153414fields Screenshot 10

    You can inject the following code:

    #id_115,#id_116,#id_117{

        width: 50% !important;

    }

    .phone-separate{

        margin-left: -7% !important;

    }

    #id_115,#id_116{

        padding-bottom: 0px !important;

    }

    #id_116,#id_117{

        padding-top: 0px !important;

    }

    Let us know if you need more help.

  • BLueList
    Replied on January 28, 2018 at 12:13 PM

    I injected the above code and saved yet no change happened. The fields in question look the same.

  • David JotForm Support Manager
    Replied on January 28, 2018 at 1:27 PM

    I have injected the code in your form, and it has now taken effect. Please check again.

  • BLueList
    Replied on January 29, 2018 at 9:38 AM

    1) It is better. But, there is still a lot of vertical space between: 4. Phone Number(s) and Home 

    2) Home, Office and Mobile are still not indented

  • David JotForm Support Manager
    Replied on January 29, 2018 at 11:30 AM

    1) Inject the following code to shorten the vertical space between those two fields:

    #id_118{

        padding-bottom: 0px !important;

    }

    #id_115{

        padding-top: 0px !important;

    }

    Also, I would suggest you to inject this code, so the form display fine in mobile view:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-all {

        width: 100%!important;

    }

    }

    2) On regards of the "Home, Office and Mobile are still not indented", could you share a screenshot of how it looks on your end? https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

    Here is how it looks on mine:

    1517243339fields 001 Screenshot 10

    Do you want to move those field a little bit to the right?

  • BLueList
    Replied on January 29, 2018 at 12:19 PM

    Yes, I would like to move these fields a little bit to the right.

  • David JotForm Support Manager
    Replied on January 29, 2018 at 12:59 PM

    Inject this code:

    #id_115,#id_116,#id_117{;

        margin-left: 5% !important;

    }

    Note: you can increase the percentage if you want it more to the right.

  • David JotForm Support Manager
    Replied on January 29, 2018 at 1:01 PM

    Sorry, previous code has an extra character, this is the correct one to indent those fields:

    #id_115,#id_116,#id_117{

        margin-left: 5% !important;

    }

  • BLueList
    Replied on January 29, 2018 at 1:10 PM

    Thank you!