Отправка писем с сайта

primitiv

Приветствую всех, решил организовать отправку письма о новом заказе с сайта на почту уполномоченному принимать данные письма, всё хорошо, письма отправляются, но вот стили нет, питаюсь оформить письмо красивым образом, в конечном итоге в письме выводиться

Скриншот 25-03-2021 235243.jpg

вся html структура. Подскажите пожалуйста в чём моя ошибка, вроде всё делаю по инструкции.

Вот html:

HTML:
  1.  
  2. <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
  3.     <meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» />
  4.     <title>Logo</title>
  5.     <style type=«text/css»>
  6.         html {
  7.             -webkit-text-size-adjust: none;
  8.             -ms-text-size-adjust: none;
  9.         }
  10.  
  11.         @media only screen and (min-device-width: 660px) {
  12.             .table660 {
  13.                 width: 660px !important;
  14.             }
  15.         }
  16.  
  17.         @media only screen and (max-device-width: 660px), only screen and (max-width: 660px) {
  18.             .table660 {
  19.                 width: 100% !important;
  20.             }
  21.  
  22.             .mob-radius-right {
  23.                 border-radius: 0 3px 3px 0;
  24.             }
  25.  
  26.             .mob-radius-left {
  27.                 border-radius: 3px 0 0 3px;
  28.                 border-left: 1px solid #ebebeb !important;
  29.             }
  30.         }
  31.  
  32.         .table660 {
  33.             width: 660px;
  34.         }
  35.     </style>
  36. </head>
  37. <body style=«margin: 0; padding: 0;»>
  38.  
  39.     <span class=«preheader» style=«display: none !important; visibility: hidden; opacity: 0; color: #fff; height: 0; width: 0; font-size: 1px;»>Прехедер</span>
  40.  
  41.     <table cellpadding=«0» cellspacing=«0» border=«0» width=«100%» style=«font-size: 1px; line-height: normal;»>
  42.         <tr>
  43.             <td align=«center» bgcolor=«#ffffff» style=«background-color: #ffffff;»>
  44.                 <!—[if (gte mso 9)|(IE)]>
  45.                <table cellpadding=»0″ cellspacing=»0″ border=»0″ width=»660″><tr><td>
  46.                <![endif]—>
  47.                 <table cellpadding=«0» cellspacing=«0» width=«100%» border=«0» class=«table660» style=«max-width: 660px; min-width: 320px; width: 100%;»>
  48.                     <tr>
  49.                         <td align=«center» valign=«top»>
  50.                             <div style=«height: 45px; line-height: 45px; font-size: 43px»>&nbsp;</div>
  51.                             <a href=«» target=«_blank»><img src=«https://imgems.ru/ems/091219/logo.png» height=«64» width=«145» border=«0» alt=«» style=«display: inline-block» /></a>
  52.                             <div style=«height: 45px; line-height: 45px; font-size: 43px»>&nbsp;</div>
  53.                             <div style=«height: 1px; line-height: 1px; font-size: 1px; border-top-width: 1px; border-top-style: solid; border-top-color: #e6e6e6»>&nbsp;</div>
  54.                             <table cellpadding=«0» cellspacing=«0» border=«0» width=«87.9%» align=«center» style=«margin: 0 auto; max-width: 87.9%; min-width: 87.9%;»>
  55.                                 <tr>
  56.                                     <td>
  57.                                         <div style=«height: 50px; line-height: 50px; font-size: 48px»>&nbsp;</div>
  58.                                         <div align=«center»>
  59.                                             <span style=«font-family: Arial, sans-serif; font-size: 28px; line-height: 38px; color: #191919;»>Проверьте, актуальны&nbsp;ли ваши данные в&nbsp;анкете на&nbsp;VALAR MARGULIS.RU.</span>
  60.                                             <div style=«height: 20px; line-height: 20px; font-size: 18px»>&nbsp;</div>
  61.                                             <span style=«font-family: Arial, sans-serif; font-size: 20px; line-height: 30px; color: #999999;»>Укажите полную информацию о&nbsp;себе и&nbsp;вам не&nbsp;придется заполнять поля при оформлении заказа каждый раз&nbsp;&mdash; ваши имя, адрес доставки подставятся автоматически.</span>
  62.                                         </div>
  63.                                         <div style=«height: 35px; line-height: 35px; font-size: 33px»>&nbsp;</div>
  64.                                         <div>
  65.                                             <!—[if mso]>
  66.                                            <v:rect xmlns:v=»urn:schemas-microsoft-com:vml» xmlns:w=»urn:schemas-microsoft-com:office:word» href=»http://» style=»height: 68px; v-text-anchor: middle; width: 580px;» strokecolor=»#303030″ fillcolor=»#303030″>
  67.                                            <w:anchorlock/>
  68.                                            <center style=»color:#ffffff; font-family: Arial, sans-serif; font-size: 17px;»>Открыть личный кабинет</center>
  69.                                            </v:rect>
  70.                                            <![endif]—>
  71.                                             <a href=«» style=«background-color: #303030; color: #ffffff; display: inline-block; font-family: Arial, sans-serif; font-size: 17px; line-height: 70px; text-align: center; text-decoration: none; width: 100%; -webkit-text-size-adjust: none; mso-hide: all; background: #303030; border-radius: 4px;»>Открыть личный кабинет</a>
  72.                                         </div>
  73.                                         <div style=«height: 40px; line-height: 40px; font-size: 38px»>&nbsp;</div>
  74.                                         <div style=«height: 1px; line-height: 1px; font-size: 1px; border-top-width: 1px; border-top-style: dotted; border-top-color: #ececec»>&nbsp;</div>
  75.                                         <div style=«height: 15px; line-height: 15px; font-size: 13px»>&nbsp;</div>
  76.                                         <span style=«font-family: Arial, sans-serif; font-size: 15px; line-height: 22px; color: #999999;»>Хороших покупок,<br />ваш VALAR MARGULIS</span>
  77.                                         <div style=«height: 25px; line-height: 25px; font-size: 23px»>&nbsp;</div>
  78.                                         <div style=«height: 1px; line-height: 1px; font-size: 1px; border-top-width: 2px; border-top-style: solid; border-top-color: #e6e6e6»>&nbsp;</div>
  79.                                         <div style=«height: 45px; line-height: 45px; font-size: 43px»>&nbsp;</div>
  80.                                         <table cellpadding=«0» cellspacing=«0» border=«0» align=«center» style=«margin: 0 auto;»>
  81.                                             <tr>
  82.                                                 <td width=«27»>
  83.                                                     <a href=«» target=«_blank»><img src=«https://imgems.ru/ems/templates/vk.png» width=«27» height=«19» border=«0» alt=«» style=«display: block» /></a>
  84.                                                 </td>
  85.                                                 <td width=«50»>&nbsp;</td>
  86.                                                 <td width=«27»>
  87.                                                     <a href=«» target=«_blank»><img src=«https://imgems.ru/ems/templates/ig.png» width=«27» height=«19» border=«0» alt=«» style=«display: block» /></a>
  88.                                                 </td>
  89.                                                 <td width=«50»>&nbsp;</td>
  90.                                                 <td width=«27»>
  91.                                                     <a href=«» target=«_blank»><img src=«https://imgems.ru/ems/templates/fb.png» width=«27» height=«19» border=«0» alt=«» style=«display: block» /></a>
  92.                                                 </td>
  93.                                                 <td width=«50»>&nbsp;</td>
  94.                                                 <td width=«27»>
  95.                                                     <a href=«» target=«_blank»><img src=«https://imgems.ru/ems/templates/ok.png» width=«27» height=«19» border=«0» alt=«» style=«display: block» /></a>
  96.                                                 </td>
  97.                                             </tr>
  98.                                         </table>
  99.                                         <div style=«height: 35px; line-height: 35px; font-size: 33px»>&nbsp;</div>
  100.                                         <div align=«center»>
  101.                                             <span style=«font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; color: #999999;»>Вы&nbsp;получили данное письмо, так как подписались на&nbsp;рассылку <a href=«» target=«_blank» style=«font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; color: #999999; text-decoration: none;»>emailsoldiers.ru</a>.</span>
  102.                                             <div style=«height: 5px; line-height: 5px; font-size: 3px»>&nbsp;</div>
  103.                                             <a href=«» target=«_blank» style=«font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; color: #191919; text-decoration: none;»>Отписаться от рассылки</a>
  104.                                             <div style=«height: 30px; line-height: 30px; font-size: 28px»>&nbsp;</div>
  105.                                             <span style=«font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; color: #999999;»>Разработано в <a href=«» target=«_blank» style=«font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; color: #191919; text-decoration: none;»>Email Soldiers</a></span>
  106.                                         </div>
  107.                                         <div style=«height: 45px; line-height: 45px; font-size: 43px»>&nbsp;</div>
  108.                                     </td>
  109.                                 </tr>
  110.                             </table>
  111.                         </td>
  112.                     </tr>
  113.                 </table>
  114.                 <!—[if (gte mso 9)|(IE)]>
  115.                </td></tr></table>
  116.                <![endif]—>
  117.             </td>
  118.         </tr>
  119.     </table>
  120. </body>
  121. </html>
  122.  

