Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>JavaScript Mail Form</TITLE>
<META name="author" content="Duncan Crombie">
<SCRIPT language="JavaScript">
<!-- Hide from older browsers
// Original JavaScript code by Duncan Crombie:
[email protected]
// Please acknowledge use of this code by including this header.
function mailIt() {
var dataForm = document.dataForm; // visible form
var mailForm = document.mailForm; // hidden form
var message = dataForm.body.value;
// redefine the mailForm action property
mailForm.action = "mailto:" + dataForm.recipient.value;
mailForm.action += "?subject=" + dataForm.subject.value;
// retrieve location information
var pageTitle = "Page Title: " + document.title;
var sentFrom = "Mailed From: " + document.location;
var userInfo = pageTitle + "\r\n" + sentFrom + "\r\n\r\n";
// transfer all information from dataForm to mailForm for sending
mailForm.mailBody.value = userInfo + message;
// open new window
newWindow = window.open("", "new_Window", "status='yes', scrollbars='yes'");
newWindow.document.clear();
// create a page that presents the transmitted message
newWindow.document.write("<HTML><HEAD><TITLE>Message sent to " + dataForm.recipient.value + "</TITLE></HEAD>");
newWindow.document.write("<BLOCKQUOTE>");
newWindow.document.write("<BODY bgcolor='white'>");
newWindow.document.write("<H2>The following message has been sent:</H2>");
newWindow.document.write("Recipient: " + dataForm.recipient.value + "<p><hr><p>");
newWindow.document.write(message + "<p>");
newWindow.document.write("<hr><p><DIV align='right'><FORM>");
newWindow.document.write("<INPUT type='button' value=' Close Window ' onClick='window.close();'>");
newWindow.document.write("</FORM></DIV></BLOCKQUOTE></BODY></HTML>");
newWindow.document.close();
// return true to send mail (returning false should prevent submission)
return true;
}
// Stop hiding -->
</SCRIPT>
</HEAD>
<BODY bgcolor="white" background="images/tracks.gif" text="black" link="blue" alink="lime" vlink="darkblue">
<BLOCKQUOTE>
<H1 align="center">JavaScript Mail Form<HR noshade size="1"></H1>
<P>The form on this page uses JavaScript to send an e-mail message to a specified
address. The benefit of this is that you can format the message so that it reads like a
regular piece of mail rather than having it be sent in the standard name=value pairs of a normal 'mailto:' form.</P>
<P>If you are using this page on a corporate site then you might want to replace the
address and/or subject fields with a pulldown list. This would let visitors quickly
select who they want to write to. <A href="mailform2.html">Click here</A> for an
example.</P>
<HR noshade size="1">
<DIV align="center">
<TABLE border="0" cellpadding="5" cellspacing="0">
<FORM name="dataForm" method="post">
<!-- The first form is the one that appears on the page -->
<TR>
<TH align="right">Send Message To: </TH>
<TD><INPUT name="recipient" size="50" value="
[email protected]""></TD>
</TR>
<TR>
<TH align="right">Subject: </TH>
<TD><INPUT name="subject" size="50" value="JavaScript Mail Form"></TD>
</TR>
<TR>
<TH align="right" valign="top">Body: </TH>
<TD><TEXTAREA name="body" cols="50" rows="10" wrap="virtual"></TEXTAREA></TD>
</TR>
</FORM>
<FORM name="mailForm" action="mailto:" method="post" enctype="text/plain" onSubmit="return mailIt();">
<!-- The contents of this field are filled out when the submit button is pressed -->
<INPUT type="hidden" name="mailBody" value="">
<TR>
<TD> </TD>
<TD align="right"><INPUT type="submit" value="Send Message Now" onClick="return(confirm('Send this message to ' + document.dataForm.recipient.value))";></TD></TR>
</FORM>
</TABLE></DIV>
<P>Before you feel the need to ask, there is no way using JavaScript to confirm that
the message has actually been sent. Of course using a CGI script as the target would
solve that.</P>
<DIV align="center"><HR noshade size="1"><- <A href="JavaScript: history.back();">Go Back</A> | <A href="index.html">Duncan's Home Page</A> -><HR noshade size="1"></DIV>
</BLOCKQUOTE>
</BODY>
</HTML>