Search code examples
phphtmlcssemail

how to send styles with html email


I am using PHP mail() function to send the email. I have a table in the email with specific styles, but when I receive the email, it does not show me the images and all style is disturbed.

My code is below:

    $recipient = $_POST['Users']['email'];
    $name   =   $_POST['Users']['first_name'];
    $username   =   $_POST['Users']['username'];
    $password   =   $_SESSION['password'];
                                
    $referrer_name     =    $model->referrer = $referrer_data['first_name'];
    $referrer_email     =    $model->referrer = $referrer_data['email'];
    // print_r($referrer_name);
    // print_r($referrer_email);
                                
    $webstore   =   $this->base_url . "/" . Yii::app()->session['username']; 
    $headers    = 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    $subject    = "Sign Up- Success";
    $message = "<table width='700' border='0' align='center' cellpadding='0' cellspacing='0' class='bordermain'>
  <tr>
    <td align='center' valign='middle'>&nbsp;</td>
  </tr>
  <tr>
    <td align='center' valign='middle'><table width='666' border='0' align='center' cellpadding='0' cellspacing='0'>
      <tr>
        <td width='666' colspan='2' align='center' valign='top'><table width='100%' border='0' cellspacing='0' cellpadding='0'>
          <tr>
            <td width='50%' align='left' valign='middle'><img src='".$this->theme_baseurl."/images/karmora-websiteLogo.png' width='175' height='50'  alt=''/></td>
            <td width='50%' align='right' valign='middle'><table width='120' border='0' cellpadding='0' cellspacing='0'>
              <tr>
                <td width='30' align='center' valign='middle'><a href='http://www.facebook.com/' target='_blank'><img src='".$this->theme_baseurl."/images/facebook.jpg'  alt='Facebook' width='25' height='25' title='Facebook'/></a></td>
                <td width='30' align='center' valign='middle'><a href='http://www.twitter.com/' target='_blank'><img src='".$this->theme_baseurl."/images/twitter.jpg'  alt='Twitter' width='25' height='25' title='Twitter'/></a></td>
                <td width='30' align='center' valign='middle'><a href='http://www.pinterest.com/' target='_blank'><img src='".$this->theme_baseurl."/images/pintrest.jpg'  alt='Pinterest' width='25' height='25' title='Pinterest'/></a></td>
                <td width='30' align='center' valign='middle'><a href='http://www.youtube.com/' target='_blank'><img border='0' width='25' height='25' src='".$this->theme_baseurl."/images/youtube.jpg' alt='YouTube'/></a></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td colspan='2' align='left' valign='middle'>&nbsp;</td>
          </tr>
          </table></td>
      </tr>
      <tr>
        <td colspan='2' align='center' valign='top'><table width='100%' border='0' cellspacing='0' cellpadding='5'>
          <tr>
            <td align='center' valign='middle' bgcolor='#f9f9f9' style='border:1px solid #CCC;'><table width='99%' border='0' cellspacing='0' cellpadding='0'>
              <tr>
                <td><span class='mainheading'><strong>Congratulations</strong></span></td>
              </tr>
            </table></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan='2' align='center' valign='top' bgcolor='#FFFFFF'><table width='100%' border='0' cellspacing='0' cellpadding='0'>
          <tr>
            <td height='20' align='center' valign='middle'></td>
          </tr>
          <tr>
            <td align='center' valign='middle' class='bodytext'><table width='100%' border='0' align='center' cellpadding='0' cellspacing='0'>
              <tr>
                <td valign='top' style='border-top:2px solid #FF7D0F'>&nbsp;</td>
              </tr>
              <tr>
                <td align='left' valign='middle' class='bodytext'><p class='headingpink'><strong>Dear '$name'</strong></p>
                  <p>Congratulations  on your decision to become the newest member of <strong>'$referrer_name' </strong>Karmora Community!</p>
                  <p>Below you will  find important information about your new Karmora Webstore. Please print or save this email in a safe  location for future reference.</p>
                  <table width='400' border='0' cellspacing='0' cellpadding='5'>
                    <tr>
                      <td width='144'><strong><span class='bodytext'>Karmora  URL</span></strong></td>
                      <td width='256'><strong><span class='bodytext'><a href='#'>'$webstore'</a></span></strong></td>
                    </tr>
                    <tr>
                      <td><strong><span class='bodytext'>User  Name</span></strong></td>
                      <td><strong><span class='bodytext'>'$username'</span></strong></td>
                    </tr>
                    <tr>
                      <td><strong><span class='bodytext'>Password</span></strong></td>
                      <td><strong><span class='bodytext'>'$password'</span></strong></td>
                    </tr>
                  </table>
                  <p>Now  it's time for you to start building your own personal Karmora Community where  you can make money off the memberships and purchases of your Community  members!  Let&rsquo;s get this party started!</p>
                  <p class='headingpink'><strong>7 BABY STEPS TO GOOD KARMORA&#8482;:</strong></p>
                  <ol>
                    <li>Click on your Karmora URL and log in to your  back office to customize your Webstore. You will see 'Log In' in the upper right hand corner of your Webstore.</li>
                    <li>Click on the Profile button and upload your  picture while in the profile section. We  recommend recent pictures. Your  customers will want to know that it is your Webstore!</li>
                    <li>Go to the Training Section and watch the  Instructional Videos. You will find all  kinds of information to help you with your Karmora Webstore. </li>
                    <li>Click on the eWallet button and create your  eWallet. Instructions on how to do this  are found in the Training Section of your back office.</li>
                    <li>Use Go Daddy to secure a domain name for your  new Webstore and point the new domain to your Karmora Webstore URL above. Instructions on how to do this are found in  the Training Section of your back office </li>
                    <li>Make your first official Karmora purchase.</li>
                    <li>Start sharing your new Webstore with everyone  you speak to so they can begin a Karmora Community of their own. Once you have five active members in your  Karmora Community your Webstore is basically FREE!</li>
                  </ol>
                  <p>If you have  any questions please don&rsquo;t hesitate to contact <strong>'$referrer_name' </strong>by email at <a href='mailto:$referrer_email'>'$referrer_email'</a> or simply <u><a href='http://karmora.com/liveSupport'>click here</a></u> to chat with a  Good Karmora&#8482; Specialist seven days a week from 7am to 7pm Pacific Time. </p>
                  <p>As always we  wish you Good Luck, Good Fortune and Good Karmora&#8482;! </p>
                  <p>&nbsp;</p>
                  </td>
              </tr>
              <tr>
                <td align='left' valign='middle' style='border-bottom:2px solid #FF7D0F'>&nbsp;</td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td align='center' valign='middle' class='bodytext'>&nbsp;</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td width='50%' height='70' align='center' valign='middle' bgcolor='#000000' class='footertextwhite' style='border-top:2px solid #de3277; border-bottom: 2px solid #de3277'><table width='90%' border='0' cellspacing='0' cellpadding='0'>
          <tr>
            <td height='40' align='left' valign='middle'><a href='http://karmora.com/contact' class='a1'>Contact Us<br />
            </td>
          </tr>
        </table></td>
        <td width='50%' height='70' align='center' valign='middle' bgcolor='#000000' class='footertextwhite' style='border-top:2px solid #de3277; border-bottom: 2px solid #de3277'><table width='90%' border='0' cellspacing='0' cellpadding='0'>
          <tr>
            <td height='40' align='right' valign='middle'><a href='http://www.karmora.com/liveSupport/'><img src='".$this->theme_baseurl."/images/live_support_icon_03.png' width='110' height='32' /></a><br />
              <span class='footertext'>&copy; 2013 Karmora</span></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan='2' align='center' valign='top'>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>";
        
                
        mail($recipient, $subject, $message,$headers);

Solution

  • You can put your styles inline in your elements

    <p style="color:#000">...</p>
    

    And you should use the PHP header

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