Pin Me

How to Make Printer Friendly Web Page Forms

written by: S. R. Obbayi•edited by: Amber Neely•updated: 11/8/2010

If you are having trouble getting your web forms to print in a sane manner, then you are in the right place. Keep reading to learn how to make printer friendly web page forms.

  • slide 1 of 3


    web form To be able to get web forms to print properly you need to first understand some things about the width of web pages. A web page designed to fit onto a screen resolution of 800 x 600 pixels would be roughly on and a half times the size of an A4 paper width. Obviously the situation gets worse when you design a web page to fit on a screen resolution that is much wider than that, which happens to be more and more common nowadays as web designers more often than note are developing for screen resolutions of 1024 pixels across the screen.

    When you hit the print button on a page with a web form the print driver has to format the enter page including all the ads and all the stuff you do not need printed. So what is the solution? There are actually two good ways to go about it.

  • slide 2 of 3

    Separate Styled Web Form

    Without breaking the code on your existing website, You can simply add additional styling to the current web form page that you have. The web form you can actually see on your computer screen, including all the elements around it appear on a media which is called "screen" in HTML terms.

    So the secret is come up with styling that will not show on the "screen" media but should be used on some other media. In this case "print" media. So assuming your HTML is well formed and designed, then you should already have your styling separate from your content. In short you should have your styling stored in a separate CSS file pulled in using a <link> HTML tag.

    The different in syntax for print media and screen media can be seen below.

    <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="style2.css" media="print" />

    What your web browser will do, is when the print button is clicked, the browser will load the style2.css file and use it to style the form instead of the one marked for screen media. Within this style sheet you have the option of reducing the entire width of the page, while at the same time hiding the element you do not want printed. The actual code is beyond the scope of this guide as it all depends on the particular form layout and what else you want printed such as logos that will determine the actual styling.

  • slide 3 of 3

    Formatted Plain Content

    The method above would be suitable for someone who wants to print out a web form before they submit the details of which they have already filled. How about if you want to give the users an option of printing a web form after they have filled and submitted it?

    The solution would be to return the details of what the user filled in the form after a successful submission but this time the content should be return in formatted HTML Rather than a web form. At an appropriate place you should place a printer friendly button calls JavaScript code to dynamically change the style of the page and hide the additional elements such as ads that the user may not want to print.

    The javascript may be simple one line commands such as

    document.getElementById(elem_id).style.display = "none"

    where elem_id is the ID of the container you want to hide.

    There you have it, simple ways on how to make printer friendly web page forms. Other tutorials that may interest you include Web page design with border ideas and how to make website table of contents.