tengo un problema y es que tengo un apartado en mi Web que permite al cliente, dejar opiniones, otro que permite dejar el curriculum, y otro que permite la solicitud de un presupuesto. El caso es que con php mailer desde la web envio a mi correo pues toda la información "en feo" y funciona perfectamente, pero si mando un mail al cliente como el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml" style="line-height: inherit;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<meta content="width=device-width" name="viewport" />
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--[if !mso]><!-->
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<!--<![endif]-->
<title></title>
<!--[if !mso]><!-->
<!--<![endif]-->
<style>@font-face {
font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local('Montserrat Regular'), local('Montserrat-Regular'), url('https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf') format('truetype');
}
body {
margin: 0; padding: 0;
}
/*Social links*/
.social ul {
list-style: none;
}
.social ul a {
display: inline-block;
color:#fff;
background: #000;
padding: 10px 15px;
text-decoration: none;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}
/* Establecemos los colores de cada red social, aprovechando su class */
.social ul .fa-twitter {background: #00abf0;}
.social ul .fa-instagram {background: #bc2a8d;}
.social ul .fa-facebook {background:#3b5999;}
.social ul .fa-envelope {background: #ff1a1a;}
@media only screen and (min-width: 755px) {
.block-grid {
width: 735px !important;
}
.block-grid .col {
vertical-align: top;
}
.block-grid .col.num12 {
width: 735px !important;
}
.block-grid.mixed-two-up .col.num3 {
width: 183px !important;
}
.block-grid.mixed-two-up .col.num4 {
width: 244px !important;
}
.block-grid.mixed-two-up .col.num8 {
width: 488px !important;
}
.block-grid.mixed-two-up .col.num9 {
width: 549px !important;
}
.block-grid.two-up .col {
width: 367px !important;
}
.block-grid.three-up .col {
width: 245px !important;
}
.block-grid.four-up .col {
width: 183px !important;
}
.block-grid.five-up .col {
width: 147px !important;
}
.block-grid.six-up .col {
width: 122px !important;
}
.block-grid.seven-up .col {
width: 105px !important;
}
.block-grid.eight-up .col {
width: 91px !important;
}
.block-grid.nine-up .col {
width: 81px !important;
}
.block-grid.ten-up .col {
width: 73px !important;
}
.block-grid.eleven-up .col {
width: 66px !important;
}
.block-grid.twelve-up .col {
width: 61px !important;
}
}
@media (max-width: 755px) {
.block-grid {
min-width: 320px !important; max-width: 100% !important; display: block !important;
}
.col {
min-width: 320px !important; max-width: 100% !important; display: block !important;
}
.block-grid {
width: 100% !important;
}
.col {
width: 100% !important;
}
.col>div {
margin: 0 auto;
}
img.fullwidth {
max-width: 100% !important;
}
img.fullwidthOnMobile {
max-width: 100% !important;
}
.no-stack .col {
min-width: 0 !important; display: table-cell !important;
}
.no-stack.two-up .col {
width: 50% !important;
}
.no-stack .col.num4 {
width: 33% !important;
}
.no-stack .col.num8 {
width: 66% !important;
}
.no-stack .col.num4 {
width: 33% !important;
}
.no-stack .col.num3 {
width: 25% !important;
}
.no-stack .col.num6 {
width: 50% !important;
}
.no-stack .col.num9 {
width: 75% !important;
}
.video-block {
max-width: none !important;
}
.mobile_hide {
min-height: 0px; max-height: 0px; max-width: 0px; display: none; overflow: hidden; font-size: 0px;
}
.desktop_hide {
display: block !important; max-height: none !important;
}
}
</style></head>
<body class="clean-body" style="-webkit-text-size-adjust: 100%; line-height: inherit; margin: 0; padding: 0;" bgcolor="#E15E49">
<table bgcolor="#E15E49" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="table-layout: fixed; vertical-align: top; min-width: 320px; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; line-height: inherit; margin: 0 auto;" valign="top" width="100%">
<tbody style="line-height: inherit;" id="prueba">
<tr style="vertical-align: top; border-collapse: collapse; line-height: inherit;" valign="top">
<td style="word-break: break-word; border-collapse: collapse; line-height: inherit;" valign="top">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color:#E15E49"><![endif]-->
<div style="background-color: transparent; line-height: inherit;">
<div class="block-grid" data-body-width-father="735px" rel="col-num-container-box-father" style="min-width: 320px; max-width: 735px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #555555; line-height: inherit; margin: 0 auto;">
<div style="border-collapse: collapse; display: table; width: 100%; background-color: #555555; line-height: inherit;">
<div class="col num12" data-body-width-son="735" rel="col-num-container-box-son" style="min-width: 320px; max-width: 735px; display: table-cell; vertical-align: top; line-height: inherit;">
<div style="width: 100% !important; line-height: inherit;">
<div style="line-height: inherit;"></div>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
</div>
</div>
</div>
<div style="background-color: transparent; line-height: inherit;">
<div class="block-grid" data-body-width-father="735px" rel="col-num-container-box-father" style="min-width: 320px; max-width: 735px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #FFFFFF; line-height: inherit; margin: 0 auto;">
<div style="border-collapse: collapse; display: table; width: 100%; background-color: #FFFFFF; line-height: inherit;">
<div class="col num12" data-body-width-son="735" rel="col-num-container-box-son" style="min-width: 320px; max-width: 735px; display: table-cell; vertical-align: top; line-height: inherit;">
<div style="width: 100% !important; line-height: inherit;">
<div style="line-height: inherit;"></div>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<div style="background-color: transparent; line-height: inherit;">
<div class="block-grid" data-body-width-father="735px" rel="col-num-container-box-father" style="min-width: 320px; max-width: 735px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #FFFFFF; line-height: inherit; margin: 0 auto;">
<div style="border-collapse: collapse; display: table; width: 100%; background-color: #FFFFFF; line-height: inherit;">
<div class="col num12" data-body-width-son="735" rel="col-num-container-box-son" style="min-width: 320px; max-width: 735px; display: table-cell; vertical-align: top; line-height: inherit;">
<div style="width: 100% !important; line-height: inherit;
<div style="color: #0D0D0D; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; line-height: 120%; padding: 10px;">
<div style="line-height: 14px; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; font-size: 12px; color: #0D0D0D;">
<p style="line-height: 33px; font-size: 12px; margin: 0;" align="center"><span style="font-size: 28px; line-height: inherit;"><strong style="line-height: inherit;"><span style="line-height: 33px; font-size: 28px;">Username,</span></strong></span><br style="line-height: inherit;" /><span style="font-size: 28px; line-height: 33px;">Hemos recibido su solicitud</span></p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<div align="center" class="img-container center autowidth" style="line-height: inherit;">
</div>
<div style="color: #555555; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; line-height: 150%; padding: 10px;">
<div style="font-size: 12px; line-height: 18px; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; color: #555555;">
<p style="font-size: 14px; line-height: 21px; margin: 0;" align="center">Gracias por confiar en nosotros!</p>
<p style="font-size: 14px; line-height: 21px; margin: 0;" align="center"><strong style="line-height: inherit;"><span style="color: #ec4d34; font-size: 14px; line-height: 21px;">Vamos a ponernos en marcha con tu presupuesto personalizado</span></strong></p>
</div>
</div>
<div style="color: #0D0D0D; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; line-height: 150%; padding: 20px 10px 10px;">
<div style="font-size: 12px; line-height: 18px; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; color: #0D0D0D;">
<p style="font-size: 14px; line-height: 21px; margin: 0;" align="left"><span style="color: #ec4d34; font-size: 14px; line-height: 21px;"><strong style="line-height: inherit;">Estos son los datos para tu presupuesto:</strong></span></p>
<ul style="line-height: inherit;">
<li style="font-size: 12px; line-height: 18px;">Nombre:</li>
<li style="font-size: 12px; line-height: 18px;">Email:</li>
<li style="font-size: 12px; line-height: 18px;">Teléfono:</li>
<li style="font-size: 12px; line-height: 18px;">Plazas necesarias:</li>
<li style="font-size: 12px; line-height: 18px;">Fecha Inicio:</li>
<li style="font-size: 12px; line-height: 18px;">Fecha Fin:</li>
<li style="font-size: 12px; line-height: 18px;">Origen:</li>
<li style="font-size: 12px; line-height: 18px;">Destino:</li>
<li style="font-size: 12px; line-height: 18px;">Observaciones:</li>
</ul>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" class="divider" role="presentation" style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; min-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: inherit;" valign="top" width="100%">
<tbody style="line-height: inherit;">
<tr style="vertical-align: top; border-collapse: collapse; line-height: inherit;" valign="top">
<td class="divider_inner" style="word-break: break-word; min-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; line-height: inherit; padding: 30px 10px 10px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content" height="0" role="presentation" style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-top-width: 0px; border-top-color: transparent; border-top-style: solid; height: 0px; line-height: inherit;" valign="top" width="100%">
<tbody style="line-height: inherit;">
<tr style="vertical-align: top; border-collapse: collapse; line-height: inherit;" valign="top">
<td height="0" style="word-break: break-word; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; line-height: inherit;" valign="top"><span style="line-height: inherit;"></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
</div>
</div>
</div>
<div style="background-color: transparent; line-height: inherit;">
<div class="block-grid" data-body-width-father="735px" rel="col-num-container-box-father" style="min-width: 320px; max-width: 735px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #FFFFFF; line-height: inherit; margin: 0 auto;">
<div style="border-collapse: collapse; display: table; width: 100%; background-color: #FFFFFF; line-height: inherit;">
<div class="col num12" data-body-width-son="735" rel="col-num-container-box-son" style="min-width: 320px; max-width: 735px; display: table-cell; vertical-align: top; line-height: inherit;">
<div style="width: 100% !important; line-height: inherit;">
<!--[if (!mso)&(!IE)]><!-->
<div style="line-height: inherit; padding: 5px 0px; border: 0px solid transparent;">
<!--<![endif]-->
</div>
</div>
</div>
<div style="background-color: transparent; line-height: inherit;">
<div class="block-grid mixed-two-up" data-body-width-father="735px" rel="col-num-container-box-father" style="min-width: 320px; max-width: 735px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #525252; line-height: inherit; margin: 0 auto;">
<div style="border-collapse: collapse; display: table; width: 100%; background-color: #525252; line-height: inherit;">
<div class="col num3" data-body-width-son="183" rel="col-num-container-box-son" style="display: table-cell; vertical-align: top; max-width: 320px; min-width: 183px; line-height: inherit;">
<div style="width: 100% !important; line-height: inherit;">
<!--[if (!mso)&(!IE)]><!-->
<div style="line-height: inherit; padding: 5px 0px; border: 0px solid transparent;">
<!--<![endif]-->
<div class="social">
<span>Redes sociales</span><br>
<ul>
<a target="_blank" class="fa fa-facebook fa-fw" title="Facebook" style="font-size: 10px"></a>
<a target="_blank" class="fa fa-twitter fa-fw" title="Twitter" style="font-size: 10px"></a><br>
<a target="_blank" class="fa fa-instagram fa-fw" title="Instagram" style="font-size: 10px"></a>
<a href="" class="fa fa-envelope fa-fw" title="Mail" style="font-size: 10px"></a>
</ul>
</div>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<div class="col num9" data-body-width-son="551" rel="col-num-container-box-son" style="display: table-cell; vertical-align: top; min-width: 320px; max-width: 549px; line-height: inherit;">
<div style="width: 100% !important; line-height: inherit;">
<!--[if (!mso)&(!IE)]><!-->
<div style="line-height: inherit; padding: 5px 0px; border: 0px solid transparent;">
<!--<![endif]-->
<div style="color: #FFFFFF; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; line-height: 150%; padding: 10px;">
<div style="font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; font-size: 12px; line-height: 18px; color: #FFFFFF;">
<p style="font-size: 12px; line-height: 21px; margin: 0;"><span style="color: #ffffff; font-size: 14px; line-height: inherit;">Ademas puedes encontrarnos en: </span><span style="color: #ffffff; font-size: 14px; line-height: 21px;"></span></p>
<p style="font-size: 12px; line-height: 21px; margin: 0;"><span style="color: #ffffff; font-size: 14px; line-height: inherit;"> <a href="" rel="noopener" style="text-decoration: none; color: #FFFFFF; line-height: inherit;" target="_blank">Nuestra Web</a></span></p>
<p style="font-size: 12px; line-height: 21px; margin: 0;"><span style="color: #ffffff; font-size: 14px; line-height: inherit;"> Dirección: </span></p>
<p style="font-size: 12px; line-height: 21px; margin: 0;"><span style="color: #ffffff; font-size: 14px; line-height: inherit;"> Teléfono: </span></p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<div style="background-color: transparent; line-height: inherit;">
<div class="block-grid" data-body-width-father="735px" rel="col-num-container-box-father" style="min-width: 320px; max-width: 735px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: transparent; line-height: inherit; margin: 0 auto;">
<div style="border-collapse: collapse; display: table; width: 100%; background-color: transparent; line-height: inherit;">
<div class="col num12" data-body-width-son="735" rel="col-num-container-box-son" style="min-width: 320px; max-width: 735px; display: table-cell; vertical-align: top; line-height: inherit;">
<div style="width: 100% !important; line-height: inherit;">
<!--[if (!mso)&(!IE)]><!-->
<div style="line-height: inherit; padding: 0px 0px 5px; border: 0px solid transparent;">
<!--<![endif]-->
<div align="center" class="img-container center fullwidthOnMobile fixedwidth" style="padding-right: 0px; padding-left: 0px; line-height: inherit;">
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="center"><![endif]--><img align="center" alt="Image" border="0" class="center fullwidthOnMobile fixedwidth" src="images/rounder-dwn.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; clear: both; height: auto; width: 100%; max-width: 735px; display: block; line-height: inherit; border: 0;" title="Image" width="735" />
<!--[if mso]></td></tr></table><![endif]-->
</div>
<table border="0" cellpadding="0" cellspacing="0" class="divider" role="presentation" style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; min-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: inherit;" valign="top" width="100%">
<tbody style="line-height: inherit;">
<tr style="vertical-align: top; border-collapse: collapse; line-height: inherit;" valign="top">
<td class="divider_inner" style="word-break: break-word; min-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; line-height: inherit; padding: 30px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content" height="0" role="presentation" style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-top-width: 0px; border-top-color: transparent; border-top-style: solid; height: 0px; line-height: inherit;" valign="top" width="100%">
<tbody style="line-height: inherit;">
<tr style="vertical-align: top; border-collapse: collapse; line-height: inherit;" valign="top">
<td height="0" style="word-break: break-word; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; line-height: inherit;" valign="top"><span style="line-height: inherit;"></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if (IE)]></div><![endif]-->
</body>
</html>
que es una plantilla rellenada por internet, pues en local se ve bien, pero cuando la recibo por correo se ve sin formato, las tildes no se ven, las imagenes no se ven("esto si es porque no las encuentra en el directorio"), pero lo demas no se porque sucede, me podeis ayudar a arreglar esta plantilla, o recomendarme algun sitio para hacer una?, y como puedo lograr que me rellene los datos con los datos que el cliente ha rellenado antes de enviarlo?