How to add page breaks when printing a form

  • Profile Image
    reverett
    Asked on June 24, 2015 at 02:53 PM

    I would like to form to print like it is displayed. I would like form to print individual pages after a page break.

    I found what I thought was my answer in the screenshot below but it not working for me. Please help. My code is below.

     

  • Profile Image
    Mike
    Answered on June 24, 2015 at 04:28 PM

    Thank you for contacting us.

    The following work around works on my side.

    Place empty divs before each Page Break element:

    <div class="pagebreak"> </div>

    And the next CSS code via form designer:

    @media print{
    .pagebreak {

    page-break-before : always;
    page-break-inside : avoid;
    }
    }

    Please give it a try and let us know if you need any further assistance.

  • Profile Image
    reverett
    Answered on June 25, 2015 at 04:52 PM

    Thank you this worked perfectly!

  • Profile Image
    h2insurancesolutions
    Answered on September 04, 2015 at 02:02 AM

    It hasn't worked for me, am I doing something wrong?

    Builder html box

    <div class="pagebreak"> </div>

     

    CSS in designer

    @media print{

        .pagebreak {

            page-break-before : always;

            page-break-inside : avoid;

        }

     

    }

     

    .jotform-form {

        padding : 40px 0 10px 0;

    }

     

    .form-all {

        padding-top : 0;

        box-shadow : 0 1px 0 rgba(255, 255, 255, 0.8) inset,0 -2px 0 rgba(0, 0, 0, 0.1) inset,0 0 10px rgba(255, 255, 255, 0.5) inset,0 0 0 1px rgba(0, 0, 0, 0.1),0 2px 4px rgba(0, 0, 0, 0.2) !important;

        border : 0 !important;

    }

     

    .form-checkbox-item:not(#foo) input[type="checkbox"], .form-checkbox-item:not(#foo) input[type="radio"] {

        visibility : hidden;

    }

     

    .form-radio-item:not(#foo) label:after {

        border-radius : 50%;

    }

     

    .form-radio-item:not(#foo) label:before {

        border-radius : 50%;

    }

     

    .form-checkbox-item:not(#foo) label:before,

    .form-radio-item:not(#foo) label:before {

        border : 1px solid #828282;

    }

     

    .progressBarContainer.fixed {

        left : 0 !important;

        width : 100% !important;

        text-align : center !important;

    }

     

    .progressjs-progress {

        width : 100% !important;

        height : 6px !important;

    }

     

    .progressBarContainer {

        height : 27px !important;

        padding-top : 0 !important;

    }

     

    .form-textbox, .form-textarea, .form-dropdown {

        outline : none;

    }

     

    #cid_142 div.form-pagebreak-next-container {

     

    }

     

    #cid_142 div.form-pagebreak {

     

    }

     

    .form-pagebreak-back {

        position : relative;

    }

     

    .form-pagebreak-next {

     

    }

     

    .form-pagebreak {

     

    }

     

    .form-line {

     

    }

     

    .form-input-wide {

     

    }

     

    #cid_145 {

     

    }

     

    #cid_145 div.form-pagebreak {

     

    }

     

    .form-checkbox-item label {

     

    }

     

  • Profile Image
    abajan
    Answered on September 04, 2015 at 06:20 AM

    @h2insurancesolutions

    Since we prefer each user to have their own thread, I've moved your question to a separate one (http://www.jotform.com/answers/654984) where it will be addressed in due course.

    Thanks