I am trying to send an email using Django. The email template was made by someone else with a ton of CSS and it will take a lot of hours just to "inline" it. So I used premailer to inline the CSS automatically. It worked pretty well till I saw that it also inlined the media queries that were responsible for the responsiveness of the templates.
One solution I saw was to put media queries in a separate style tag and put
data-premailer="ignore"
but unfortunately, I think this solution does not work anymore.
I also tried using django_inlinecss, but that didn't work for me also. Please let me know how to fix premailer or if there any other package available that can inline CSS.
Hello @ahsan mukhtar you don't have to use any external library use django EmailMessage
from django.core.mail import EmailMessage
from domain_project import settings
from django.template.loader import get_template
from django.shortcuts import render,redirect
from django.http import JsonResponse
from contact.models import Contact
def contact(request):
if request.is_ajax():
contact = Contact()
contact.name = request.GET.get('name')
contact.email = request.GET.get('email')
contact.phone = request.GET.get('phone')
contact.subject = request.GET.get('subject')
contact.message = request.GET.get('message')
contact.save()
ctx = {
'name': request.GET['name'],
'email': request.GET['email'],
'phone': request.GET['phone'],
'message':request.GET['message']
}
email_temp = get_template('email_template/contact_email.html').render(ctx)
msg = EmailMessage(
'Hello'+' '+str(request.GET['name']),
email_temp,
settings.DEFAULT_FROM_EMAIL,
[request.GET.get('email'),],
)
msg.content_subtype = "html"
msg.send()
return JsonResponse({'massage':"massage"},safe=True)
<!DOCTYPE html>
<html>
<head>
<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">
@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;">
<!-- HIDDEN PREHEADER TEXT -->
<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;">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- LOGO -->
<tr>
<td bgcolor="#ed3936" align="center">
<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;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ed3936" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<!-- name,email,phone,looking_for,message -->
<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: 30px; font-weight: 400; margin: 1;">Welcome! <br>
<span style="font-size: 20px; font-weight: 500;">{{ name }}</span></h1>
<img src="https://media.itdude.in/media/email_template.png" width="125" height="120"
style="display: block; border: 0px;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<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;">
<h4 style="margin-bottom: 0;">Your Requrement :</h4>
<p style="margin: 0;">{{ message }}<br></p>
<p style="color:black;">You will receive a call frome us within 2 working days.</p>
</td>
</tr>
<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-bottom: -50px; color:black; text-align:center;">We're excited to have you
get started. Explore our Website. 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="#ed3936"><a
href="https://domain.in/" target="_blank"
style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #ed3936; display: inline-block; ">Explore
Our Website</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr> <!-- COPY -->
<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're 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; color:red;">Domain</p>
<small style="color:black;">TECH SOLUTIONS PVT. LTD.</small><br>
<small>
<b>Phone:</b>
<a href="tel:+91 9999999999" target="_blank" style="text-decoration:none;">
+91 9999999999
</a><br>
<b>Email:</b>
<a href="mailto:[email protected]" target="_blank" style="text-decoration:none;">
[email protected]
</a></small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 30px 10px 0px 10px;">
<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;"><a href="https://domain.in/contact/" target="_blank"
style="color: #5762cc;">We’re here to help you out</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>