Need help with correctly indenting form elements

  • NAHN
    Asked on February 19, 2018 at 11:39 PM

    I created a form with several form elements. Is it possible to indent certain form elements?

    For example, on my page below, I would like to indent certain form elements such as name, place of employment, phone number, e-mail, etc. Is it possible to indent the form elements or do all the form elements always align to the left side of the page?

  • batuhan
    Replied on February 20, 2018 at 3:58 AM

    It is possible by injecting CSS code to your form. You may follow the steps shown below GIF in order to indent the desired fields.

    1519116816support Screenshot 10

    Thank you for contacting us. Please feel free to contact us.

  • NAHN
    Replied on February 20, 2018 at 5:08 PM

    Thank you for the response. I knew it was possible and the information and screen captures you provided is extremely helpful. However, I do not get the same response you get when I select CSS or Advanced Form Designer. The screen just stalls and nothing populates to the screen. Perhaps it's my connection, not sure.

    https://form.jotform.com/NAHN/nursenominationform

    I want to indent just as you provided in the example above but can't seem to do it because CSS and Advanced Form Designer will not load on my computer.

    I want to indent the form fields under the headings:

        Please provide the nominator's information:

        Please provide information for the nurse you are nominating:

    Is it possible for you to make the changes for me? Please advise.


  • jonathan
    Replied on February 20, 2018 at 6:32 PM

    I checked your form and I see it like the image below.

    Can you please confirm first that you wanted the indention from the left side to be with the vertical line I have shown in the image?

    1519169542zzz 2018 02 21 07 Screenshot 10


    We can fix it on your form after you clarify this is what you need.

    We will wait for your updated response.

  • NAHN
    Replied on February 20, 2018 at 10:17 PM

    Yes, I want the form fields indented to the vertical line.

    HOWEVER, I do not want the Heading text which is in black moved to the vertical line, just the form field under the headings.

    I want the two headings "Please provide the nominator's information:" & "Please provide information for the nurse you are nominating:" which are in BLACK text to stay where they are. I only want the form field under the two black text headings to move to the vertical line.

    Nothing else.  

    Does that make sense? Thank you so much!

  • BJoanna
    Replied on February 21, 2018 at 4:17 AM

    Please add this CSS code to your form: 

    .form-line.jf-required {

        padding-left : 67px;

    }

    #id_158, #id_157 {

        padding-left : 67px;

    }

    How to Inject Custom CSS Codes

    1519204505form2 Screenshot 10

    Here is my demo form: https://form.jotform.com/80512375263958 

    Feel free to test it and clone it

    Let us know if you need further assistance. 

  • NAHN
    Replied on February 21, 2018 at 9:24 AM

    It's perfect! Thank you, I was successful in cloning the form. Thank you so much for your help!!