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.