Shadows in boxes when saving to print

  • Profile Image
    Asked on August 29, 2016 at 10:00 AM

    I have a form which looks perfect on jotform. When I save to print the form the boxes suddenly have bold shadow lines around the boxes. It only happens when you print to pdf so I am not sure if it's Abobe or jotform. Please have a look at the original and print form screenshot attached.

  • Profile Image
    Answered on August 29, 2016 at 12:09 PM

    I have downloaded the PDF form of yours and this is what I can see: 

    I have also cloned your form and downloaded the PDF form, you can also take a look to the PDF form of my cloned version of yours, click here to view it

    Please do note that the web version may be different compared to the web version, for example, if you remove the border color, you will notice that it still shows on the PDF form, it is basically the style that the form gets when it is generated as PDF. 

    CSS code cannot be applied to change the PDF version of your form either so this is not something that JotForm applies. 

    I would suggest you to test with a simple form, only add some fields and do not add style to them (CSS code) and you will notice they display the same. 


  • Profile Image
    Answered on August 30, 2016 at 04:41 AM

    Thanks but I'm not sure if you know what i mean. On chrome, for example, if you are viewing a form and then click file-print. Then it is saved as a pdf. On the form the lines are fine but as soon as you save to pdf (not the fillable version) then the border lines go bold/dark shadowy outline.

  • Profile Image
    Answered on August 30, 2016 at 08:38 AM

    Thank you for the clarification. You are opening your web form directly in the browser, and using the Print (CTRL+P) option of your Chrome browser to print the PDF file from the form.

    In the PDF generated by Chrome browser in this manner, there are some additional box-shadows within the fields:

    These shadows are actually created by Chrome browser, and we can remove them with a small bit of custom CSS. This is how the printed version of your form would appear when the shadows have been removed:

    If this is indeed what you wanted, we can remove shadows in Chrome by adding the following line of CSS into your form:

    .form-textbox, .form-textarea { box-shadow: none; }

    You can add CSS to your form by following this guide:

    If you want the above code to be applied only when you click on your browsers print button, but not when viewing the form directly, you can add the code wrapped inside an @media query, as so:

    @media only print {
    .form-textbox, .form-textarea { box-shadow: none; }

    Please let us know if this resolves the issue you were having. Cheers

  • Profile Image
    Answered on August 30, 2016 at 09:11 AM

    it worked thank you very much.