Help please: Creating a printer friendly page from a form

tommy · Oct 10, 2003

Newbie to the group.....hope you guys can help.

I need to be able to have a button at the bottom of a form page (like the
submit & reset buttons) to provide the user with a printer friendly version
of the form that he/she has just completed. It also needs to be submitted
in the usual way via email. I need to add a couple of extra items to this
printed version for someone to sign.

Any ideas how I can go about such a task? Is it possible?

Printing the screen is not an option as it looks nowhere near professional
and doesnt fit on one sheet of A4.

Thanks in advance of any help and advice..

(e-mail address removed)

Jeff North · Oct 10, 2003

| Newbie to the group.....hope you guys can help.
|
| I need to be able to have a button at the bottom of a form page (like the
| submit & reset buttons) to provide the user with a printer friendly version
| of the form that he/she has just completed. It also needs to be submitted
| in the usual way via email. I need to add a couple of extra items to this
| printed version for someone to sign.
|
| Any ideas how I can go about such a task? Is it possible?
|
| Printing the screen is not an option as it looks nowhere near professional
| and doesnt fit on one sheet of A4.
|
| Thanks in advance of any help and advice..
|
| (e-mail address removed)

Sounds like a job for CSS. Note the @media styles.
-----------------------------
<html>
<head>
<style>
@media screen {
.noPrint {
background: #000000;
border: 2px solid #00FFFF;
color: #00FFFF;
display: ;
font-size: 20px;
margin: 10px 10px;
padding: 10px 10px;
}

input, textarea {
border: 2px dotted #FF0000;
}
}
@media print {
input, textarea {
border: 0px none;
font-family: monospace;
overflow: visible;
width: 100%;
}

p {
font-family: fantasy;
font-size: 20px;
font-style: italic;
font-weight: bold;
}

..noPrint {
display: none;
}
}
</style>
</head>
<body>
<P class='noPrint'>This is some text that will not be printed.</P>
<P>Input your name : <INPUT name="section" type="text" size="20"
maxlength="100" value="the quick brown fox jumps over the lazy dog"
/></P>
<P>Enter some large amounts of text here:<br />
<textarea name="tReject" cols="60" rows="5">
Pellentesque porttitor. Sed vestibulum, nulla eu euismod consectetuer,
magna dolor commodo sem, id nonummy erat ipsum a nulla. Fusce laoreet
magna nec sem. Proin sagittis odio vitae odio. Suspendisse potenti.
Mauris sit amet lacus. Maecenas quam. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Morbi mauris tortor, dignissim sit amet, elementum quis, mattis at,
quam. Phasellus varius orci. Pellentesque venenatis, diam et suscipit
porttitor, mi massa porta tortor, a dignissim ante neque quis massa.
</textarea>
</body>
</html>

Ivo · Oct 10, 2003

tommy said:
I need to be able to have a button at the bottom of a form page (like the
submit & reset buttons) to provide the user with a printer friendly version
of the form that he/she has just completed.

Depending on what the form is about, if it is not submitted, nothing
is completely completed.

It also needs to be submitted

Does the button say "Print and Submit"?
That is asking for trouble I think. They are very different actions,
one navigating to a new page, the other stepping through a series of
dialog boxes before sending the current page to a printer. Consider to
have your users print the resulting page with their submitted info.

in the usual way via email.

The usual way is to a serverside script that does something with the
name-value pairs of the form form elements. You may have seen forms
with action="mailto:some@email" but this is generally very bad
practice! A link to a page with more information will be posted
soon...

I need to add a couple of extra items to this
printed version for someone to sign.

Items that are not onscreen, but only on paper?
Most browsers recognize the media attribute that you can add to a css
stylesheet to specify 'print' and some other values for auraul
browsers etc.
Like so:
<style type='text/css'>
..onlyprint{display:none;}
</style>
<style type='text/css' media='print'>
..onlyprint{display:block;}
..dontprint{display:none;}
</style>
<div>This will print.</div>
<div class='dontprint'>This will not.</div>
<div class='onlyprint'>Print! Please!</div>
<input type='button' onclick='window.print();' class='dontprint'
value=' Print '>

Not tested throughout, but should work.
HTH
Ivo

Help please	8	Jul 6, 2023
Printer Friendly Page	2	Aug 4, 2006
Printer Friendly pages	5	Jan 4, 2006
Bootstrap contact form not working	2	Feb 15, 2025
A website that I couldn't make a screenshot of it nor save any page from.	1	Oct 29, 2023
Usergent - Implementing Printer Friendly	1	Jul 11, 2006
Help with my responsive home page	2	Dec 14, 2022
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023

Help please: Creating a printer friendly page from a form

tommy

Jeff North

Ivo

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads