Need help with correctly indenting form elements

  • Profile Image
    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?

  • Profile Image
    batuhan
    Answered on February 20, 2018 at 03: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.gif

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

  • Profile Image
    NAHN
    Answered on February 20, 2018 at 05: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.


  • Profile Image
    jonathan
    Answered on February 20, 2018 at 06: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.29.24.png


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

    We will wait for your updated response.

  • Profile Image
    NAHN
    Answered 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!

  • Profile Image
    BJoanna
    Answered on February 21, 2018 at 04: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.JPG

    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. 

  • Profile Image
    NAHN
    Answered on February 21, 2018 at 09:24 AM

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