PDF Version of Form Looks Entirely Different

  • Profile Image
    joeconnor
    Asked 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!

  • Profile Image
    Charlie
    Answered 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.