Reputation: 9295

How to send an email that has html and css in php

when I am sending an email via PHP mail functon (I put this html code in one line and add it to the message), lets say this what I want to send:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
        .box h3{
                text-align:right;
                position:relative;
                direction: rtl;
        }
        .box {
                width:70%;
                top:80px;
                height:200px;
                background: whitesmoke;
                margin:40px auto;
                text-align:right;
                direction: rtl;
        }
        /*==================================================
         * Effect 2
         * ===============================================*/
        .effect2
        {
                position: relative;
        }
        .effect2:before, .effect2:after
        {
                z-index: -1;
                position: absolute;
                content: "";
                bottom: 15px;
                left: 10px;
                width: 50%;
                top: 80%;
                max-width:300px;
                background: #777;
                -webkit-box-shadow: 0 15px 10px #777;
                -moz-box-shadow: 0 15px 10px #777;
                box-shadow: 0 15px 10px #777;
                -webkit-transform: rotate(-3deg);
                -moz-transform: rotate(-3deg);
                -o-transform: rotate(-3deg);
                -ms-transform: rotate(-3deg);
                transform: rotate(-3deg);
        }
        .effect2:after
        {
                -webkit-transform: rotate(3deg);
                -moz-transform: rotate(3deg);
                -o-transform: rotate(3deg);
                -ms-transform: rotate(3deg);
                transform: rotate(3deg);
                right: 10px;
                left: auto;
        }
        </style>
    </head>
    <body>
        <div class="box effect2">
            <b>שלום,</b>
            <p>
                אנא לחץ על הקישור המצורף ע"מ לאשר את התחברותך לאתרץ
            </p>
            <p>
                הלינק הוא:
            </p>
            <b>
                תודה מראש,
            </b>
            <p><b>
                צוות האתר
                </b></p>

        </div>
    </body>
</html>

I want to send it via php. When I send this email I am getting the email with it tags and not styled as I wanted.

Thanks

Upvotes: 1

Answers (4)

eMythMakers.com

Reputation: 19

Email client doesn't support CSS. So try to write inline CSS as below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="margin:0;padding:0;border=0;font-size:14px;font-family:YOUR_FONT_FAMILY_NAME">
<div style="position:relative;">
<h3 style="text-align:right;position:relative;direction:rtl;">This is heading 3</h3>
<b>שלום,</b>
<p>אנא לחץ על הקישור המצורף ע"מ לאשר את התחברותך לאתרץ</p>
<p>הלינק הוא:</p>
<b>תודה מראש,</b>
<p><b>צוות האתר</b></p>
</div>
</body>
</html>

Upvotes: 1

dzogchen

Reputation: 383

HTML emails that appear to the receiver as you intended them to appear are not simple. They are more like late '90s html. Styles should be inlined, and you should use tables for layout. Backgrounds don't work reliably on many clients, and for sure you test on a variety of clients because html will vary WILDLY between various clients.

Bonus: forget about javascript / jQuery and the like....

Also, don't count on being able to display CSS3 and html5 elements etc. MANY clients have no support. Outlook doesn't even support margins very well, let alone all the css we have gotten used to. So keep it very simple, use tables for layout, test widely and don't think you will even get close to pixel-perfect.....

here is some help on universally supported html/css

Upvotes: 2