How can I increase the margins on my form when printed as a PDF?

  • SCAC
    Asked on October 29, 2015 at 4:34 PM

    When I print my forms as PDFs, the top and bottoms of each page are cut off. How do I increase the margins so the entire area to be printed fits on the page? Also, despite marking that I'd like to include line breaks in the PDF for printing, the form doesn't break appropriately. Any assistance would be appreciated.

    How can I increase the margins on my form when printed as a PDF? Image 1 Screenshot 20

  • Elton Support Team Lead
    Replied on October 29, 2015 at 8:01 PM

    Thanks for reporting.

    May we know how you've printed your form? Is it on the form submissions page, the submissions PDF or directly on the browser (Ctrl+P)? By looking at your screenshot, it seems you've printed the form while on edit mode or filling them. Please let us know the exact steps so we can try it here.

    Also, since you mentioned PDF, have you tried using the PDF editor so far? You can access it on your form submissions page. You can extend the field container there which falls on the following page to create margins.

    How can I increase the margins on my form when printed as a PDF? Image 1 Screenshot 20

  • SCAC
    Replied on October 30, 2015 at 10:45 AM
    Unfortunately I’m not trying to make a PDF of the submissions. I want a PDF of the form itself for those people who would prefer to print out the form and mail it in.
    [cid:image001.png@01D112F8.4E7F73E0]
    ...
  • Charlie
    Replied on October 30, 2015 at 2:28 PM

    Hi,

    I went ahead and cloned your form, here it is: https://form.jotform.com/53025101968956?. You can try printing it.

    Below is my screencast (you can click it to expand), in Google Chrome you can press CTRL+P to print it or save it as PDF. You can adjust the margin there.

    How can I increase the margins on my form when printed as a PDF? Image 1 Screenshot 50

     

     

     

     

    Now how to point the specific part where the page break should be? Here's how:

    1. I will use the "Text" field and add an HTML element to be that marker, example below, I want the page break to happen after the "Zip Code" field or before the "Phone Number" field.

    How can I increase the margins on my form when printed as a PDF? Image 2 Screenshot 61

     

    2. In the source code of the "Text" field, here's the HTML code I added, it has a class name of "page-break-here".

    <div class="page-break-here">&nbsp;</div>

    How can I increase the margins on my form when printed as a PDF? Image 3 Screenshot 72

     

    3. Now you can duplicate that field and place it on the specific part of your form. However, you'll need to do this in trial and error.

    4. Use this custom CSS code to tell the print function that you want the page breaks to happen based from this code:

    @media print{

        .page-break-here {

            page-break-after : always !important;

        }

    }

    Paste that code under the CSS tab in your Form Designer Tool.

    How can I increase the margins on my form when printed as a PDF? Image 4 Screenshot 83

     

    Here's a reference for the @media print on CSS: http://www.w3schools.com/cssref/pr_print_pageba.asp 

     

    Do let us know if this works.