А это PHP:

Код (Text):
  1.  
  2. //Присваиваю html код переменной
  3. $data=»HTML код»;
  4.  
  5. //Функция отправки письма
  6. mail(«m***iosif@yandex.ru», «Тест», $data);

Заранее Благодарю всех

 

miketomlin

primitiv

Писал, не помогает, это я готовый шаблон скачал в надежде по нему разобраться и понять как верстать письма, но и он не сработал

 

miketomlin

И весь ввод кодируешь в HTML, а то какую-нибудь бяку могут подсунуть ;)
— Добавлено —
Ну, Mля, какие media-запросы в письмах!

 

primitiv

Прочёл и попробовал, не срабатывает и всё, может я рукожопый, просмотри пожалуйста php код, что я делаю не правильно?

Код (Text):
  1.  
  2.     $to=’maharadzeiosif@yandex.ru’;
  3.     $subject=»=?utf-8?B?».base64_encode(‘Тест’).’?=’;
  4.     $message=chunk_split(base64_encode(‘
  5.     <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
  6.     <html lang=»en»>
  7.     <head>
  8.         <meta charset=»UTF-8″>
  9.         <title>Document</title>
  10.     </head>
  11.     <body>
  12.         <div style=»display: block;width: 90vw;border-radius: 5px;border: #FF7A00 1px;height: 150px;font-family: Arial, Helvetica, sans-serif;»></div>
  13.     </body>
  14.     </html>
  15.     ‘));
  16.     $headers=»MIME-Version: 1.0″.»rn».
  17.              ‘Content-Transfer-Encoding: base64’.»rn».
  18.              ‘Content-Type: text/plain; charset=utf-8’;
  19.    
  20.     mail($to,$subject,$message,$headers);
 

miketomlin

Или слепой?
Для форматирования текста письма можно разместить в нем нужные HTML-теги и указать в последнем заголовке text/html вместо text/plain.

 

primitiv

Паходу да, такой спешкой всё прочёл что и не понял, спасибо тебе, дал фонарик слепому

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *