Where do I format my html email?

Question

So I have designed a website that Ill be hosting very soon. Everything works including forms. However, When a user sends me emails through the form, the email formatting is very ugly.I want to design my emails, something like this:

https://cdn.tutsplus.com/webdesign/uploads/2013/06/21.png

So when I send an email to my client, it should somewhat look attractive like above.

My question is, where do I code the design of the HTML email? Do I do that in my index.html, where my website content is there? But that doesn't make sense?

Do I create a new HTML file and do the code there? and how do i do it?

Thanks in advance

Answer 1

From a plain ugly mail moving to the "right formatted" template mails is a big jump.

You need to tell what you are using to send the mail. Are you using any frameworks or is it just PHP?

To send mails in HTML format, use the below as part of the headers:

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

Are you already sending mails in HTML Format and just need help on formatting the HTML? Just remember that most of the email clients and email providers don't support external css files. Gmail even removes the CSS Styles at the head of the HTML. Your safest place for CSS styles will be inline using "Style" tag.

For the fancy formatting, I think the safe way to go is to use Tables (and nested tables if need be) most of the email clients and email providers remove the Div tags also.

If you are using PHPMailer then you can save the HTML code into a variable and assign it to the Body like given below:

$mail->Body = "<!-- your html code goes here -->;

As was mentioned by Els Den Lep, there is no way to guarantee that your mail will appear in the format you want in all the email providers / client. However, if you use a combination of Tables, inline CSS you can be fairly sure of a robust display (very close to what you want).

An inelegant hack will be to convert your HTML as an image and use utilities like GIMP or Photoshop to convert it into an HTML using the slice option. This can be especially useful if you are having a large image where you need to give links to specific areas of the image.

Answer 2

Supposing that the file that handles the sending of your email is called sendmail.php, you can do the styling in your sendmail.php as inline css like so:

$message = 'Contact form.<br />';
$message .= 'Subject:<br />';
$message .= "<h1 style=\"color:blue;margin-left:30px;\">This is a heading.</h1><br />";