Form Mail and HTML free Print Outs

[sila]

Hi
I have an HTML form of which I would like my users to be able to fill out their details in the fields provided and then, before submitting, be able to press a print button that prints out the details they have entered for their own records but that also strips out all the HTML formatting on the print out. Does anyone know if this is possible?

thanks.

 

[Vragabond]

What kind of HTML formatting would you like to strip? All can be achieved by creating separate style sheets, one for the print and one for the screen. The screen will look like the one you have now, the print will have the formatting stripped (I can only assume you do not want to show the input boxes):

<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;print-styles.css&quot; media=&quot;print&quot; />

In this file you would set the borders to none, backgrounds to your background color and widths to something big enough that the text does not hide.

Hope that is what you were looking for.

 

[sila]

Thanks Vragabond.
I'm still not quite sure how to do this though. Yes it is the input boxes I want to be stripped out on the print-out, the code behind them in the body, as you know, is:

<p><input type=&quot;text&quot; name=&quot;Address&quot; size=&quot;20&quot;></p>

I'm not sure what exactly I need to write in the media print css file as the input box element doesn't appear to have any border values and only displays in one way?

thanks

 

[Vragabond]

First define the class in external CSS (type=&quot;media&quot:

.myinputbox {
  border: none;
  background: white; /* or whatever is your background color */
  width: 300px; /* whatever it takes to fit it all */
}

This should do it for starters. If you need to address more attributes check

http://www.w3schools.com

for a nice CSS reference.

Probably it is best to create another CSS file (type=&quot;screen&quot where you define the look for the screen (same syntax, just different outlook).

Finally, include the class you have defined in your CSS files in your input boxes:

<input type=&quot;text&quot; name=&quot;Address&quot; class=&quot;myinputbox&quot; />

Your screen CSS will be shown on the screen, your print CSS will be used in printing. As you can see, we have defined no borders to the box and the same background as the page so it should look as if there is no input box, just the text. Play with the individual properties to get the desired result.

 

[sila]

Thanks again Vragabond, I've just tried it and it works. Cheers! ;-)

 

[sila]

One more problem with this. I also have memo fields on the HTML form and it leaves in the scroll bar to the right. I've had a play but still can't make them disappear.
thanks.

 

[Vragabond]

Put style=&quot;overflow: hidden;&quot; your textarea. That will make the scrollbar disappear. If you have too much text in the textarea, some of it will just be cut. Maybe you could make it bigger for the printed version.