title: How can i properly style PHP mailed text from web form?
body: <p>I have this web contact page i am working on, but when sending emails, it arrives in plain text but i would like to add a background and an organization logo on top and style the text to fit the website's flat design. I been having trouble getting around this so i am here as a last resort.</p>
  
  <p>Anyone have a proper way of accomplishing this ?</p>
  
  <p>Here is a screenshot of how i am trying to accomplish this when received thru an email. (The organization needs to see this in their mailbox either on iPhone or mac email client.)
  <img src="https://i.stack.imgur.com/9WXeA.png" alt="enter image description here"></p>
  
  <p>Here is the basic code i have at the moment which spits out the plain text:</p>
  
  <pre><code>&lt;?php
  
  
   $field_name = $_POST['name'];
   $field_email = $_POST['email'];
   $field_message = $_POST['message'];
  
   header("Location: contact-thanks.php"); ## important redirect page
  
  
   $mail_to = 'DESIGNATED_EMAIL'; ## Organization's receiving email
   $subject = 'Message from an a Visitor '.$field_name;
  
   $body_message = '&lt;!DOCTYPE html&gt;
   &lt;html&gt;
         &lt;head&gt;
         &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
         &lt;/head&gt;
  
    &lt;body style="margin:0px; padding:0px; background:#f7f7f7;"&gt;
    &lt;div style="display:block; margin:auto; width:750px;background:#2C3E50; border-bottom: solid 2px #2C3E50;"&gt;
    &lt;div style="display:block; width:750px; margin:auto;"&gt;
    &lt;span style="color:#fff;padding:5px 10px;display:block;font-size:22px;"&gt;From: Johny,&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div style="width:750px; margin: auto; background:#fff; min-height: 100px;"&gt;
    &lt;div style="text-align: left;display: block;width: 500px;padding: 50px; padding-bottom:30px;font-size: 14px;color: #666; margin:auto;"&gt;
    &lt;div style="color:inherit;display:block;width:100%;margin:10px 0;line-height:24px;font-size:18px;color:#333"&gt;Hi,&lt;/div&gt;
    &lt;div style="color:inherit;display:block;width:100%;margin:10px 0;line-height:24px"&gt;Thank you for visiting us..&lt;span style="color:#111;font-weight:600;display:block;"&gt;This is an example that how we formatted our email in php.&lt;/span&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="border-top:solid 1px #ddd; text-align:left;font-size:14px;color:#888;padding-top:5px;padding-bottom:2px;padding-left:10px;"&gt;&amp;copy; exampleOrganization.org&lt;/div&gt;
    &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;';
  
    $body_message = 'From: '.$field_name."\n";
    $body_message .= 'E-mail: '.$field_email."\n";
    $body_message .= 'Message: '.$field_message;
  
    $headers = 'From: '.$field_email."\r\n";
    $headers .= 'Reply-To: '.$field_email."\r\n";
  
    $mail_status = mail($mail_to, $subject, $body_message, $headers);
  
    if ($mail_status) 
    { 
       echo "Message was sent";   
    }
    else { 
         echo "ERROR";
    }
    ?&gt;
  </code></pre>
  
  <p>The <code>$body_message;</code> variable basically holds the entire screenshot and i figured if this would work, but i wouldn't know how to then make the three variables <code>$field_name;</code>, <code>$field_email</code> and <code>$field_message</code> write the content onto the <code>$body_message;</code> variable</p>
  
  <p>Anyone can shed me some light to accomplish this last task?</p>