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

    Multi-page Print Form CSS/HTML Not Working.

    Asked by websiteteam on January 15, 2017 at 05:07 PM

    I have a multi-page form that I have added the following CSS:

    @media print{

     

        .pageBreak {

     

            page-break-after : always !important;

     

        }

     

    }

    And inserted the following HTML: <div class="pageBreak"> </div> where I want a printed page break. I have cleared the Form cache and the browser cache, Google Chrome.

    The desired result of printing a new page after this code is entered is not working. There are approx. 25 - 26 pages that I need the user of the form to be able to print, with page breaks where I set them in the back-end of the form, using Google Chrome browser only.

    JotForm: https://form.jotform.com/63275744442156?session=

    Page URL:
    http://www.temptestsite.net/jot-form-test/

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Chriistian on January 15, 2017 at 10:57 PM

    I checked the print feature on your form and it seems to be working properly. No fields were overlapping on the print preview.

    Does the issue still persist on your end? Can you please try replacing the current CSS with the one below instead:

    @media print{

        .pageBreak {

            page-break-before : always;

            page-break-inside : avoid;

        }

    }

    Regards.

  • Profile Image

    Answered by websiteteam on January 16, 2017 at 04:45 PM
    Thank you
    - I have one additional follow-up question, please -
    Please see the attached screenshot and the notation. I need to know if the notated items may be excluded from the Print function so that they do not print out with the rest of the form?
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on January 16, 2017 at 08:23 PM

    Unfortunately attached images are not visible in the forum. To send an image to the thread, please visit your thread here https://www.jotform.com/answers/1035085 and follow this guide on How to add screenshots/images to questions to the support forum?

    You can also list here the names of the fields that you want to exclude from the print and we will see if it is possible to hide them when printing.

    I will wait for your response.
    Regards.

  • Profile Image

    Answered by websiteteam on January 16, 2017 at 08:45 PM
    The very Last Three fields of the Form:
    "IMPORTANT" Print form BEFORE submitting. Submitting clears the Form of ALL entries!"
    "CLICK Submit Form after you have Printer It!"
    "Submit Form" Button
    This prints out an extra page and it is not needed or required.
    I still need these to appear on the Form itself - Just not the printed version.
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on January 16, 2017 at 10:48 PM

    Please insert the yellow highlighted code below inside the @media print { ... } section of your form css code to hide the three specified fields from printing. 

    @media print{

       .pageBreak {

            page-break-before : always;

            page-break-inside : avoid;

        }

       #id_342, #id_344, #id_340 {

           display: none!important;

       }

    }

    If you need further assistance, please let us know.
    Regards.