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 to add new line to the Sub-Heading Text

    Asked by sisters7 on December 21, 2016 at 09:36 AM

    I  inserted <br> to bring June 1 - June 3, 2017 to the line below Hope College.... However this <br> became part of the text, please see preview of my form.  Please help bring June 1 - June 3, 2017 to the second line of sub-heading. Thanks.

  • Profile Image
    JotForm Support

    Answered by emily on December 21, 2016 at 10:15 AM

    Hi, 

    Thank you for contacting us.  

    Unfortunately, you cannot end a new line with HTML codes. However, you can alter the design by injecting custom CSS codes.

    Please copy this text  "Hope College,Holland,MI  June 1 - June 3, 2017" into the Subheading Text Area of your header. The first blank space should be the place where the new line starts.

    .form-subHeader {

        width : 160px;

        white-space : normal;

        margin-left:230px;

    }

    Here is the user guide on injecting custom CSS codes.

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Please try this solution and let us know if you encounter any problem.

    Thank you.

  • Profile Image

    Answered by sisters7 on December 21, 2016 at 11:44 AM

    I copied & pasted your code. Now MI became the first part of the dates. MI should be the last part of the first sub-heading.

    Thanks again.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on December 21, 2016 at 12:18 PM

    As I can understand you need the text to be displayed like this: 

    To achieve that you only need to increase the field width so the final code should be this one: 

    .form-subHeader {

        width : 170px;

        white-space : normal;

        margin-left : 230px;

    }

    Please inject it and let us know if you have any question. 

     

  • Profile Image

    Answered by sisters7 on December 22, 2016 at 07:27 AM

    Kevin's suggestion helped, however this code also affected all other sub-headings which should not be changed.

    Sub-heading for Section 2, 4 and 5 should not be narrowed down to 1/3 of the space.

    Please help again. 

  • Profile Image
    JotForm Support

    Answered by Helen on December 22, 2016 at 07:47 AM

    Hi,

    You must inject this CSS codes for only affect first sub-heading:

    #subHeader_418 {

        width : 170px;

        white-space : normal;

        margin-left : 230px;

    }

    Everyting works properly on my side. As you can see:

    Please let us know if you need any further assistance.

  • Profile Image

    Answered by sisters7 on December 22, 2016 at 08:02 AM

    Helen's suggestion brought back my original problem. The <br> became part of the first subheader: The correct way should be

    Hope College, Holland, MI

    June 1- June 3, 2017

    not Hope College, Holland, MI<br>June 1- June 3, 2017

    Can someone help again? Thanks.

     

     

  • Profile Image
    JotForm Support

    Answered by Helen on December 22, 2016 at 08:22 AM

    Hi,

    I have cloned your form and tested on my side. You must be delete <br> into your sub-heading.

    After that, please remove this CSS code into your form:

    .form-subHeader {

        width : 90% !important;

        margin : 0 auto !important;

    }

    And add this CSS codes that I shared with you before:

    #subHeader_418 {

        width : 170px;

        white-space : normal;

        margin-left : 230px;

     

    }

    Here is form without sub-heading contain <br> :

    Please test it on your side. If  you have still problem, feel free contact us.

  • Profile Image

    Answered by sisters7 on December 22, 2016 at 08:26 AM

    This is still not correct. MI should be in the back of Holland,, not in the front of the dates.

  • Profile Image
    JotForm Support

    Answered by emily on December 22, 2016 at 08:34 AM

    Hi,

    Please change the width of the subheader to 190px. This should solve the issue.

    .form-subHeader {

        width : 190px;

        white-space : normal;

        margin-left : 230px;

    }

    Here is the screenshot of the form after the alteration above.

    I hope this helps. 

    Thank you.

  • Profile Image

    Answered by sisters7 on December 22, 2016 at 09:04 AM

    Thanks! It worked.