PHP Send HTML Mail

When you are working on any website or web application, then at many points you used email to communicate from your user; like after registration, contact form submission etc. In that case, email is very important feature for any web application or website. In this article, we will learn how PHP Send HTML Mail.

To send mail in PHP, mail() function is the mostly used to send HTML email. To send email in nice format, we need HTML content to add in message body of email.

Syntax

mail(to, subject, message, headers, parameters);

In above syntax, to, subject and message, these three parameter is required. Without this, you can’t send any mail using PHP script. When you want to send additional header like Cc, Bcc, then you should use headers parameter.

To send email, you should pass below required parameters:

ParametersDetails
toReceiver email address.
subjectSpecifies the subject of the email. It should be single line.
messageMessage to be sent.
headersAdditional headers, like From, Cc, and Bcc, Content-type.

When you will send HTML email, we will use text/html as Content-type in headers parameter.

Example
<?php
$to = 'testuser@yopmail.com'; 
$from = 'testsender@yopmail.com'; 
$from_name = 'Test Sender'; 
 
$subject = "Example of Send HTML Email using PHP"; 
 
$message = '<html> 
				<head> 
					<title>Example of Send HTML Email using PHP</title> 
				</head> 
				<body> 
					<h1>Hi Testuser,</h1> 
					<table cellspacing="0" style="border: 2px dashed #FB4314; width: 100%;"> 
						<tr>
							<td>Welcome to PHP world</td>
						</tr>
						<tr> 
							<th>Your Name:</th><td>Testuser</td> 
						</tr> 
						<tr> 
							<th>Your Email:</th><td>testuser@yopmail.com</td> 
						</tr>
						<tr> 
							<th>Your Contact:</th><td>8888888888</td> 
						</tr>
						<tr> 
							<th>Your City:</th><td>Delhi</td> 
						</tr>
					</table> 
				</body> 
			</html>'; 
			
$headers = "MIME-Version: 1.0" . "\r\n"; 
$headers .= "Content-type:text/html; charset=UTF-8" . "\r\n"; 
$headers .= 'From: '.$from_name.'<'.$from.'>' . "\r\n"; 
$result = mail($to, $subject, $message, $headers); 
if($result)
{ 
    echo 'Email has sent successfully.'; 
}
else
{ 
   echo 'Email sending failed.'; 
}

?>

Also read Export Data To CSV Using PHP

If you want to send Cc & Bcc, then you should use:

$headers .= 'Cc: testuser1@yopmail.com' . "\r\n";
$headers .= 'Bcc: testuser2@yopmail.com' . "\r\n";

then your total $headers will be:

$headers = "MIME-Version: 1.0" . "\r\n"; 
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n"; 
$headers .= 'From: '.$from_name.'&lt;'.$from.'>' . "\r\n";
$headers .= 'Cc: testuser1@yopmail.com' . "\r\n"; 
$headers .= 'Bcc: testuser2@yopmail.com' . "\r\n";

If you want to send large email to your customer or user, then you should make a separate HTML file as a mail template and get all HTML data in a variable through file_get_contents() function and send mail through mail function.

Example

