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

    PDF Version of Form Looks Entirely Different

    Asked by joeconnor on September 03, 2015 at 09:31 AM

    I am a new user to JotForm and have been impressed with the ease with which forms can be created. I work for an organisation that requires feedback from participants of multiple events that we run throughout the year. Therefore, we hand out feedback forms to collect this data. We decided to use JotForms to create printable PDFs to do this. However, the generated PDF files look entirely different to the created form - most of the formatting is lost - and the printed versions are even worse.

    I have seen others on these forums who have the same issue, but few solutions.

    This is a screenshot of what the form should look like:

     

    And this is a screenshot of what the generated PDF looks like:

     

    As you can see, the font has changed, the borders and formatting of matrix elements have disappeared etc. Even more disappears when I print.

    Any help ASAP would be greatly appreciated!

    different JotForm height print jpg
  • Profile Image
    JotForm Support

    Answered by Charlie on September 03, 2015 at 12:10 PM

    Hi,

    Just to confirm, would you like a printable Form that looks exactly like the live form?

    The create PDF form converts your form to a fillable PDF form, this means user can fill out the PDF directly, you can learn more about it here: https://www.jotform.com/help/312-Fillable-PDF-Everything-you-need-to-know-about-JotForm-Fillable-PDF-Creator.

    If you just want to print the form as a hard copy, you can easily do that by adding a print button. Here's a guide: https://www.jotform.com/help/24-Print-Button-on-Forms.

    Or you can also follow this guide:

    1. First, clone your form to have a copy that you can edit for a printable version of it. Here's a guide that you can follow: https://www.jotform.com/help/27-How-to-clone-an-existing-form-from-your-account 

    2. In your form, remove the page breaks, we will create our own one for printing purposes.

    3. Add a "Text" field and click the "Source Code", add the HTML element there.

     

    4. Add this HTML element

    <p class="pageBreak">pageBreak</p>

     

    5. After that, open your Form Designer Tool and add this custom CSS code

    @media print{

        .pageBreak {

            page-break-after : always !important;

        }

    }

    .pageBreak {

        visibility: hidden !important;

    }

     

    6. After that, view your live form in your browser and press CTRL+P to print it as it is or save it as a PDF file. Here's a screencast:

     

    From the print setup, you can easily make adjustment on margins or remove the background graphics.

    If you want to add another page break on specific part of the form, just repeat the earlier steps.

    I hope that helps.