How can I print only one page on my form?

  • Profile Image
    Asked on April 12, 2016 at 06:41 AM

    Do you know of a way to force the HTML section to print on its own page? When my form is completed the HTML page might be forced to go on more than one page when printed. is it possible to code it to always print on one full page? I plan to give this page to the individual that completes the form since I can control the data that will populate the HTML section.

  • Profile Image
    Answered on April 12, 2016 at 08:23 AM

    Hi there,

    Firstly, you need to download the source code of your form, because we are doing some changes on form's HTML. After getting the HTML of your form, you need to define a special "div"s called let's say "noprint" to hide the desired parts on printing. Additionally, it's also possible to use a <span>, <p> or <table> tag instead of <div>. Using ID will work the same way.

    Please, see it from the below:


    <div class="noprint">

    page header/page footer



    Then, you need to define a CSS rule to hide the classes with the name "noprint". You can easily add this rule between <style type="text/css"> ... </style>.





    <style type="text/css">


    @media print


    .noprint {display:none;}







    If you need any extra information, please do let us know.

  • Profile Image
    Answered on April 12, 2016 at 02:45 PM
    Thanks, After I download and make the changes how do I post it back onto
    the server?
  • Profile Image
    Answered on April 12, 2016 at 02:45 PM
    Or is it possible to ad a print button to the text area of my form so that
  • Profile Image
    Answered on April 12, 2016 at 03:51 PM

    It is not possible to add back edited source code to the JotForm. It is only possible to add CSS codes to Jotform. 

    What my colleague suggested is to get source code of your form, add mentioned HTML to source code of your form and then to embed your form with source code to your website. 

    However you can achieve this inside of Form Builder as well. 

    First, add a "Text" field to your form and add this HTML to that field. 

    <div class="pageBreakHere"></div>

    Add this text fields with div elements, on place where you want to brake your page, when using print button. 

    Then Inject this custom CSS code to your form:

    @media print {

    .pageBreakHere {

    page-break-after: always !important;




    Inside of this guide you can find how to Inject Custom CSS code to your form: 

    Here is my demo form: 

    You will see that each form field is on separate page, when form is printed.

    Hope this will help. Let us know if you need further assistance.