FORMS, JAVASCRIPT MAILTO & REDIRECT

This method requires the normal form HTML codes so if you have not read about them please go to FORMS.

If you have ever wanted to use a form that, after the form is submitted, mails to a specific address and then re-directs the visitor to another page without using cgi or the GeoCities' next-url, then this code will show you how to do that. At the bottom of this page is a test form. It will be sent to me and you will receive a copy at the email address you enter!

NOTE: - The person sending the email must have a browser based email client such as Outlook Express. If they don't then the email will not be sent.

You set up a simple Javascript code in your form page. In the code below, which you can copy and paste to your page, please note the following:

  1. Change only the three areas in RED.
  2. Make sure each line below is on a line by itself.
  3. The lines that begin with // are just comments. You can keep them or delete them.

<HTML>
<HEAD>
<script language="JavaScript" type="text/javascript">
<!-- Hide script from older browsers
function DoRedirect(formname) {
// put your email address in here
formname.action="mailto:anyname@anywhere.com";
// put the redirect url in here absolute or relative urls can be used
// example: thankyou.htm
location.href="the-next-page";
return true;
}
//End Hiding -->
</script>
</HEAD>

<BODY>

<form method="POST" OnSubmit="JavaScript:return DoRedirect(this);" name="formname" enctype="text/plain">

..... your other form code here.........

</form>

</BODY>
</HTML>

formname - The name of this form, e.g. myform.

anyname@anywhere.com - The email address where the form will be sent.

the-next-page - The name of the page that will be displayed next, e.g. thankyou.htm.

your other form code here - In order for the entire form to be sent to you, you must name each form entry in order for the data to be included in the email.

Be sure to name check boxes, radio buttons, and select inputs too.

A sample form using this code is below. It will be sent to me and a copy will be sent to the email address you enter so please use your own email to verify that the form is sent.

NOTES:
  1. If the person sending the form doesn't use an PC based email client like Outlook Express then they can not send the form!

  2. You can change the name of javascript function, DoRedirect, to any name you wish.

  3. Remember that since the mailto: is being use, the visitor will automatically see that submitting the form will allow you to see their email address.

  4. To send a copy of the email form to some other address use:

    formname.action="mailto:1st-emailaddress?cc=2nd-emailaddress";

  5. If you use any form validation then the script above must be added to any place in the validation script where there is a return true;.

This is a sample of the re-direction form. You can test it by inputting your email address. I will get the form and you will receive a copy. If you wish to use this type of re-direction form then remove the

Note that my form includes a javascript function to clear the Comment box when the visitor clicks their cursor in the box.

Your Name:

Your Email Address (copy will be sent to this address):

Your Comments (box will clear when you click mouse inside it):

NOTE: THE SAMPLE EMAIL FORM CODE BELOW DOES NOT INCLUDE THE 'SEND COPY TO' CODE!

The Form Code
<script language="JavaScript" type="text/javascript">
<!-- Hide script from older browsers
function DoRedirect(formname) {
// put your email address in here.
formname.action="mailto:your-email-address-here" ;
// put the redirect url in here. absolute or relative urls can be used.
// I use thankyou.htm but any page name can be used.
location.href="your-next-page-address-here";
return true;
}
//End Hiding
-->
<!--
function doClear(inputname) {
if (inputname.value == inputname.defaultValue) {
inputname.value = ""
}
}
//-->
</script>
<form method="POST" OnSubmit="JavaScript:return DoRedirect(this);" name="formname" enctype="text/plain">
<input type="hidden" name="subject" value="Subject: Testing Email/Re-Direction Javascript Form">
Your Name: <input name="Visitor's Name" type="text" size=20>
<p>
Your Email Address (copy will be sent to this address): <input name="email" type="text" size=25>
<p>
Your Comments (box will clear when you click mouse inside it):<br>
<textarea cols=25 rows=5 name=comments onFocus="doClear(this)">Enter Your Comments here</textarea>
<p>
<input type="submit" value="Test Email/Re-Direct Form Code">
</form>