JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
How can I increase the margins on my form when printed as a PDF?Asked by SCAC on October 29, 2015 at 04: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.
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.
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.
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.
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.
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"> </div>
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:
page-break-after : always !important;
Paste that code under the CSS tab in your Form Designer Tool.
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.