Wickham's HTML & CSS tutorial

Form to send email without using viewer's email client

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

PHP email form processing generally

The PHP code for processing forms shown below normally requires a hosting service with Apache server to process PHP. A Linux operating system is often recommended for the hosting service in preference to a Windows OS, (it doesn't matter what you have on your computer), but I don't think that is vital as long as the host has Apache and PHP. There are problems using Godaddy as a hosting service and Godaddy have a special form and email recommendation, so the forms below may not work on a Godaddy server.

You can put Apache server on your computer for local testing in localhost by installing WampServer or XAMPP which will also give you PHPmyAdmin and MySQL database.

You cannot send an email from localhost using WampServer or XAMPP unless you edit the php.ini file inside one of the WampServer or XAMPP folders. See roshanbh.com or Google for another tutorial. Save a copy of the original file first in case you make a mistake. It's easier and safer to upload your form and test by sending an email to yourself via your hosting service server.

Email from form without automatic email reply

1a green icon If you want a viewer to send you an email directly from the web page form without using his/her email client, then use the following form which has an action to a PHP page which sends directly to your email address. Viewers and spambots cannot see your email address because it is hidden in the process.php page which is not displayed. It enables a viewer to send an email if he/she is using another computer without his/her normal email client. A separate "Thank You" page shows after submission of the data.

This example only has a name and email address and would be used in a situation where your webpage offers to send a brochure or wants people to sign a petition and all you need is their name and email address. Item 1b is for use where people need to send you a message (and probably want confirmation of it by return email).

The code for the form on this page is:-

<form action="process.php" method="post">
<ul style="list-style-type: none;">
<li>Name: <input type="text" name="name" size="30" maxlength="40"></li>
<li> </li>
<li>Email: <input type="text" name="email" size="30" maxlength="40"></li>
<li> </li>
<li><input type="submit" name="submit" value="Send"></li>
</ul>
</form>

The code for the process.php page is as follows:-

Thanks, <?php
@extract($_POST);
$sub="Form feedback";
$name = stripslashes($name);
$email = stripslashes($email);
mail('admin@your-domain.com',$sub,"$name $email","From: $name <admin@your-domain.com>");
echo stripslashes($name);
?> , we will drop you a line shortly.

An email has four sections To, Subject, Message and From so the the mail() function needs four codes separated by a comma.

The email you receive will have the viewer's name and YOUR email address in the "From" box like J Bloggs <admin@your-domain.com> and his name and his email address in the message box where the $name and $email are enclosed in "..." but there is no , between them. The subject box $sub will have the words Form feedback.

Alternatively, code the process.php page as follows and it will show the name in the subject box and the email address in the message box and J Bloggs <admin@your-domain.com> in the "From" box:-

Thanks, <?php
@extract($_POST);
$name = stripslashes($name);
$email = stripslashes($email);
mail('admin@your-domain.com',$name,$email,"From: $name <admin@your-domain.com>");
echo stripslashes($name);
?> , we will drop you a line shortly.

The stripslashes code is required because the email you receive from the viewer will otherwise have \ inserted before ' like John\'s Shop. The confirmation message echo code also has the stripslashes code.

In form example above the mail function is set to send to your email address from your email address. If you have $email in the From part of the email code it results in the email you receive showing the email address of the viewer in the From section of your email inbox which is fine, because you can see who it is from. Unfortunately many ISPs or hosting services will assume that an email sent from your server but with a different "From" address is spam and block the email as suspected spam. In these situations it's best to send the email from your own email address to your own email address and put the viewer's email address in the body of the message. It does mean that you will be sending an email to yourself, so it's a good idea to code some text into the subject like "Feedback" or "Web form reply" so that you recognise it as a reply to your web form.

Email from form with automatic email reply and thank you or error page

1b green icon If you want a viewer to send you an email directly from the web page form without using his/her email client, then use the following form which has an action to a PHP page which sends directly to your email address. Spambots cannot see your email address because it is hidden in the sendmail.php page which is not displayed. It enables a viewer to send an email if he/she is using another computer without his/her normal email client. A separate error page is shown if input boxes are not completed or a "Thank You" page shows after submission of correct data.

There is a facility in this code to send the viewer a confirmation email. The confirmation email code is included below but I have also shown below the main code the omission required if you do not want to send confirmation emails from your page.

If you do not send a confirmation email, your email address will be kept private because it is only in the code of the sendmail.php page used as a result of the action from this form but it will be shown in the confirmation email.

This example is for use where people need to send you a message (and probably want confirmation of it by return email). Item 1a only has a name and email address and would be used in a situation where your webpage offers to send a brochure or wants people to sign a petition and all you need is their name and email address.

The form below has been disabled.

The code for the styles in the head section on this page is:-

<style type="text/css">
<!--
/* -------------- Specific Form Rules Item 1b------------- */
fieldset { width: 350px; border: 4px solid #aaa; padding: 10px; }
#formplusreply label { display: block; font-weight: bold; width: 150px; margin: 15px 0 3px 0; cursor: pointer; }/*width of label controls pointer and clickable width*/
/*display: block so that the tags go to the next line*/
#formplusreply input, #formplusreply textarea, #formplusreply select { display: block; font-weight: bold; margin: 3px 0; }
#formplusreply .type2 { display: inline; } /*where the tag is not required on the next line for radio tags and checkboxes*/
#formplusreply textarea { width: 350px; overflow: auto; /* removes IE scrollbar */ }
#formplusreply input:focus, #formplusreply submit:focus, #formplusreply textarea:focus, #formplusreply select:focus { outline: 0; /* to delete Safari's blue border */ }
.req { color: #ff0000; padding: 0 5px; }
#formplusreply label.submit { width: 75px; }
#submit { cursor: pointer; }
#formplusreply input.botcatch { visibility: hidden; height: 0; line-height: 0; font-size: 0; margin: 0; padding: 0; border: none; }
-->
</style>

The code for the form on this page is:-

<form method="post" action="sendmail.php">
<fieldset id="formplusreply">
<legend>Product Order</legend>
<p>Required field<strong title="Required" class="req">*</strong></p>
<label for="email">Your Email:<strong title="Required" class="req">*</strong>
<input id="email" name="email" type="text" size="30">
</label>
<label for="name">Name:<strong title="Required" class="req">*</strong>
<input id="name" name="name" type="text" size="30">
</label>
<label for="subject">Subject:<strong title="Required" class="req">*</strong>
<input id="subject" name="subject" type="text" size="30">
</label>
<label for="message">Message:
<textarea id="message" name="message" rows="5" cols="40"></textarea>
</label>
<label for="component_select">Select component:<strong title="Required" class="req">*</strong>
<select id="component_select" size="3" name="component">
<option selected="selected" value="Component_1">Component 1</option>
<option value="Component_2">Component 2</option>
<option value="Component_3">Component 3</option>
<option value="Component_4">Component 4</option>
</select>
</label>
<label for="size1">Size required: <strong title="Required" class="req">*</strong><br>
<input class="type2" type="radio" id="size1" name="size" value="large"> Large
</label>
<label for="size2">
<input class="type2" type="radio" id="size2" name="size" value="small"> Small
</label>
<label for="delivery">
<input class="type2" type="checkbox" id="delivery" name="delivery" value="next_day_delivery"> Next day delivery
</label>
<label for="confirmation" style="width: 260px;">
<input class="type2" type="checkbox" id="confirmation" name="confirmation" value="delivery_date_confirmation_required"> Delivery date confirmation required
</label>
<input name="catchbot" class="botcatch" type="text" value="">
<label class="submit" for="submit">
<input id="submit" type="submit" value="Submit">
</label>
</fieldset>
</form>

The code for the sendmail.php page is as follows; use text largest or zoom to see clearly the difference between plain brackets ( ) and curly brackets { }:-

<?php
//
//
// Edit the below fields
$admin = 'admin@your-domain.com' ; // Change to your admin email 'from' address
$replymsg = 'Thank you for your email. We will respond shortly if required.' ; // Reply message to send
$formurl = 'http://www.your-domain/form.php' ; // the URL where the form code is - default: form.php
$errorurl = 'error.html' ; // the URL to show on error - default error.html
$thankyouurl = 'thankyou.html' ; // the URL to show feedback submitted - default: thankyou.html
// Security code to prevent addition of extra emails by spambots
function remove_headers($string) {
$headers = array(
"/to\:/i",
"/from\:/i",
"/bcc\:/i",
"/cc\:/i",
"/Content\-Transfer\-Encoding\:/i",
"/Content\-Type\:/i",
"/Mime\-Version\:/i"
);
if (preg_replace($headers, '', $string) == $string) {
return $string;
} else {
die('You are not completing the form correctly.');
}
}
$uself = 0;
$headersep = (!isset( $uself ) || ($uself == 0)) ? "\r\n" : "\n" ;
// Variables
$email = remove_headers($_POST['email']) ;
$name = remove_headers($_POST['name']) ;
$subject = remove_headers($_POST['subject']) ;
$message = remove_headers($_POST['message']) ;
$wordcount = str_word_count($message);
$component = ($_POST['component']) ;
$size =($_POST['size']) ;
$delivery = ($_POST['delivery']) ;
$confirmation = ($_POST['confirmation']) ;
// Code to prevent addition of / before ' in text entered by viewer
if (get_magic_quotes_gpc()) {
$name = stripslashes( $name );
$subject = stripslashes( $subject );
$message = stripslashes( $message );
}
// If email is filled out, proceed, if not, display the form
if (!isset($_POST['email'])) {
header( "Location: $formurl" ); //
}
// If a bot is attempting to send spam it will complete this input while viewers don't see the visibility: hidden box
elseif ($_POST['catchbot'] !="") {
//Boot it out of the server
die();
}
// Code to check for empty input boxes
elseif (empty($email) || empty($name) || empty($subject) || empty($component) || empty($size)) {
header( "Location: $errorurl" );
}
// Security code to check that email address is probably valid and only contains one address
elseif
(!preg_match("/^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i",$email)) {
header( "Location: $errorurl" );
exit ;
}
// Security code to prevent addition of new lines entered into the $name and $email fields by spambots
elseif ( preg_match( "[\r\n]", $name ) || preg_match( "[\r\n]", $email ) ) {
header( "Location: $errorurl" );
exit ;
}
elseif ($wordcount >50) {
echo "Please do not exceed fifty words.";
}
//WORDCOUNT ADDED but . in a word like formemail.php causes extra word; echo will show in plain text in a new window with default browser background color (an alternative to header( "Location: $errorurl" ); which shows a complete html page)
else {
mail( $admin, "Feedback: $subject", "$name\r\n$email\r\n$message\r\n$component $size\r\n$delivery\r\n$confirmation", "From: $name <$admin>" );
mail( $email, "Feedback: $subject", $replymsg , "From: $admin" );
header( "Location: $thankyouurl" );
}
?>

The code has the following parts relating to the email fields:-
mail( $admin, $admin is the "To" field for the message to you;
"Feedback: $subject", this is the "Subject" field between "...";
"$name\r\n$email\r\n$message\r\n$component $size\r\n$delivery\r\n$confirmation", this is the "Message" field between "...", (\n is newline code to start a new line in the email; you can repeat \n\n for double line space or just a space "$component $size", for display on the same line; \r is carriage return which does essentially the same thing as \n);
"From: $name <$admin>" ); this is the "From" field between "..."
and
mail( $email, $email is the "To" field for the return message;
"Feedback: $subject", this is the "Subject" field between "...";
$replymsg, this is the "Message" field for your automatic reply;
"From: $admin" ); this is the "From" field between "...".
Feedback is included in the "Subject" field so that you will recognise an email from someone you don't know as being a reply to your web page form, otherwise you might delete it as spam.

If you have several items that can be selected it's better to use several checkboxes rather than multiple selections in a select box (using multiple="multiple" in the select box tag). It's very difficult for someone with only one hand to hold down the shift key at the same time as using the mouse to highlight the second or third selection in a multiple select box.

The label tag for text input boxes and textarea boxes must be coded before the text or textarea tag to enable a screen reader to identify the correct tag. However, for radio buttons and checkboxes the label tag should follow the radio or checkbox input tag.

Although the code for sendmail.php includes security features, I cannot check that they work and they are not a complete set of security codes.

Note that the first mail code is:-

mail( $admin, "Feedback: $subject", "$name\r\n$email\r\n$message\r\n$component $size\r\n$delivery\r\n$confirmation", "From: $name <$admin>" );

which is set to From $name $admin, which sends the email to you from you with the viewer's name. If you put $name $email which is the viewer's email address as the From address many ISPs or hosting services will assume that an email sent from your server but with a different "From" address is spam and block the email as suspected spam. In these situations it's best to send the email from your own email address to your own email address and put the viewer's email address in the body of the message. It does mean that you will be sending an email to yourself, so it's a good idea to code some text into the subject like "Feedback" or "Web form reply" so that you recognise it as a reply to your web form.

An additional security feature is to code a variable like this:-

$name = (isset($_POST['name'])) ? $_POST['name'] : '';

instead of like this:-

$name = $_POST['name'];

as this prevents undefined index errors in certain circumstances. (I have omitted the extra remove_headers () function in both of the above examples which I used in the sendmail.php code, but this can be added.)

NOTE: Although preg_match is used in the PHP code above to check that an email address has the normal constituents like @ and at least one . there is a more modern function called FILTER_VALIDATE_EMAIL where the function does the checking. See php.net Validate Filters and w3schools. Note that you may need to use ! (for NOT) depending on how your PHP code is formed so that you are checking that the filter is true ie the email address is NOT equal to a correct validation. In my case above it would be:

elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)){
header( "Location: $errorurl" );
exit ;
}

Numbers of input boxes

The form above has input boxes for Your Email, Name, Subject, Message and others. A form with more than three input boxes needs special code in the sendmail.php code. Normally an email can only have fields for "To" (in the PHP code as the viewer does not know your email address), "From" (the form's "Your Email" input box), "Subject" and "Message" (the last three being the form input boxes) but please note my comments at the end of the previous paragraph about using the viewer's email address $email in the From code.

If you have more than three input boxes you have to decide where the extra input box data is to be shown in the email to you. In the code below the Name input box data is included with the Message in the "message" box so that it is the first item in the email message and the viewer's message follows and also Name is before the email address in the "From" box:-
else {
mail( $admin, "Feedback: $subject", "$name $message", "From: $name <$email>" );
mail( $email, "Feedback: $subject", $replymsg , "From: $admin" );
header( "Location: $thankyouurl" );
}
Note that $name and $message are included in "..." and there is no , between them. Similarly $name and <$email> are grouped the same way.

If you want a viewer to submit more information like "Address", add more input boxes to the form; say for this tutorial one extra one for the person's Address with name="address". Everywhere in the code for sendmail.php that you see $name create extra code with $address:-
...$name = $_POST['name'] ; $address = $_POST['address'] ;...
and
...empty($name) || empty($address)...
You then have to decide where the extra input box data is to be shown in the email to you. In the code above you might decide to include the address in the email "message" box so that it has the Name first, then Address, then the viewer's Message so the last "else" will need the $name and $address and $message included inside "..." with no , between them for the name and address to be before the message in the "Message" box:-
else { mail( $admin, "Feedback: $subject", "$name $address $message", "From: $email" );
mail( $email, "Feedback: $subject", $replymsg , "From: $admin" );
header( "Location: $thankyouurl" );
}

Alternatively if you also want the name before the email address in the "From" box, code the "else" as follows:-
else { mail( $admin, "Feedback: $subject", "$name $address $message", "From: $name <$email>" );
mail( $email, "Feedback: $subject", $replymsg , "From: $admin" );
header( "Location: $thankyouurl" );
}

If you only want to use one entry in each email box you will probably only need Your Email, Subject and Message as form input boxes as your own email address is hidden from the viewer. Edit the sendmail.php file as follows and it will show the Your Email in the "From" box, Subject in the "subject" box, and Message in the "message" box:-
<?php
//

// Edit the below fields
$admin = 'admin@your-domain.com' ; // Change to your admin email 'from' address
$replymsg = 'Thank you for your email. We will respond shortly if required.' ; // Reply message to send
$formurl = 'http://www.your-domain.com/form.html' ; // the URL where the form code is - default: form.html
$errorurl = 'error.html' ; // the URL to show on error - default error.html
$thankyouurl = 'thankyou.html' ; // the URL to show feedback submitted - default: thankyou.html

// Do not edit below
$email = stripslashes($_POST['email']) ;
$subject = stripslashes($_POST['subject']) ;
$message = stripslashes($_POST['message']) ;

if (!isset($_POST['email'])) {
header( "Location: $formurl" ); //
}

elseif (empty($email) || empty($subject) || empty($message)) {
header( "Location: $errorurl" );
}

else {
mail( $admin, "Feedback: $subject", $message, "From: $email" );
mail( $email, "Feedback: $subject", $replymsg , "From: $admin" );
header( "Location: $thankyouurl" );
}

?>

Omission of return email to viewer

Delete
mail( $email, "Feedback: $subject", $replymsg , "From: $admin" );
in the last "else" in sendmail.php if the return email sent to a viewer is not required.
The confirmation page thankyou.html will still be shown.

Other page codes

The code for the thankyou.html page is:-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>"Thank you" page</title>
<style type="text/css">
div { width: 500px; margin: auto; padding: 20px; }
h2, p { text-align: center; }
</style>
</head>
<body>
<div style="border: 1px solid black;">
<h2>Thank you for your message.</h2>
<p>This is a message from http://www.your-domain.com/</p>
</div>

<div style="border: 0;">
<p style="font-size: small">Copyright© email script from James Coyle - <a href="http://jccorp.net">JCcorp</a><br> <a href="http://Developers.jccorp.net">Download this script</a>
</div>
</body>
</html>

The code for the error.html page is:-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>"Error" page</title>
<style type="text/css">
div { width: 500px; margin: auto; padding: 20px; }
h2, p { text-align: center; }
</style>
</head>
<body>
<div style="border: 1px solid black;">
<h2>There was an error in filling out the feedback form.</h2>
<p>Please use the back button in your browser and fill the form correctly.</p>
<p>This is a message from http://www.your-domain.com/</p>
</div>

<div style="border: 0;">
<p style="font-size: small">Copyright© email script from James Coyle - <a href="http://jccorp.net">JCcorp</a><br> <a href="http://Developers.jccorp.net">Download this script</a>
</div>
</body>
</html>

The code is based on "Simple Feedback Form" from JCcorp.net version 1.01

Forms generally, processing data for email and styling forms

For general forms information, see Forms.

Processing of form data and sending to an email address can be achieved by using jemjabella.co.uk or Form Processor Pro. or FormMail. See also scriptarchive.com regarding FormMail. These scripts offer some degree of security and protection from computer spambots.

Accessibility and security

Additional codes to help people with poor eyesight or those unable to use a mouse can be found on these sites:-
webSemantics; Accessify.com; Webaim.com and Devarticles.com.

Additional codes to assist security can be found on thesitewizard.

Processing forms to a database instead of to an email address

2 green icon If you want to avoid form data being sent to your email address you can set up a MySQL database and have PHP script send the data to it where it can be immediately shown in various table formats. See PHP to MySQL Tutorial.

HTML Email sent from a web form

3 green icon You can send html (formatted) emails from a web page; see HTML Emails.

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that the page centralises at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

top | Sitemap | Forms | Server Side Includes