This is the thank you page I am trying to have someones name be displayed like "Thank you John, ..."
But i can't seem to have it post the name. my $first_name is in another php file
<?php include("email.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<base target="_blank">
<title>Mid-Night Designs</title>
<style type="text/css">
body *{font-family: 'Open Sans', Arial, sans-serif !important}
div, p, a, li, td { -webkit-text-size-adjust:none; }
*{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
td{word-break: break-word;}
a{word-break: break-word; text-decoration: none; color: inherit;}
body .ReadMsgBody
{width: 100%; background-color: #ffffff;}
body .ExternalClass
{width: 100%; background-color: #ffffff;}
body{width: 100%; height: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;}
html{ background-color:#ffffff; width: 100%;}
body p {padding: 0!important; margin-top: 0!important; margin-right: 0!important; margin-bottom: 0!important; margin-left: 0!important; }
body img {user-drag: none; -moz-user-select: none; -webkit-user-drag: none;}
body a.rotator img {-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; }
body a.rotator img:hover {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg); }
body .hover:hover {opacity:0.85;filter:alpha(opacity=85);}
body .jump:hover {opacity:0.75; filter:alpha(opacity=75); padding-top: 10px!important;}
body .logo img {width: 150px; height: auto;}
body .icon25 img {width: 25px; height: auto;}
body .icon18 img {width: 18px; height: auto;}
</style>
<style type="text/css">#media only screen and (max-width: 640px){
body body{width:auto!important;}
body table[class=full] {width: 100%!important; clear: both; }
body table[class=mobile] {width: 100%!important; padding-left: 30px; padding-right: 30px; clear: both; }
body table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body .erase {display: none;}
body .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
body td[class=pad20] {padding-left: 20px!important; padding-right: 20px!important; text-align: center!important; clear: both; }
}</style>
<style type="text/css">#media only screen and (max-width: 479px){
body body{width:auto!important;}
body table[class=full] {width: 100%!important; clear: both; }
body table[class=mobile] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
body table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body .erase {display: none;}
body .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
body td[class=pad20] {padding-left: 20px!important; padding-right: 20px!important; text-align: center!important; clear: both; }
}</style>
</head>
<body style='margin: 0; padding: 0;'>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center">
<table class="full" align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center" class="pad20">
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td width="100%" height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" width="100%" style="font-family: Helvetica, Arial, sans-serif, 'Open Sans'; color: #929292; font-weight: 400; font-size: 12px; line-height: 20px; text-align: center;">
<br>
</td>
</tr>
<tr>
<td width="100%" height="40" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" align="center" width="100%" class="logo" style="line-height: 1px; text-align: center;"></td>
</tr>
<tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; border-top-left-radius: 5px; border-top-right-radius: 5px;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tbody><tr>
<td align="center" class="pad20">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" width="100%" style="font-family: Helvetica, Arial, sans-serif, 'Open Sans'; color: #111111; font-weight: 800; font-size: 30px; line-height: 36px; text-align: center; text-transform: uppercase;">
Thank you!
</td>
</tr>
<tr>
<td width="100%" height="20" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 14px; text-align: center; line-height: 22px;" class="fullCenter">
<span style="color:#000000;"><span style="font-size:14px;"><strong>Thank you<?php echo $_POST['first_name'];?>
, for using our quote calculator. If you have any further questions feel free to contact us!</strong></span></span>
</td>
</tr>
<tr>
<td width="100%" height="20" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td align="center" class="pad20">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td valign="top" width="100%">
<table width="75" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
<tbody><tr>
<td valign="middle" align="center" width="30" class="fullCenter" style="line-height: 1px;"></td>
</tr>
</tbody></table>
<table width="15" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
<tbody><tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
<table width="350" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
<tbody><tr>
<td width="100%" style="color: #111111; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 700; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
Lorenzo Preciado
</td>
</tr>
<tr>
<td width="100%" style="color: #61b94d; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 600; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px text-transform: uppercase;" class="fullCenter">
<span style="color:#000000;">Web Designer & Developer </span>
</td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
Owner of Mid-Night Designs
</td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
+81 080-6499-4974 | help#mid-nightdesigns.com
</td>
</tr>
<tr>
<td width="100%" height="5" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" align="center" class="icon18">
<!-- Social Icons -->
<table width="120" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="buttonScale">
<tbody><tr>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td width="100%" valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile">
<tbody><tr>
<td align="center">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align: center;" class="fullCenter">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" style="color: #d2d2d2; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 12px; text-align: center; line-height: 24px;" class="fullCenter">
© Copyright - Mid-Nightd<span style="color:#FFFFFF;"></span>esigns.com
</td>
</tr>
<tr>
<td width="100%" style="color: #61b94d; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 12px; text-align: center; line-height: 24px;" class="fullCenter">
<br>
</td>
</tr>
<tr>
<td width="100%" height="50" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" height="1" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
This is the portion of the form
<label>
First Name
<input NAME="first_name" type="text" required="required" class="SV_validate" placeholder="First Name">
</label>
This is part of my email.php and it works, displaying the name in the email sent but doesn't work in the thank you.
$first_name = $_POST['first_name'];
PHP File that receives POST will be somewthing along the lines of
<?php
session_start();
$_SESSION['Name'] = $_POST['first_name'];
?>
Second File will be
<?php
session_start();
echo $_SESSION['Name'];
?>
Not recommended to do exactly that but that's the basis. You also can't set a session on the same page and call it on the same page.
Please check the simple scenario created for you, change the form action to thank-you.php file.
index.php
<form action="thank-you.php" method="post">
<input type="text" name="firstname">
<input type="text" name="email">
<input type="submit" name="contact" value="Contact">
</form>
thank-you.php
<?php
include_once('email.php');
$firstname = '';
if(isset($_POST['firstname'])) {
$firstname = $_POST['firstname'];
}
?>
<div class="message">Thank you for contacting - <?php echo $firstname;?></div>
email.php
<?php
if(isset($_POST['contact'])) {
$to = 'email#example.com';
$subject = 'Contact';
$message = 'Message';
if(mail($to,$subject,$message)) {
echo "mail sent";
}
}
?>
Related
What's up guys!
I have a problem and I can not think of a solution.
I need to make a report using DOMPDF.
In this report, i need to print some employee information. In each page it is necessary to have header for the signature of the person in charge.
I have a group of employees. They are divided by departments.
I need a "break the page" loop when I change the employee's department or when I print 15 employees. After that, the loop should print the rest of the employees and execute the same rules if you change the employee's department again or have already been printed 15 employees.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Relatório Geral</title>
<style>
body {
margin-top: -20px;
margin-left: -20px;
margin-right: -5px;
padding:0
}
.borda3 {
border:1px solid #999;
padding: 5px;
}
#borda2 td {
border: 1px solid #999;
border-collapse: collapse;
width: auto;
}
.centro {
text-align: center;
}
.tabela {
width: 100%;
}
span {
font-size: 100px;
}
td {
font-size: 11px;
}
html {
font-family: sans-serif;
}
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
text-align: center;
font-size: 9px;
}
#customers td {
text-align: left;
font-size: 10px;
}
#customers a {
font-size: 10px;
}
.nome{
width: 180px;
}
.matricula{
width: 15px;
}
.numeros{
width: 15px;
}
.logo{
padding-left: 50px;
}
.logo a strong{
font-size: 15px;
text-align: center;
}
.logo a{
font-size: 12px;
}
.assinatura{
font-size: 9px;
margin-left: 60px;
}
</style>
</head>
{{--beginning of the loop--}}
<body>
<table class="tabela borda3">
<tr>
<td width="40%" class="centro">
<table class="logo">
<tr>
<td>
<img style="margin-left:20px; margin-top: -20px;width:220px; height: 65px;" src="img/logo_sarh.jpg">
</td>
</tr>
<tr>
<td>
<label for=""><a><strong> </strong></a></label><br>
</td>
</tr>
<tr>
<td><a>Referência:</a></td>
</tr>
<tr>
<td><a>Período:</a></td>
</tr>
</table>
</td>
<td width="40%" class="centro">
<table class="assinatura">
<tr>
<td style="height: 30px; text-align: left"><label for="">Em: _____/ _____/___________</label></td>
</tr>
<tr>
<td style="padding-bottom: -20px; height: 50px; text-align: center">
<label for="">____________________________________________</label><br>
<label style="font-size: 10px" for=""> SUPERVISOR</label>
</td>
</tr>
<tr>
<td style="height: 30px; text-align: left"><label for="">VISTO</label></td>
</tr>
<tr>
<td style="padding-bottom: -10px; height: 50px; text-align: center">
<label for="">____________________________________________</label><br>
<label style="font-size: 10px" for=""> SECRETÁRIO(A)</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table id="customers">
<tr>
<th class="nome">Nome</th>
<th class="matricula">Matrícula</th>
<th class="numeros">Dias</th>
<th class="numeros">Faltas</th>
<th class="numeros">Vac</th>
<th class="numeros">LSV</th>
<th class="numeros">L M</th>
<th class="numeros">Aci. Trab</th>
<th class="numeros">Adi. Not</th>
<th class="numeros">H.E Normal D</th>
<th class="numeros">H.E Normal N</th>
<th class="numeros">H.E Dom/Fer. D</th>
<th class="numeros">H.E Dom/Fer. N</th>
<th class="numeros">Ins.</th>
</tr>
{{--beginning of the loop--}}
<tr>
<td style="height: 20px;"><a>Augusto Damasceno Pedrozo</a></td>
<td style="height: 20px;"><a>12345678</a></td>
<td style="height: 20px;"><a>30</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20</a></td>
</tr>
<tr>
<td style="height: 20px;" colspan="14">Observação:</td>
</tr>
{{--end of the loop--}}
</table>
</body>
{{--end of the loop--}}
</html>
Could anyone give me some direction to solve this?
I think you want something like this:
#foreach($customers as $customer)
#while ($loop->index <= 15)
<!-- build table row here -->
#endwhile
<!-- page break -->
#endforeach
in laravel there is a loop variable
this variable tracks the current index and some other things
you can check if the current index is smaller or equal to 15, perform page break, grab next, check if department is same as before, repeat
for the department changes you can set a variable which holds the current department and compare it in the loop like:
#if($current_dep !== $cust->department)
<!-- page break -->
#endif
don't forget to check for last record
#while(!$loop->last)
#endwhile
further information on the $loop variable: https://laravel.com/docs/5.7/blade#the-loop-variable
//send email
$to = $_POST['email'];
$subject = "Registration Confirmation";
$url="localhost/activate.php?x=$id&y=$activasion";
define('URL',"$url");
$body="<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* FONTS */
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px){
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
We are thrilled to have you here! Get ready to dive into your new account.
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#FFA73B" align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;">
<a href="localhost" target="_blank">
<img alt="Logo" src="logo.png">
</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#FFA73B" align="center" style="padding: 0px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
<h1 style="font-size: 48px; font-weight: 400; margin: 0;">Welcome!</h1>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">We are excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#FFA73B">Confirm Account</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">"If that does not work, copy and paste the following link in your browser:"</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">URL</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">If you have any questions, just reply to this email—we are always happy to help out.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<p style="margin: 0;">Cheers,<br>The Edutheon Team</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 30px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
<tr>
<td bgcolor="#FFECD1" align="center" style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
<h2 style="font-size: 20px; font-weight: 400; color: #111111; margin: 0;">Need more help?</h2>
<p style="margin: 0;">We’re here, ready to talk</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>"";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
$mail = new Mail();
$mail->isHTML(True)
$mail->setFrom(SITEEMAIL);
$mail->addAddress($to);
$mail->subject($subject);
$mail->body($body);
$mail->send();
how to do I send this email with phpmailer whenever i try to send it always return an error and i cannot use get_file_contents() because it contains variables dependent on variables please answer Thanks I think this problem arises due to "/' used in the html Using this code on xampp server and the it working on text email and not on the html plz help i need to complete my project.
You're using double quotation marks the define the $body variable, then using them throughout the value you set it to, causing the string reading to break.
I think reading this answer would help you a lot.
Literally replacing all " with \" inside the string should work (though if you have any legitimate uses of variables inside which I missed, I did not see them). Here would be the corrected code:
$body = <!DOCTYPE html>
html>
<head>
<title></title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
<style type=\"text/css\">
/* FONTS */
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px){
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*=\"margin: 16px 0;\"] { margin: 0 !important; }
</style>
</head>
<body style=\"background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;\">
<div style=\"display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;\">
We are thrilled to have you here! Get ready to dive into your new account.
</div>
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">
<tr>
<td bgcolor=\"#FFA73B\" align=\"center\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td align=\"center\" valign=\"top\" style=\"padding: 40px 10px 40px 10px;\">
<a href=\"localhost\" target=\"_blank\">
<img alt=\"Logo\" src=\"logo.png\">
</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor=\"#FFA73B\" align=\"center\" style=\"padding: 0px 10px 0px 10px;\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td bgcolor=\"#ffffff\" align=\"center\" valign=\"top\" style=\"padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;\">
<h1 style=\"font-size: 48px; font-weight: 400; margin: 0;\">Welcome!</h1>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor=\"#f4f4f4\" align=\"center\" style=\"padding: 0px 10px 0px 10px;\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato\", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">We are excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\">
<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td bgcolor=\"#ffffff\" align=\"center\" style=\"padding: 20px 30px 60px 30px;\">
<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td align=\"center\" style=\"border-radius: 3px;\" bgcolor=\"#FFA73B\">Confirm Account</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 0px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">\"If that does not work, copy and paste the following link in your browser:\"</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 20px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">URL</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 0px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">If you have any questions, just reply to this email—we are always happy to help out.</p>
</td>
</tr>
<tr>
<td bgcolor=\"#ffffff\" align=\"left\" style=\"padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<p style=\"margin: 0;\">Cheers,<br>The Edutheon Team</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor=\"#f4f4f4\" align=\"center\" style=\"padding: 30px 10px 0px 10px;\">
<!--[if (gte mso 9)|(IE)]>
<table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"600\">
<tr>
<td align=\"center\" valign=\"top\" width=\"600\">
<![endif]-->
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width: 600px;\" >
<tr>
<td bgcolor=\"#FFECD1\" align=\"center\" style=\"padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;\" >
<h2 style=\"font-size: 20px; font-weight: 400; color: #111111; margin: 0;\">Need more help?</h2>
<p style=\"margin: 0;\">We’re here, ready to talk</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>";
i have been searching on net to get an infographic email template to send email using PHP. Can we have functionalities like moving HTML content within the Email body or like popups within the email body on click event. Basically show and hide of HTML content will do.
Any sites or URLs which have achieved this can be very helpful for me to go forward with this development.
See the sample code below: (But the style gets removed in Gmail :( )
<!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:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- This code is part of a tutorial from Email on Acid: https://www.emailonacid.com/blog/article/email-development/build-an-interactive-carousel-for-email -->
<title>Interactive Carousel</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
#media only screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1), (max-width: 480px), (max-device-width: 480px) {
.slide1-content,
.slide2-content,
.slide3-content {
display: block;position: absolute;top: 0px;left: 0px;width: 600px;height: 520px;background-color: #FFFFFF;
}
}
#media only screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1) {
.slide1-content {left: 0px;}
.slide1:hover { background-color: #37B330;}
#slide-1:checked ~ .slide1 {background-color: #37B330 !important;}
#slide-1:checked + span + table .swoosh { left: 0px !important; }
.slide2 { top: 66px; left: 321px; }
.slide2-content { left: 600px; }
.slide2:hover { background-color: #37B330;}
#slide-2:checked ~ .slide2 {background-color: #37B330 !important;}
#slide-2:checked + span + table .swoosh { left: -600px !important; }
.slide3 { top: 122px; left: 321px; }
.slide3-content { left: 1200px; }
.slide3:hover { background-color: #37B330;}
#slide-3:checked ~ .slide3 {background-color: #37B330 !important;}
#slide-3:checked + span + table .swoosh { left: -1200px !important; }
}
</style>
</head>
<body style="background-color:#6c6c6c;margin: 0px;padding: 0px;" bgcolor="#6c6c6c">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#6c6c6c" style="width: 100% !important; table-layout:fixed;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" align="center" style="border-collapse: collapse;">
<div class="wrapper" style="min-width: 640px;">
<table id="CarouselWrapper" width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="shrink" style="width:600px; margin:0 auto;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 415px !important;height: 895px !important;position: relative;display: block;overflow: hidden;">
<tr>
<td style="border-collapse: collapse;">
<table class="CarouselMain" width="600" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 600px !important;height: 1400px !important;">
<tr>
<td valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<form action ="foo">
<input class="yahoo" type="radio" name="action" checked="checked" id="slide-1" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<input class="yahoo" type="radio" name="action" id="slide-2" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<input class="yahoo" type="radio" name="action" id="slide-3" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
</form>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="border-collapse: collapse;">
<table class="swoosh" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;position: relative;transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;">
<tr>
<td class="slide1-content" style="border-collapse: collapse;display: block;position: absolute;top: 0px;left: 0px;width: 600px;height: 520px;background-color: #FFFFFF">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image3.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
<tr>
<td class="slide2-content" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image2.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
<tr>
<td class="slide3-content" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image4.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<label class="button slide3" for="slide-3" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;">
<span class="hide" style="color:#ffffff;">Three</span>
</label>
</td>
</tr>
</table>
<label class="button slide2" for="slide-2" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;">
<span class="hide" style="color:#ffffff;">Two</span>
</label>
</td>
</tr>
</table>
<label class="button slide1" for="slide-1" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;top: 10px; left: 321px;">
<span class="hide" style="color:#ffffff;">One</span>
</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
NB:
Is it possible to add dynamic moving content ie show and hide div elements within the Email body.
it's not possible to send scripts per Mail because of security issues. Also many of the major Mail Clients, like you noticed in Gmail, dont't support most of the simplest Html and Css.
Css animation works in some Clients, in others work gifs, but scripts wont work in any. Maybe you can design a workaround using this Recource. Css animation are complicated to design, pretty annoying to build, but can hide elements or move them around, if supported by the client.
Also you could have the button, that would start the animation, link to a webpage, where the animation will be. But in my expirience, this gives a terrible Usebility.
If most of your audience uses Outlook, its not worth to create something with Animations at all since Outlook doesn't support any of this.
Hope this was helpful!
i have used on my site Width and height like
<table width="800px" height="600px" border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
i have to changed this code media query for responsive but its not working i set background color red when i re size my browser its showing color only not in resize content
My code:
<style type="text/css">
#media only screen and (min-width: 320px) and (max-width : 780px)
{
.leftborder
{
background-color:skyblue;
}
.rightborder {
border-right: 1px solid #000000;
}
.leftborder {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-style: thin;
}
.style2 {font-size: xx-small}
.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
}
BODY { font-family: Arial, Helvetica, sans-serif;
line-height:160%;
font-size:14px;
color:#000;
background: url(images/gradient2.jpg);
background-repeat: repeat-x;
background-color:#FFF;
}
table.leftborder{
align:"right";
width:800px ! Important;
height:600px ! Important;
}
}
/* MOBILE LANDSCAPE */
#media only screen and (min-width: 480px) and (max-width: 780px)
{
.leftborder {
background-color:blue;
}
}
/* SMALL TABLET */
#media only screen and (min-width: 600px) and (max-width:780px)
{
.leftborder
{
background-color:green;
}
}
/* TABLET/NETBOOK */
#media only screen and (min-width: 768px) and (max-width: 780px)
{
.leftborder
{
background-color:yellow;
}
}
.rightborder {
border-right: 1px solid #000000;
}
.leftborder {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-style: thin;
}
.style2 {font-size: xx-small}
.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
}
BODY { font-family: Arial, Helvetica, sans-serif;
line-height:160%;
font-size:14px;
color:#000;
background: url(images/gradient2.jpg);
background-repeat: repeat-x;
background-color:#FFF;
}
</style>
<script type="text/javascript">
function openWindow(winName)
{
window.open(winName,"FAQs", "width=950,height=650,resizable=no,scrollbars=no,toolbar=no,status=no,menubar=no,copyhistory=no,left=100,top=100,screenX=100,location=no,screenY=100");
}
</script>
</head>
<link href="style.css" rel="stylesheet" type="text/css">
<body bgcolor="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="design"/ >
<tr>
<td align="center">
<table width="800px" height="600px" border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
<tr bgcolor="#FFFFFF">
<td colspan="2" style="background-image:url('site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right" />
<?php
if(!is_null($sid)&&$session_error=="none")
{
$_SESSION['lms_username']=$lms_username;
?><TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="190" >
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000">Logged in as: <B><?php echo $lms_username; ?></B></TD>
</TR>
<?php
if($lms_groups=="on" && $lms_user_group!=""){
?>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo"$lms_gtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_group</B>";}?></TD>
</TR>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo "$lms_sgtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_subgroup</B>";}?></TD>
</TR>
<tr>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php if($section=="reports" && $report){echo"<A HREF='index.php?section=reports&sid=$sid'>Back to Detailed Reports Section";}?></FONT></TD>
</tr>
<?php }?>
</TABLE>
<?php
}
?></td>
</tr>
<tr>
<td colspan="2" height="20" background="images/bg.gif">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<TD align="right"><?php
if(!is_null($sid)&&$session_error=="none")
{
?><a style="" href="index.php?section=<?php echo $section; ?>&logout=YES&sid=<?php echo $sid; ?>"><img src="images/logout.gif" border="0" align="ABSMIDDLE" alt="Click here to Log Out"></a><?php
}
?></TD>
</tr>
</table></td>
</tr>
<tr>
<?php
if(is_null($sid)||$session_error!="none")
{
$nav_display = 'display: none';
}
?>
<td valign="top" style=" <?php echo $nav_display; ?> ">
<!---------BEGIN SIDE NAV TABLE------------->
<table width="198" border="0" cellspacing="0" cellpadding="0" >
<tr valign="top" bordercolor="#FFFFFF">
<td width="198" bordercolor="#FFFFFF"><?php
if((!is_null($sid)&&$session_error=="none"))
{
include($dir_components."navbar2.php");
}
?></td>
</tr>
<tr><td> </td></tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td class="boxcontent" VALIGN="TOP" >
<?php
include($mysection);
?></td>
</tr>
</table>
</td>
</tr>
</table>
<hr width="200;">
</body>
</html>
added image what i am getting ?please help me any advise ?
On your media queries you have just changed the color and how do you supposed to get responsive design. You need to change other properties like width or height to adjust on that respective screen size. Or there are other options for you, like responsive tables plugins or if you want to fix via media queries you need to first decide how you wanna display on specific screen size, options are like scrollable tables or breaking table headings into blocks and columns below and so on then only you go to media queries to adjust as accordingly.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
from morning I have been trying but at last I have to put this at stackoverflow. I have been trying to send HTML mail through php when when i see my mail i get the HTML coads exactly not the beautifully designed mail
<?php
$email = $_POST["email"];
$to = $email;
$from = "arshkapoor2015#gmail.com";
$subject = "Your thebigmall coupon code";
$headers = "From:" . $from;
ob_start();
?>
<html>
<head>
<title></title>
</head>
<body>
<p>
</p>
<div style="font-size: small; width: 797.4166870117188px; background-color: rgb(236, 236, 236); margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; ">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr style="border-collapse: collapse; ">
<td align="center" bgcolor="#ececec" style="border-collapse: collapse; ">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0px 10px; " width="640">
<tbody>
<tr style="border-collapse: collapse; ">
<td height="20" style="border-collapse: collapse; " width="640">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="640">
<table bgcolor="#00707b" border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: rgb(4, 57, 72); color: rgb(231, 203, 163); " width="640">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="15">
</td>
<td align="left" style="border-collapse: collapse; " valign="middle" width="350">
<table border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<tr style="border-collapse: collapse; ">
<td height="8" style="border-collapse: collapse; " width="350">
</td>
</tr>
</tbody>
</table>
<div style="font-size: 12px; ">
Web Version</div>
<table border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<tr style="border-collapse: collapse; ">
<td height="8" style="border-collapse: collapse; " width="350">
</td>
</tr>
</tbody>
</table>
</td>
<td style="border-collapse: collapse; " width="30">
</td>
<td align="right" style="border-collapse: collapse; " valign="middle" width="255">
<table border="0" cellpadding="0" cellspacing="0" width="255">
<tbody>
<tr style="border-collapse: collapse; ">
<td height="8" style="border-collapse: collapse; " width="255">
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " valign="middle">
<img alt="Facebook icon" border="0" height="14" src="https://img.createsend1.com/img/templatebuilder/like-glyph.png" style="min-height: auto; line-height: 13px; outline-style: none; display: block; " width="8" /></td>
<td style="border-collapse: collapse; " width="3">
</td>
<td style="border-collapse: collapse; " valign="middle">
<div style="font-size: 12px; ">
Like</div>
</td>
<td style="border-collapse: collapse; " width="10">
</td>
<td style="border-collapse: collapse; " valign="middle">
<img alt="Forward icon" border="0" height="14" src="https://img.createsend1.com/img/templatebuilder/forward-glyph.png" style="min-height: auto; line-height: 13px; outline-style: none; display: block; " width="19" /></td>
<td style="border-collapse: collapse; " width="3">
</td>
<td style="border-collapse: collapse; " valign="middle">
<div style="font-size: 12px; ">
Forward</div>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="255">
<tbody>
<tr style="border-collapse: collapse; ">
<td height="8" style="border-collapse: collapse; " width="255">
</td>
</tr>
</tbody>
</table>
</td>
<td style="border-collapse: collapse; " width="15">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td align="center" bgcolor="#00707b" style="border-collapse: collapse; " width="640">
<table border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td height="30" style="border-collapse: collapse; " width="580">
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td style="border-collapse: collapse; " width="580">
<div align="center">
<p style="color: rgb(231, 203, 163); font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size: 36px; margin-top: 0px; margin-bottom: 30px; ">
<strong>TheBigMall Coupon code !</strong></p>
</div>
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td bgcolor="#ffffff" height="30" style="border-collapse: collapse; " width="640">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td bgcolor="#ffffff" style="border-collapse: collapse; " width="640">
<table border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td style="border-collapse: collapse; " width="580">
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="580">
<h1 align="left" style="font-size: 18px; line-height: 24px; color: rgb(154, 150, 97); font-weight: bold; margin-top: 0px; margin-bottom: 18px; ">
25% off on modular kitchens (Faizabad Road)</h1>
<div align="left" style="font-size: 13px; line-height: 18px; color: rgb(68, 68, 68); margin-top: 0px; margin-bottom: 18px; ">
<p style="margin-bottom: 15px; ">
<strong>Offer Details</strong></p>
<p style="margin-bottom: 15px; ">
Make your kitchen a beautiful place to cook with RECENT KITCHEN WORLD</p>
<p style="margin-bottom: 15px; ">
Get 25% discount on total billing amount on modular kitchens manufacturing. </p>
<p style="margin-bottom: 15px; ">
Our Products:<br style="line-height: 13px; " />
Marine Ply Shutter (Weather Proof)<br style="line-height: 13px; " />
Marine Ply Carcass (Weather Proof)<br style="line-height: 13px; " />
Acrylic shutter<br style="line-height: 13px; " />
Civil work<br style="line-height: 13px; " />
Chimney<br style="line-height: 13px; " />
150 Colours available</p>
<p style="margin-bottom: 15px; ">
Offer for limited period. So don't leave this opportunity & make your kitchen beautiful !!!</p>
</div>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td height="10" style="border-collapse: collapse; " width="580">
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="580">
<p align="left" style="font-size: 18px; line-height: 24px; color: rgb(154, 150, 97); font-weight: bold; margin-top: 0px; margin-bottom: 18px; ">
Coupon code !</p>
<div align="left" style="font-size: 13px; line-height: 18px; color: rgb(68, 68, 68); margin-top: 0px; margin-bottom: 18px; ">
<h1 style="margin-bottom: 15px; text-align: center; ">
12345$randstr$randstr2</h1>
<p style="margin-bottom: 15px; ">
</p>
</div>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td height="10" style="border-collapse: collapse; " width="580">
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="580">
<p align="left" style="font-size: 18px; line-height: 24px; color: rgb(154, 150, 97); font-weight: bold; margin-top: 0px; margin-bottom: 18px; ">
Address :</p>
<div align="left" style="font-size: 13px; line-height: 18px; color: rgb(68, 68, 68); margin-top: 0px; margin-bottom: 18px; ">
<p style="text-align: center; margin-bottom: 15px; ">
Store Address :Kamta Check Post, Faizabad Road, Opp. Kamta Petrol Pump, Lucknow.<br style="line-height: 13px; " />
City :Lucknow<br style="line-height: 13px; " />
Contact No.9415255816, 9721961276, 9918404211<br style="line-height: 13px; " />
<span style="color: rgb(255, 0, 0); ">Offers valid for 48 hours only.</span></p>
</div>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td height="10" style="border-collapse: collapse; " width="580">
</td>
</tr>
</tbody>
</table>
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td bgcolor="#ffffff" height="15" style="border-collapse: collapse; " width="640">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="640">
<table bgcolor="#043948" border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; background-color: rgb(4, 57, 72); color: rgb(226, 226, 226); " width="640">
<tbody>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td height="30" style="border-collapse: collapse; " width="360">
</td>
<td style="border-collapse: collapse; " width="60">
</td>
<td style="border-collapse: collapse; " width="160">
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td style="border-collapse: collapse; " valign="top" width="360">
<p align="left" style="font-size: 12px; line-height: 15px; margin-top: 0px; margin-bottom: 15px; ">
</p>
<p align="left" style="font-size: 12px; line-height: 15px; margin-top: 0px; margin-bottom: 15px; ">
All Rights Reserved > TheBigMall.co.in - Great discounts in your city</p>
</td>
<td style="border-collapse: collapse; " width="60">
</td>
<td style="border-collapse: collapse; " valign="top" width="160">
<p align="right" style="font-size: 11px; line-height: 16px; margin-top: 0px; margin-bottom: 15px; color: rgb(231, 203, 163); ">
</p>
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td style="border-collapse: collapse; " width="30">
</td>
<td height="15" style="border-collapse: collapse; " width="360">
</td>
<td style="border-collapse: collapse; " width="60">
</td>
<td style="border-collapse: collapse; " width="160">
</td>
<td style="border-collapse: collapse; " width="30">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="border-collapse: collapse; ">
<td height="60" style="border-collapse: collapse; " width="640">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<img border="0" height="1" src="https://createsend3.com/t/j-o-wukdik-l/o.gif" style="min-height: 1px !important; width: 1px !important; border-width: 0px !important; margin: 0px !important; padding: 0px !important; line-height: 13px; outline-style: none; display: block; " width="1" /></div>
<div>
</div>
<p>
</p>
</body>
</html>
<?
$message = ob_get_clean();
mail($to,$subject,$message,$headers);
echo "Mail Sent.";
?>
you are missing the mail headers
See example from php.net
http://php.net/manual/en/function.mail.php
<?php
// multiple recipients
$to = 'aidan#example.com' . ', '; // note the comma
$to .= 'wez#example.com';
// subject
$subject = 'Birthday Reminders for August';
// message
$message = '
<html>
<head>
<title>Birthday Reminders for August</title>
</head>
<body>
<p>Here are the birthdays upcoming in August!</p>
<table>
<tr>
<th>Person</th><th>Day</th><th>Month</th><th>Year</th>
</tr>
<tr>
<td>Joe</td><td>3rd</td><td>August</td><td>1970</td>
</tr>
<tr>
<td>Sally</td><td>17th</td><td>August</td><td>1973</td>
</tr>
</table>
</body>
</html>
';
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Additional headers
$headers .= 'To: Mary <mary#example.com>, Kelly <kelly#example.com>' . "\r\n";
$headers .= 'From: Birthday Reminder <birthday#example.com>' . "\r\n";
$headers .= 'Cc: birthdayarchive#example.com' . "\r\n";
$headers .= 'Bcc: birthdaycheck#example.com' . "\r\n";
// Mail it
mail($to, $subject, $message, $headers);
?>
I recommend you phpmailer
http://phpmailer.worxware.com/index.php?pg=examplebmail
http://sourceforge.net/projects/phpmailer/
Unfortunately its not as simple as just sending the html in the body. YOu need to tell the mail client the content type and a few more steps.
Your best bet is to use a library like Pear Mail or Zend_Mail to make your life easier