Changing php form to submit a styled email (HTML email)

Question

When I submit my form, I receive the email in plain text and not quite in the format I'd like it to be. I'd like it to at least have color to the body and arrange the email so that its neater.

on the contact.php form ... this is what I currently have:

     $msg  = "You have been contacted by $name with regards to Accommodation. 
They passed verification and their message is as follows." . PHP_EOL . PHP_EOL;
     $msg .= "$comments" . PHP_EOL . PHP_EOL;
     $msg .= "You can contact $name via email, $email or via phone $phone." . 
PHP_EOL . PHP_EOL;
     $msg .= "We want to stay from the $dayin to the $dayout" . PHP_EOL . 
PHP_EOL;

Why is this form using $msg? I've seen in other forms, they use $message. Can I add CSS styling to the above form? I also see:

        $headers = "From: $email" . PHP_EOL;
    $headers .= "Reply-To: $email" . PHP_EOL;
    $headers .= "MIME-Version: 1.0" . PHP_EOL;
    $headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
    $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

Would I need to change "plain" to "HTML"? Any suggestions or examples would be great!

---

EDIT:

Ok so now my header are:

    $headers = "From: $email" . PHP_EOL;
    $headers .= "Reply-To: $email" . PHP_EOL;
    $headers .= "MIME-Version: 1.0"  . "\r\n" . PHP_EOL;
    $headers .= "Content-type: text/html;charset=iso-8859-1" . "\r\n" . 
 PHP_EOL;
    $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

Do I need PHP_EOL in each header?

My $msg looks like:

$msg  = '<style type="text/css">
<!--
.style {
font-family: Arial;
font-size: 12px;
color: #4D241E;
}
body {
background-image: url();
background-color: #F1EAE4;
 }
.style1 {font-size: 14px}
-->
</style>
<p>&nbsp;</p>
<table width="420" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td><table width="100%"  border="0" cellpadding="8" cellspacing="0" bgcolor="#E7D3AF" 
class="style">
  <tr>
    <td colspan="2" valign="top"><div align="center"><strong><span 
class="style1">Submission / Enquiry from your website</span><br>

&nbsp;........................................................................
</strong><br>
&nbsp;</div></td>
    </tr>
  <tr>
    <td width="32%" valign="top"><div align="left"><strong>Date Submitted</strong>
 </div></td>
    <td width="68%" valign="top">'. date("F j, Y, g:i a") .'</td>
  </tr>
  <tr>
    <td valign="top"><div align="left"><strong>Name</strong></div></td>
    <td valign="top">'.$_POST['name'].'</td>
  </tr>
  <tr>
    <td valign="top"><div align="left"><strong>Email</strong></div></td>
    <td valign="top">'.$_POST['email'].'</td>
  </tr>
  <tr>
    <td valign="top"><div align="left"><strong>Phone</strong></div></td>
    <td valign="top">'.$_POST['phone'].'</td>
  </tr>
  <tr>
    <td valign="top"><div align="left"><strong>Day in</strong></div></td>
    <td valign="top">'.$_POST['dayin'].'</td>
  </tr>
  <tr>
    <td valign="top"><div align="left"><strong>Day out</strong></div></td>
    <td valign="top">'.$_POST['dayout'].'</td>
  </tr>
  <tr>
    <td valign="top"><div align="left"><strong>Comments</strong></div></td>
    <td valign="top">'.$_POST['comments'].'</td>
  </tr>
</table></td>
</tr>
 </table>
';

EDIT: MY NEW HTML EMAIL DESIGN:

<table width="600" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="12" height="14"></td>
<td width="140"></td>
<td width="432"></td>
<td width="16"></td>
</tr>
<tr>
<td height="71"></td>
<td colspan="2" align="center" valign="middle" bgcolor="#F5F5F5"><span style="font-
family:Arial; font-size:18px; color:#333333;"><strong>Submission from</strong>
</span><br />
<span style="font-family:Arial; font-size:16px; color:#f9930f;">
<em>Your website</em></span></td>
<td></td>
 </tr>
<tr>
<td height="16"></td>
<td></td>
<td></td>
<td></td>
 </tr>
<tr>
<td height="30"></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px; color:#333333;">
<strong>Name:</strong></span></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px; 
color:#333333;">'.$_POST['name'].'</span></td>
<td></td>
</tr>
<tr>
<td height="30"></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px; color:#333333;">
<strong>Email:</strong></span></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px; 
color:#333333;">'.$_POST['email'].'</span></td>
<td></td>
</tr>
<tr>
<td height="30"></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px; color:#333333;">
<strong>Phone:</strong></span></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px; 
color:#333333;">'.$_POST['phone'].'</span></td>
<td></td>
</tr>
 <tr>
<td height="30"></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px; color:#333333;">
<strong>Day in:</strong></span></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px; 
color:#333333;">'.$_POST['dayin'].'</span></td>
<td></td>
</tr>
<tr>
<td height="30"></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px; color:#333333;">
<strong>Day out:</strong></span></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px;
color:#333333;">'.$_POST['dayout'].'</span></td>
<td></td>
 </tr>
<tr>
<td height="30"></td>
<td valign="middle"><span style="font-family:Arial; font-size:12px; color:#333333;">
<strong>Comments:</strong></span></td>
<td>&nbsp;</td>
<td></td>
</tr>
<tr>
<td height="190"></td>
<td colspan="2" valign="top"><span style="font-family:Arial; font-size:12px; 
color:#333333;">'.$_POST['comments'].'</span></td>
<td></td>
</tr>
 <tr>
<td height="20"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td></td>
</tr>
</table>

Now when I add this form in my php and submit my form ... I receive my submission that doesn't look like the table layout like above.

Answer 1

You can use the following headers. These will allow you to just put normal HTML in your message.

$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";

// More headers
$headers .= 'From: <example@example.com>' . "\r\n";
$headers .= 'Cc: example two@example.com' . "\r\n";

Answer 2

Yep you are going to have to use

Content-type:text/html;charset=iso-8859-1\r\n

It might be a good idea to provide your email in both HTML and text formats as not all email applications support HTML, and many others support it poorly.

To do so use this header instead. The boundary thing is what separates the HTML and text versions in the email, the line below generates a unique code which is suitable for this purpose

$boundary = md5(date('r', time())); 
$headers .= "\r\nContent-Type: multipart/alternative; boundary=$boundary."\"";

Before the text version of the email post this code, note the "--" at the begging. You use the same boundary throughout the email.

--<?php echo $boundary; ?> 

Before the HTML version post the same code again

There is a good template you can use here http://www.webcheatsheet.com/PHP/send_email_text_html_attachment.php