Injecting a page break into the print version of the form

  • Profile Image
    guineapigme
    Asked on February 28, 2015 at 07:23 PM

    I have tried to follow the directions in this thread to force a page break into the print view of the form.

     

    I injected the CSS code in the designer CSS portion correctly (I hope).

     

    Then inserted a text field and put the special code in the html box.

     

    I do not see a page break occurring at the end of my configurable list (the 2nd one) as a result of this when I use the print button to print the form view.

     

     

    http://www.jotform.com/answers/342380-I-want-to-print-a-web-form-how-can-I-create-page-breaks-so-the-pages-come-out-the-way-I-want-them-to

     

    Did I do something incorrectly?   

     

    http://www.jotform.com//?formID=43637462243152

  • Profile Image
    Sean
    Answered on February 28, 2015 at 10:25 PM

    You are on the right path but it seem as if the CSS provided in that post is no longer functional. I would suggest trying this code.

    You can add a Text Field to your form and add this HTML script. 
    <div class="print-breaker"></div>

    Follow the steps provided in the screenshots below.







    You should also inject this CSS cpde:

    @media print {
    .print-breaker {
    page-break-after : always;
    }}

    @media screen {
    .print-breaker {
    display: none;
    }

    #stage .print-breaker {
    display: block;
    }}

    Here is a test form you can look at:
    http://form.jotformpro.com/form/50558135481961 

    As shown in the screenshots above, I have added my manual page break script right below the header of my cloned form. Here is how it looks in the print preview:




    Please advise if this works for you.