How to remove square borders around the fields (inputs) on a printed version of the form

  • adeptdesigns
    Asked on April 24, 2014 at 3:32 PM

    Works awesome, thank you!! 

    One additional question - how can I reduce the printed text size?  I am trying to get the whole form to fit on one page when it prints.  I tried this, but it doens't adjust the printed text size like it hoped:

    @media print {
    .form-all {font-size: .8em;}
    }

    Is there something better I could try?

  • Mike_T Jotform Support
    Replied on April 24, 2014 at 3:37 PM

    Thank you for contacting us.

    Yes, it is possible to inject specific print styles to the form. Please try to inject the following CSS in order to remove the input borders:

    @media print {
    .form-all input {
    border: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    }
    }

    How to remove square borders around the fields (inputs) on a printed version of the form Image 1 Screenshot 20

    If you need any further assistance, please let us know.

  • adeptdesigns
    Replied on April 25, 2014 at 11:14 AM

    Hi thanks for the speedy reply - this seems logical, and I added the CSS as provided, but it still prints with borders.  Here is a link: http://demo.webfoot-designs.com/sample-form

    Any idea why?

     

  • omer Jotform Support
    Replied on April 25, 2014 at 12:11 PM

    Hi adeptdesigns, 

    We discover that if you use win+p (or cmd+p) combination for printing, there are no borders around input fields. Until we fixed print button bug, you can use this as alternative solution.

    Please let us know if you need help with anything else.

    Have a good day.

  • omer Jotform Support
    Replied on April 28, 2014 at 8:33 AM

    Hi adeptdesigns,

    We fixed the bug, the print button works fine now.

    Thanks for your patience.

    Have a good day.

  • adeptdesigns
    Replied on April 30, 2014 at 5:46 PM

    Works awesome, thank you!! 

    One additional question - how can I reduce the printed text size?  I am trying to get the whole form to fit on one page when it prints.  I tried this, but it doens't adjust the printed text size like it hoped:

    @media print {
    .form-all {font-size: .8em;}
    }

    Is there something better I could try?

  • 24Carat
    Replied on September 4, 2014 at 4:11 AM

    Hi !

    I know this thread is rather dated, but I'd like to know what additional css code needs to be injected to make all the borders to disappear on print ?

     

    Specifically, the county is still bordered when using the address tool.

     

    Thanks !

  • jedcadorna
    Replied on September 4, 2014 at 8:10 AM

    @24Carat,

    I have created a separate thread for you and we'll respond to your query in this thread http://www.jotform.com/answers/424471 as soon as we can.