PHP email form - how to send the mail with html styling?

zurih · November 27, 2008, 6:55pm

Hey,

I have a contact form that sends the email with no styling. How can I send it as HTML (and with UTF-8)?

This is my code:


<html>
<head>
<title>Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.box {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px solid #000000;

}

.bluebox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bolder;
	color: #FFFFFF;
	background-color: #006699;
	border: 1px solid #000000;
}

.maincell {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 5px;
	border: 1px solid #006699;
}

.errmsg {
	font-family: "Courier New", Courier, mono;
	font-size: 12px;
	font-weight: bolder;
	color: #CC0000;
}

</style>
<script language="JavaScript">
function checkForm()
{
	var cname, cemail, csubject, cmessage;
	with(window.document.msgform)
	{
		cname    = sname;
		cemail   = email;
		csubject = subject;
		cmessage = message;
	}
	
	if(trim(cname.value) == '')
	{
		alert('Please enter your name');
		cname.focus();
		return false;
	}
	else if(trim(cemail.value) == '')
	{
		alert('Please enter your email');
		cemail.focus();
		return false;
	}
	else if(!isEmail(trim(cemail.value)))
	{
		alert('Email address is not valid');
		cemail.focus();
		return false;
	}
	else if(trim(csubject.value) == '')
	{
		alert('Please enter message subject');
		csubject.focus();
		return false;
	}
	else if(trim(cmessage.value) == '')
	{
		alert('Please enter your message');
		cmessage.focus();
		return false;
	}
	else
	{
		cname.value    = trim(cname.value);
		cemail.value   = trim(cemail.value);
		csubject.value = trim(csubject.value);
		cmessage.value = trim(cmessage.value);
		return true;
	}
}

/*
Strip whitespace from the beginning and end of a string
Input : a string
*/
function trim(str)
{
	return str.replace(/^\\s+|\\s+$/g,'');
}

/*
Check if a string is in valid email format. 
Returns true if valid, false otherwise.
*/
function isEmail(str)
{
	var regex = /^[-_.a-z0-9]+@(([-_a-z0-9]+\\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i;
	return regex.test(str);
}
</script>
</head>

<body>
<?php

$errmsg  = ''; // error message
$sname   = ''; // sender's name
$email   = ''; // sender's email addres
$subject = ''; // message subject
$message = ''; // the message itself

if(isset($_POST['send']))
{
	$sname   = $_POST['sname'];
	$email   = $_POST['email'];
	$subject = $_POST['subject'];
	$message = $_POST['message'];
	
	if(trim($sname) == '')
	{
		$errmsg = 'Please enter your name';
	} 
	else if(trim($email) == '')
	{
		$errmsg = 'Please enter your email address';
	}
	else if(!isEmail($email))
	{
		$errmsg = 'Your email address is not valid';
	}
	else if(trim($subject) == '')
	{
		$errmsg = 'Please enter message subject';
	}
	else if(trim($message) == '')
	{
		$errmsg = 'Please enter your message';
	}
	
	if($errmsg == '')
	{
		if(get_magic_quotes_gpc())
		{
			$subject = stripslashes($subject);
			$message = stripslashes($message);
		}	
		
		// the email will be sent here
		$to      = "email@yourdomain.com";
		
		// the email subject ( modify it as you wish )
		$subject = '[Contact] : ' . $subject;
		
		// the mail message ( add any additional information if you want )
		$msg     = "From : $sname \\r\
 " . $message;
		
		mail($to, $subject, $msg, "From: $email\\r\
Reply-To: $email\\r\
Return-Path: $email\\r\
");
?>
<div align="center">Your message is sent. Click <a href="index.php">here</a> to 
  go back to homepage </div>
<?php
	}
}


if(!isset($_POST['send']) || $errmsg != '')
{
?>
<div align="center" class="errmsg"><?=$errmsg;?></div>
<form  method="post" name="msgform" id="msgform">
  <table width="500" border="0" align="center" cellpadding="2" cellspacing="1" class="maincell">
    <tr> 
      <td width="106">Your Name</td>
      <td width="381"><input name="sname" type="text" class="box" id="sname" size="30" value="<?=$sname;?>"></td>
    </tr>
    <tr> 
      <td>Your Email</td>
      <td><input name="email" type="text" class="box" id="email" size="30" value="<?=$email;?>"></td>
    </tr>
    <tr> 
      <td>Subject</td>
      <td><input name="subject" type="text" class="box" id="subject" size="30" value="<?=$subject;?>"></td>
    </tr>
    <tr> 
      <td>Message</td>
      <td><textarea name="message" cols="55" rows="10" wrap="OFF" class="box" id="message"><?=$message;?></textarea></td>
    </tr>
    <tr align="center"> 
      <td colspan="2"><input name="send" type="submit" class="bluebox" id="send" value="Send Message" onclick="return checkForm();"></td>
    </tr>
    <tr align="center"> 
      <td colspan="2">&nbsp;</td>
    </tr>	
  </table>
</form>
<?php
}

function isEmail($email)
{
	return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i"
			,$email));
}
?>
</body>
</html>

imaginethis · November 27, 2008, 6:59pm

Take a look at PHPmailer.

zurih · November 27, 2008, 7:16pm

Thanks, but in my own script, how can I implement html styling?

imaginethis · November 27, 2008, 9:05pm

If you insist on writing your own script then look at the documentation for the mail function.

SJH · November 27, 2008, 9:09pm

Probably best to send it as a multipart message, which contains the HTML and text-only equivalents (the latter being for clients that can’t read HTML email).

This tutorial should tell you what you need to know.

zurih · November 27, 2008, 9:21pm

OK I’m able to receive the email as HTML now.
The only problem now is, the text I receive from the <textarea> field in the form, is wrapped up, without the returns.

For example, instead of getting:
"Hi,

My name is Dave."

I get:
“Hi, My name is Dave.”

How can I solve this?

Thank you!

SJH · November 27, 2008, 10:57pm

What you need is the nl2br() function.

zurih · November 27, 2008, 11:07pm

Thanks you, works great