sample_mail_template.html

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Simple Transactional Email</title>
    <style>
      /* -------------------------------------
          GLOBAL RESETS
      ------------------------------------- */
      
      /*All the styling goes here*/
      
      img {
        border: none;
        -ms-interpolation-mode: bicubic;
        max-width: 100%; 
      }

      body {
        background-color: #f6f6f6;
        font-family: sans-serif;
        -webkit-font-smoothing: antialiased;
        font-size: 14px;
        line-height: 1.4;
        margin: 0;
        padding: 0;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%; 
      }

      table {
        border-collapse: separate;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        width: 100%; }
        table td {
          font-family: sans-serif;
          font-size: 14px;
          vertical-align: top; 
      }

      /* -------------------------------------
          BODY &amp; CONTAINER
      ------------------------------------- */

      .body {
        background-color: #f6f6f6;
        width: 100%; 
      }

      /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
      .container {
        display: block;
        margin: 0 auto !important;
        /* makes it centered */
        max-width: 580px;
        padding: 10px;
        width: 580px; 
      }

      /* This should also be a block element, so that it will fill 100% of the .container */
      .content {
        box-sizing: border-box;
        display: block;
        margin: 0 auto;
        max-width: 580px;
        padding: 10px; 
      }

      /* -------------------------------------
          HEADER, FOOTER, MAIN
      ------------------------------------- */
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%; 
      }

      .wrapper {
        box-sizing: border-box;
        padding: 20px; 
      }

      .content-block {
        padding-bottom: 10px;
        padding-top: 10px;
      }

      .footer {
        clear: both;
        margin-top: 10px;
        text-align: center;
        width: 100%; 
      }
        .footer td,
        .footer p,
        .footer span,
        .footer a {
          color: #999999;
          font-size: 12px;
          text-align: center; 
      }

      /* -------------------------------------
          TYPOGRAPHY
      ------------------------------------- */
      h1,
      h2,
      h3,
      h4 {
        color: #000000;
        font-family: sans-serif;
        font-weight: 400;
        line-height: 1.4;
        margin: 0;
        margin-bottom: 30px; 
      }

      h1 {
        font-size: 35px;
        font-weight: 300;
        text-align: center;
        text-transform: capitalize; 
      }

      p,
      ul,
      ol {
        font-family: sans-serif;
        font-size: 14px;
        font-weight: normal;
        margin: 0;
        margin-bottom: 15px; 
      }
        p li,
        ul li,
        ol li {
          list-style-position: inside;
          margin-left: 5px; 
      }

      a {
        color: #3498db;
        text-decoration: underline; 
      }

      /* -------------------------------------
          BUTTONS
      ------------------------------------- */
      .btn {
        box-sizing: border-box;
        width: 100%; }
        .btn > tbody > tr > td {
          padding-bottom: 15px; }
        .btn table {
          width: auto; 
      }
        .btn table td {
          background-color: #ffffff;
          border-radius: 5px;
          text-align: center; 
      }
        .btn a {
          background-color: #ffffff;
          border: solid 1px #3498db;
          border-radius: 5px;
          box-sizing: border-box;
          color: #3498db;
          cursor: pointer;
          display: inline-block;
          font-size: 14px;
          font-weight: bold;
          margin: 0;
          padding: 12px 25px;
          text-decoration: none;
          text-transform: capitalize; 
      }

      .btn-primary table td {
        background-color: #3498db; 
      }

      .btn-primary a {
        background-color: #3498db;
        border-color: #3498db;
        color: #ffffff; 
      }

      /* -------------------------------------
          OTHER STYLES THAT MIGHT BE USEFUL
      ------------------------------------- */
      .last {
        margin-bottom: 0; 
      }

      .first {
        margin-top: 0; 
      }

      .align-center {
        text-align: center; 
      }

      .align-right {
        text-align: right; 
      }

      .align-left {
        text-align: left; 
      }

      .clear {
        clear: both; 
      }

      .mt0 {
        margin-top: 0; 
      }

      .mb0 {
        margin-bottom: 0; 
      }

      .preheader {
        color: transparent;
        display: none;
        height: 0;
        max-height: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        mso-hide: all;
        visibility: hidden;
        width: 0; 
      }

      .powered-by a {
        text-decoration: none; 
      }

      hr {
        border: 0;
        border-bottom: 1px solid #f6f6f6;
        margin: 20px 0; 
      }

      /* -------------------------------------
          RESPONSIVE AND MOBILE FRIENDLY STYLES
      ------------------------------------- */
      @media only screen and (max-width: 620px) {
        table.body h1 {
          font-size: 28px !important;
          margin-bottom: 10px !important; 
        }
        table.body p,
        table.body ul,
        table.body ol,
        table.body td,
        table.body span,
        table.body a {
          font-size: 16px !important; 
        }
        table.body .wrapper,
        table.body .article {
          padding: 10px !important; 
        }
        table.body .content {
          padding: 0 !important; 
        }
        table.body .container {
          padding: 0 !important;
          width: 100% !important; 
        }
        table.body .main {
          border-left-width: 0 !important;
          border-radius: 0 !important;
          border-right-width: 0 !important; 
        }
        table.body .btn table {
          width: 100% !important; 
        }
        table.body .btn a {
          width: 100% !important; 
        }
        table.body .img-responsive {
          height: auto !important;
          max-width: 100% !important;
          width: auto !important; 
        }
      }

      /* -------------------------------------
          PRESERVE THESE STYLES IN THE HEAD
      ------------------------------------- */
      @media all {
        .ExternalClass {
          width: 100%; 
        }
        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
          line-height: 100%; 
        }
        .apple-link a {
          color: inherit !important;
          font-family: inherit !important;
          font-size: inherit !important;
          font-weight: inherit !important;
          line-height: inherit !important;
          text-decoration: none !important; 
        }
        #MessageViewBody a {
          color: inherit;
          text-decoration: none;
          font-size: inherit;
          font-family: inherit;
          font-weight: inherit;
          line-height: inherit;
        }
        .btn-primary table td:hover {
          background-color: #34495e !important; 
        }
        .btn-primary a:hover {
          background-color: #34495e !important;
          border-color: #34495e !important; 
        } 
      }

    </style>
  </head>
  <body class="">
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
      <tr>
        <td>&amp;nbsp;</td>
        <td class="container">
          <div class="content">
            <table role="presentation" class="main">
              <tr>
                <td class="wrapper">
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td>
                        <p>Hi User,</p>
                        <h2>Your Mail Sent Successfully!</h2>                        
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
						<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
                          <tbody>
                            <tr>
                              <td align="left">
                                <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                  <tbody>
                                    <tr>
                                      <td> <a href="http://htmlemail.io" target="_blank">Call To Action</a> </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <p>Good luck! </p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>            
          </div>
        </td>
        <td>&amp;nbsp;</td>
      </tr>
    </table>
  </body>
</html>

send_mail.php

<?php

$to = 'testuser@yopmail.com'; 
$from = 'testsender@yopmail.com'; 
$from_name = 'Test Sender'; 
 
$subject = "Example of Send HTML Email using PHP"; 
 
$message = file_get_contents("sample_mail_template.html"); 
			
$headers = "MIME-Version: 1.0" . "\r\n"; 
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n"; 
$headers .= 'From: '.$from_name.'&lt;'.$from.'>' . "\r\n";
$headers .= 'Cc: testuser1@yopmail.com' . "\r\n"; 
$headers .= 'Bcc: testuser2@yopmail.com' . "\r\n"; 
$result = mail($to, $subject, $message, $headers); 
if($result)
{ 
    echo 'Email has sent successfully.'; 
}
else
{ 
   echo 'Email sending failed.'; 
}

?>

While PHP’s mail() function is sufficient for basic tasks, using a library like PHPMailer offers more features, better error handling, and easier integration with various SMTP services. Sending HTML emails in PHP can greatly improve the user experience by allowing for more sophisticated and visually appealing messages.

Categorized in:

PHP