Help adding a line break in a section header

  • Profile Image
    kdaaka1908
    Asked on June 21, 2021 at 11:47 PM

    Can you tell me how to add a line break? In the referenced form, I want to break the line between Send-Off and August 14. Thanks!

  • Profile Image
    sevki
    Answered on June 22, 2021 at 01:25 AM

    Hi kdaaka1908,


    You can do it by following the steps below.

    1) Click on the "Form Designer" button on the right side of your page.

     1624339112_60d172a820174_formdesignercli

    2) You will reach the relevant page by clicking the "Advanced Designer" button from the opened section.

     1624339124_60d172b43e900_formdesigner_op

    3) On this page, more detailed settings can be made about your form. Select the "CSS" section on the right and click on the area with the line to see that that area is selected. After clicking, paste the line we have given you below in the field that opens on the right.

    1624339230_60d1731e60cdc_formdesigner_fo

    .form-buttons-wrapper.form-buttons-auto.jsTest-button-wrapperField {

        bottom-top: none;

    }

     

    4) After performing these operations, you can save the changes you have made by clicking the "Save changes" button. To reach your form, you can reach your form by clicking the "Back to builder" button above the save changes button.

    1624339208_60d1730829415_formdesigner_fo

    Preview:

    1624339351_60d17397a72f0_formdesigner_fo

    Please do not hesitate to contact us if you require any further assistance.

  • Profile Image
    kdaaka1908
    Answered on June 26, 2021 at 10:47 AM

    Sevki,

    I asked about breaking the line in the header between Off and August. You gave me a response re: a border on the button. Can you review and resend the relevant guidance? Thanks!

  • Profile Image
    sevki
    Answered on June 26, 2021 at 02:52 PM

    Sorry for the misunderstanding.

    For the transactions in the 3rd and 4th items I mentioned above, it will be sufficient to perform the following operation.

    1624733274_60d7765a88426_duzeltme.png

    .form-header-group.header-large { 
    border-bottom: none;
    }


    Please do not hesitate to contact us if you require any further assistance.

  • Profile Image
    Patrick_R
    Answered on June 27, 2021 at 03:11 AM

    Hello! Our apologies for the inconvenience. Adding line breaks in header elements isn't supported. But there is a workaround to achieve this, i.e. to use the paragraph element as these elements allow formatting.

    As an example, please check this form: https://www.jotform.com/211771546418963. Following is how the header should look like in this form:

    1624777610_60d8238ac6526_Matthlege Send-

    If this solves your purpose, then you can remove your form's header element; add a paragraph element at its place (as indicated in the screenshot below) and from the source code view, add the following code; then save.

    <div class="form-header-group header-large" style="margin-top:-20px;">
     <div class="header-text httac htvam">
      <h1 id="header_1" class="form-header" data-component="header">
       Matthew's College Send-Off<br />August 14 at 12:00pm (Rain Date: Aug. 15)
      </h1>
      <div id="subHeader_1" class="form-subHeader">
       Please RSVP and let us know whether you will attend.
      </div>
     </div>
    </div>

    1624777687_60d823d7cee01_The Easiest Onl

    Let us know if you come across any issues.

    Thank you!