I have created a code which works in the email client as follows:
<html>
<head>
<title>PLEASE REPLY USING THE BUTTONS</title>
</head>
<body>
<table cellspacing="5" cellpadding="5" border:5px;>
<tr>
<td align="center" width="200" height="40" bgcolor="#000091" style="-webkit- border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;" >
<span style="color: #FFFFFF">ATTENDING</span>
</td>
<td height="10"></td>
<td align="center" width="200" height="40" bgcolor="#000091" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
<span style="color: #FFFFFF">ATTENDING AND DINING</span>
</td>
<td height="10"></td>
<td align="center" width="200" height="40" bgcolor="#000091" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
<span style="color: #FFFFFF">APOLOGIES</span>
</td>
</tr>
</table>
</body>
</html>
Now amended to include html, header, body. It works in a web page and works in an email client.
But placing this into the body text in php-mailer ignores it completely.
How can I ensure that these buttons appear in the mailed text.
I do not understand the response with Yii:: as the page simply jams up.
Is there any easier way to get the html into the page?
Thanks for your assistance
CRG
use setHtmlBody in your code
public function sendEmail($email)
{
return Yii::$app->mailer->compose()
->setTo($email)
->setFrom([$this->email => $this->name])
->setSubject('text')
->setHtmlBody($this->body)
->send();
}
Email html differs greatly from normal html, for various reasons, security being one of them. Many email clients ignore the mailto link completely, implement it poorly, or show a warning to the user.
It is better to avoid it. You could use a form inside you email, or on your website, to allow users to send you a message.
Ref: https://www.campaignmonitor.com/blog/email-marketing/2013/06/tip-avoid-using-mailto-links-in-html-email/
Related
When I try to send an HTML email using the PHPMailer library, the received email shows incorrectly.
I have already tried with different mail clients (Gmail and Outlook), but they look very the same.
This is my current code
require_once 'includes/mail-denied.php'; // Here is specified the $message variable, containing the HTML and CSS (https://i.imgur.com/UG1B34V.png)
$keys = array('{{ server_name }}', '{{ player_name }}', '{{ reason_area }}', '{{ date }}');
$_POST['description'] = nl2br($_POST['description']);
$replace = array($servernam, $name, $_POST['description'], date("Y"));
$message = str_replace($keys, $replace, $message);
$mail_manager = new PHPMailer(true);
try {
$mail_manager->SMTPDebug = 2;
$mail_manager->setFrom('noreply#'.$_SERVER['HTTP_HOST'], $servernam);
$mail_manager->addAddress($mail);
$mail_manager->addReplyTo('noreply#'.$_SERVER['HTTP_HOST'], 'Do not reply');
$mail_manager->isHTML(true);
$mail_manager->Subject = "Staff Application System - ".$servernam;
$mail_manager->Body = $message;
$mail_manager->AltBody = 'Your application has been declined.';
$mail_manager->send();
} catch (Exception $e) {
echo "Message could not be sent. Mailer Error: {$mail_manager->ErrorInfo}";
I do receive the email, but part of the HTML looks just messed up.
Here's the HTML code:
<?php
$message = '
<div style="width: 500px;
height: 110px;
position: fixed;
background-color: #ff9999;
border-bottom: 1px solid #ff8080;
display: block;
border-top-left-radius: .5em;
border-top-right-radius: .5em;
color: #FFF;
text-align: center;
font-family: \'Product Sans\', Arial, sans-serif;">
<h2>Staff System Application</h2>
<h3>{{ server_name }}</h3>
</div>
<div style="width: 500px;
height: 600px;
background-color: #f2f2f2;
display: block;
padding-top: -10px;
z-index: 999;
border-radius: .5em;
font-family: \'Product Sans\', Arial, sans-serif;">
<div style="padding: 120px 15px 5px 15px;
color: #797979;
font-family: \'Product Sans\', Arial, sans-serif;">
<p>Dear {{ player_name }}...</p>
<p>After carefully considering your staff application the head staff have acquired a verdict.</p>
<p>We regret to inform you that your application has been:</p>
<p style="color: #C60000; font-size: 80px; text-align: center; margin-top: 10px;">DENIED</p>
<div style="margin-top: -55px; font-size: 15px;">
<p>You have been denied for the next reason(s):</p>
{{ reason_area }}
</div>
<br>
<br>
<p style="text-align: center; padding-bottom: -15px;">THIS IS AN AUTOMATED MESSAGE, DO NOT REPLY.</p>
</div>
</div>
<div style="margin-top: -10px;
width: 500px;
height: 90px;
position: fixed;
display: block;
background-color: #595959;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
text-align: center;
font-family: \'Product Sans\', Arial, sans-serif;
color: #edeff2;">
<p style="font-size: 20px;">© {{ server_name }} - {{ date }}</p>
<p style="font-size: 9px;">© {{ date }} Carinae Studios. All rights reserved.</p>
</div>';
?>
This is how it should look like:
And this is how it looks when I receive the email:
I'm pretty new with HTML inside emails, I have no idea how this could be fixed.
Here are a few suggestions for what I've gathered from your information:
Like I said in the comments, use tables as much as possible.
Avoid classes and use inline styles. Add the font style to your td's as well as any html element inside of your td. Use the font or span tag instead of the p tag.
An example:
<td style="font-family:Arial; font-size:18px;">
<font style="font-family:Arial; font-size: 18px">Text here</font>
</td>
Don't use paddings and margins and floats, use heights and withds to create spacings. You can even use transparent images to create spacings:
<tr>
<td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
<td><img src="full-image.jpg" alt="your visible image here"></td>
<td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
</tr>
<!-- horizontal spacing to create top/bottom margins START -->
<tr height="50" style="height:50px;">
<td height="50" width="10" style="height: 50; width: 10px"></td>
<td height="50"><img height="50" style="height: 50px;" src="transparent.png" alt="this is a transparent image"></td>
<td height="50" width="10" style="height: 50; width: 10px"></td>
</tr>
<!-- horizontal spacing to create top/bottom margins END -->
<tr>
<td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
<td><img src="full-image.jpg" alt="your visible image here"></td>
<td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
</tr>
Other tips:
Avoid using css border-radius, use images instead
Use websafe fonts, use google to find which ones are websafe
Reference your images with CDN's
Litmus has free templates that you can use to base your code off of, they are guaranteed to work within any client/device.
I hope this helps. Let me know if you still have questions.
Be aware, Outlook uses Word for rendering emails. You can read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
I am using Laravel 4 smtp mail to send mail to users. When I send mails to Gmail, the logo and URLs didn't show up as intended. When I checked the urls, it showed localhost instead of my domain name. I don't know why it's happening.
My email template:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Dosis:400,500,600,700' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Dosis', sans-serif;
font-size:14px;
color: #333;
}
#table-wrap {
background:#fafafa;
border-bottom: 5px solid #eee;
border-top: 5px solid #EC4F48;
}
#site_logo{
background: #EC4F48;
border-bottom: 2px solid #EC4F48;
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
</style>
</head>
<body>
<table id="table-wrap" width="100%" cellpadding="0" cellspacing="0" style="border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;">
<tbody>
<tr>
<td align="left" style="padding:3px; border-bottom: 2px solid #fadc65;" width="60%">
<h3 style="margin-left: 15px;">Hi, {{{ $username }}}!</h3>
</td>
<td align="center" id="site_logo">
<img src="{{ asset('dist/img/logo.png') }}" width="200" style="margin-left: 10px;" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<br />
<h2>Welcome to mydomain.com !</h2>
<h2>Thanks for registering to Mysite.</h2>
<h4>Click here to confirm your email...</h4>
<br />
</td>
</tr>
<tr>
<td align="left">
<p style="margin-left: 20px; color: #666;">
www.mydomain.com | Email : feedback#mydomain.com
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
When you use CLI to generate any view Laravel uses url parameter to set domain. By default its value is set to http://localhost so you need to change this parameter to your domain.
The parameter is located in app.php in config folder.
Laravel comment for Application URL:
This URL is used by the console to properly generate URLs when using the Artisan command line tool. You should set this to the root of your application so that it is used when running Artisan tasks.
I have made few pages where all the files where tested on screen resolution 1366x768. But when i tested it on 1024x768 the menu & images overlap. Is there some solution to this ?
Please Help!
This is my homepage.php
<?php session_start();?>
<html>
<head><title>Welcome</title></head>
<style>
#heading{ text-align:right;font-size: 18px;float:right;margin:35px 20px;}
a:hover{ color:#BEBEBC; }
a{ color:black;}
#img{margin:10px 10px;}
.box {margin-left: auto;margin-right: auto;}
.wrapper {display: table-cell;vertical-align: middle;width: 2500px;height:450px;}
#rectangle {width: 300;height: 200;border-style: solid black;border-radius:5px;border-width:10px;border-color:black;}
img{opacity: 0.5;filter: alpha(opacity=40); /* For IE8 and earlier */}
img:hover {opacity: 1.0;filter: alpha(opacity=100); /* For IE8 and earlier */}
#copyright{text-align:center;color:black;}
ul{
padding: 0;
list-style: none;
}
ul li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
}
li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
//background: #1E90FF;
color:black;
}
ul li a{
display: block;
//padding: 5px 10px;
color: black;
//background: #B0D8FF;
text-decoration: none;
}
ul li a:hover{
color: white;
//background: #939393;
}
ul li ul{
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
</style>
<body background="a6.jpg">
<img id="img" src="LOGO.jpg" width="150px" height="100px">
<h1 align="center" style="position:absolute;top:30px; left:400px;">MEETING ROOM APPLICATION</h1>
<div id="heading"><ul>
<li>Home</li>
<li><?php echo ucwords($_SESSION['usr_name']); ?> ▾
<ul>
<li>Change Password</li>
<li>Logout</li>
</ul>
</li>
<li>Help</li>
</ul></div>
<br><br>
<hr width="100%">
<table border="1" width="100%" style="border:black;">
<tr><th align="center" colspan="8" style="border-radius: 5px;border-style: solid;">No. of Booking for Present Day</th></tr>
<tr><td align="center" style="border-radius: 5px;border-style: solid;">3-Seater</td><td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center">5-Seater</td><td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center" align="center">8-Seater</td>
<td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center">16-Seater</td>
<td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td> </tr>
</table>
<div class="wrapper">
<table class="box">
<tr>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" style="border: 10px solid white;border-radius:10px;"><h2 align="center">3-Seater</h2><p align="center">This is a 3-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="5-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">5-Seater</h2><p align="center">This is a 5-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="8-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">8-Seater</h2><p align="center"><This is a 8-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="16-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">16-Seater</h2><p align="center">This is a 16-Seater room.</font></p></td>
</tr>
</table>
</div>
</body>
</html>
With the code provided above you will find that the rendering of the site will differ dependent on the screen size. For example when using an iPad or iPhone you will have issues having to scroll round the page.
The only way to counter this is to use responsive design which effectively uses percetages to calculate the desired width.
For example we have two elements on a page side by side, rather than say each element is 500px wide (as this would require scrolling on a screen smaller than 1000px, we can say that each element has a width of 50%, this way regardless of the screen size, the elements sizes according to the device.
Responsive design is really the way forward and you will not be able to solve your issue without following this path. Responsive design is becoming the standard more and more and you may as well learn sooner rather than later or risk being left in the dust.
I would suggest reading the following and should you still struggle, create a new question targeted towards responsive design.
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
You may also find that integrating a pre-existing responsive template may be the quickest solution, see the following:
http://www.responsivegridsystem.com/
http://getbootstrap.com/css/
Hope this helps.
I am getting a strange issue in a website.
I have a domain (e.g. http://exaple.com.PQR.co.uk) on which I have built a website using PHP.
Website working fine but issue is in sending email.
I trying to send HTML email as below example ::
<html lang="en"><head><meta charset="utf-8"></head>
<body>
<table style="width: 100%; border: none; border-collapse: collapse;">
<tbody>
<tr>
<td style="border: none; background-color: #000; padding: 15px; color:#fff; width: 70px;">
<a href="#" style="border:none;">
<img src="**http://www.example.com.PQR.co.uk/**webservices/icon-70.png" width="70" height="70">
</a>
</td>
<td style="border: none; background-color: #000; padding: 15px; color:#fff; font-size: 40px;">
ABC
</td>
</tr>
<tr>
<td colspan="2" style="background-color: #EEEEEE; color: #000; padding: 10px;">
Hello User, <br><br>
Your account details are as below:<br/><br/>
Email ID : test.example#gmail.com<br/>
Password : Click here to change password.<br/>
</td>
</tr>
<tr>
<td colspan="2" style="background-color: #EEEEEE; color: #000; padding: 10px;">
Thanks,<br/>
ABC Team
</td>
</tr>
<tr>
<td colspan="2" style="background-color: #EC008C; padding:5px;">
</td>
</tr>
</tbody>
</table>
</body>
</html>
This email does not send successfully but mail() returns TRUE.
When I tries to send same email by changing domain to "example.com" instead of "www.example.com.PQR.co.uk" then it works but with "www.example.com.PQR.co.uk" its not working.
Please guide me for this issue. I am not getting where issue is.
Thanks in advance
I have html variable,i want to send it as attachment via email.
here is my code
$html='
<table cellpadding="0" cellspacing="0" style=" margin:0 auto;" width="100%">
<tr>
<th style="background:#FC3; padding:4px 0;border:1px solid #000; border-bottom:2px solid #000; border-right:2px solid #000;" align="center" valign="middle"><h3 style="font:300 14px verdana; margin:0; text-align:left;text-align:center;">DECLARATION BY THE AGENT</h3></th>
<th style="background:#FC3; padding:4px 0;border:1px solid #000; border-bottom:2px solid #000; border-right:2px solid #000;" align="center" valign="middle"><h3 style="font:300 14px verdana; margin:0; text-align:left;text-align:center;">DECLARATION BY THE OWNER (The Seller)</h3></th>
</tr>
<tr>
<td width="49%" style="padding:5px 10px;border-right:2px solid #000;">
<ul style="margin:0; padding:0;">
<li style="list-style:none; margin:0 0 10px 0;">
<p style="font:300 12px verdana;float: left; margin:0 5px 0 0;text-align:center;">
I hereby declare, I have read and understood the Real Estate Brokers Code of Ethics,
</p>
</li>
</ul></td>
<td width="49%" style="padding:5px 10px;border-left:1px solid #000;">
<ul style="margin:0; padding:0;">
<li style="list-style:none; margin:0 0 10px 0;">
<p style="font:300 12px verdana;float: left; margin:0 5px 0 0; text-align:center;">
I/We hereby declare, we are the Owners of the property as stated below.
</p>
</li>
</ul></td>
</tr>
</table>';
$mail->AddAttachment($html); // attachment
$mail->Send();
AddAttachment() requires a file (on the filesystem)
there is the AddStringAttachment() function for what you are doing. see docs: http://docs.redaxo.com/de/4.3.1/class_p_h_p_mailer.html#a92ef5134fdce5bd5fd24a723c508bf2b
try this:
$mail->AddStringAttachment($html,"filename.htm","base64","text/html");
I think you are trying to send html instead so try like this
$mail->Body = $html;
$mail->Send();
ok, so you are trying to send it for example and it deosn't work ?
$mail->AddAttachment("/var/tmp/file.html");