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

    How can I print only one page on my form?

    Asked by JPope669 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.

    print force how many pages
  • Profile Image
    JotForm Support

    Answered by mert 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

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

  • Profile Image

    Answered by JPope669 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 by JPope669 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
    JotForm Support

    Answered by BJoanna 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:

    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.