How can I print only one page on my form?

  • Rochocki12
    Asked on April 12, 2016 at 6: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.

  • mert JotForm UI Developer
    Replied on April 12, 2016 at 8: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

    </div>

     

    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>.

     

    <html>

    <head>

    ...

    <style type="text/css">

     

    @media print

    {

    .noprint {display:none;}

    }

     

    </style>

    ...

    </head>

     

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

  • Rochocki12
    Replied on April 12, 2016 at 2:45 PM
    Thanks, After I download and make the changes how do I post it back onto
    the server?
    ...
  • Rochocki12
    Replied on April 12, 2016 at 2:45 PM
    Or is it possible to ad a print button to the text area of my form so that
    ...
  • BJoanna
    Replied on April 12, 2016 at 3: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. 

    How can I print only one page on my form? Image 1 Screenshot 20

    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:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Here is my demo form: https://form.jotform.com/61026547516959 

    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.