I wanted to send a designed Email using HTML thru Python. I pasted my HTML, CSS codes to msg.content, code follows
msg.set_content(
'''<html lang="en" xmlns:o="urn:schemas-microsoft-
com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Open Sans" rel="stylesheet" type="text/css"/>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
}
p {
line-height: inherit
}
.desktop_hide,
.desktop_hide table {
mso-hide: all;
display: none;
max-height: 0px;
overflow: hidden;
}
@media (max-width:620px) {
.desktop_hide table.icons-inner {
display: inline-block !important;
}
.icons-inner {
text-align: center;
}
.icons-inner td {
margin: 0 auto;
}
.fullMobileWidth,
.image_block img.big,
.row-content {
width: 100% !important;
}
.mobile_hide {
display: none;
}
.stack .column {
width: 100%;
display: block;
}
.mobile_hide {
min-height: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
font-size: 0px;
}
.desktop_hide,
.desktop_hide table {
display: table !important;
max-height: none !important;
}
}
</style>
</head>
<body style="background-color: #FFFFFF; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #FFFFFF;" width="100%">
<tbody><tr><td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #4f9f21; background-size: auto;" width="100%">
<tbody><tr><td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-size: auto; background-image: url('https://i.ibb.co/LptDwSH/blue-glow-3-2.png'); background-position: top center; background-repeat: no-repeat; color: #000000; width: 600px;" width="600">
<tbody><tr>
<td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tr>
<td style="padding-bottom:35px;padding-left:30px;padding-right:30px;padding-top:35px;width:100%;">
<div align="center" style="line-height:10px"><img src="https://i.ibb.co/JtmhRLG/icon.png" style="display: block; height: auto; border: 0; width: 150px; max-width: 100%;" width="150"/></div>
</td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tr><td style="width:100%;padding-right:0px;padding-left:0px;">
<div align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/4011/top-rounded.png" style="display: block; height: auto; border: 0; width: 600px; max-width: 100%;" width="600"/></div>
</td></tr></table></td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #4f9f21;" width="100%">
<tbody><tr><td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; background-position: center top; color: #000000; width: 600px;" width="600">
<tbody><tr>
<td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 0px; padding-bottom: 10px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tr><td style="padding-bottom:5px;padding-left:20px;padding-right:20px;padding-top:5px;width:100%;">
<div align="center" style="line-height:10px"><img src="https://i.ibb.co/C8S6tTm/adminision-bg.jpg" style="display: block; height: auto; border: 0; width: 560px; max-width: 100%;" width="560"/></div>
</td></tr></table></td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #4f9f21; background-size: auto;" width="100%">
<tbody><tr><td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; background-size: auto; color: #000000; width: 600px;" width="600">
<tbody><tr>
<td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tr>
<td style="padding-bottom:5px;padding-top:25px;text-align:center;width:100%;">
<h1 style="margin: 0; color: #555555; direction: ltr; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 36px; font-weight: 400; letter-spacing: normal; line-height: 120%; text-align: center; margin-top: 0; margin-bottom: 0;"><strong>Confirmation of your request</strong></h1>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tr>
<td style="padding-bottom:20px;padding-left:15px;padding-right:15px;padding-top:20px;">
<div style="font-family: sans-serif">
<div style="font-size: 14px; mso-line-height-alt: 25.2px; color: #737487; line-height: 1.8; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;">
<p style="margin: 0; font-size: 16px; mso-line-height-alt: 25.2px;"> </p>
<p style="margin: 0; text-align: center; font-size: 16px; mso-line-height-alt: 28.8px;"><span style="font-size:16px;">This is a auto response of your Request</span></p>
<p style="margin: 0; text-align: center; font-size: 16px; mso-line-height-alt: 25.2px;"> </p>
<p style="margin: 0; font-size: 16px; mso-line-height-alt: 28.8px;"><span style="font-size:16px;">Good Day %s</span></p>
<p style="margin: 0; font-size: 16px; mso-line-height-alt: 28.8px;"><span style="font-size:16px;"> Your request has been forwarded to our clerks and currently on-hold for screening.</span></p>
<p style="margin: 0; font-size: 16px; mso-line-height-alt: 28.8px;"><span style="font-size:16px;">Please make sure that the requirements you submitted will be the same requirements you'll bring in the due date of request.</span></p>
<p style="margin: 0; font-size: 16px; mso-line-height-alt: 25.2px;"> </p>
<p style="margin: 0; font-size: 16px; mso-line-height-alt: 28.8px;"><span style="font-size:16px;">We will send you a confirmation of your request according to the clerks if it's declined or accepted. With the confirmation you'll be receiving a claim stub that will be used to claim you request.</span></p>
<p style="margin: 0; font-size: 16px; mso-line-height-alt: 25.2px;"> </p>
<p style="margin: 0; font-size: 16px; mso-line-height-alt: 25.2px;"> </p>
<p style="margin: 0; font-size: 16px; mso-line-height-alt: 25.2px;"> </p>
<p style="margin: 0; font-size: 16px; mso-line-height-alt: 25.2px;"> </p>
<p style="margin: 0; text-align: center; font-size: 16px; mso-line-height-alt: 25.2px;"> </p>
</div></div></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tr>
<td style="width:100%;text-align:center;">
<h3 style="margin: 0; color: #555555; font-size: 16px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; line-height: 200%; text-align: center; direction: ltr; font-weight: 700; letter-spacing: normal; margin-top: 0; margin-bottom: 0;"><span >This is a auto response, PLEASE DO NOT REPLY</span></h3>
</td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tr>
<td style="padding-bottom:20px;padding-left:15px;padding-right:15px;padding-top:20px;text-align:center;">
<div align="center">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://udm.edu.ph/udm2/" style="height:52px;width:219px;v-text-anchor:middle;" arcsize="8%" stroke="false" fillcolor="#4f9f21"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#ffffff; font-family:Arial, sans-serif; font-size:16px"><![endif]--><a href="https://udm.edu.ph/udm2/" style="text-decoration:none;display:inline-block;color:#ffffff;background-color:#4f9f21;border-radius:4px;width:auto;border-top:1px solid #4f9f21;font-weight:700;border-right:1px solid #4f9f21;border-bottom:1px solid #4f9f21;border-left:1px solid #4f9f21;padding-top:10px;padding-bottom:10px;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;text-align:center;mso-border-alt:none;word-break:keep-all;" target="_blank"><span style="padding-left:60px;padding-right:60px;font-size:16px;display:inline-block;letter-spacing:normal;"><span style="font-size: 16px; line-height: 2; word-break: break-word; mso-line-height-alt: 32px;">Visit Website</span></span></a>
<!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
</div></td></tr></table></td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #4f9f21;" width="100%">
<tbody><tr><td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-position: center top; color: #000000; width: 600px;" width="600">
<tbody><tr>
<td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tr>
<td style="width:100%;padding-right:0px;padding-left:0px;">
<div align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/4011/bottom-rounded.png" style="display: block; height: auto; border: 0; width: 600px; max-width: 100%;" width="600"/></div>
</td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tr>
<td style="padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:30px;">
<div style="font-family: Arial, sans-serif">
<div style="font-size: 12px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; mso-line-height-alt: 14.399999999999999px; color: #ffffff; line-height: 1.2;">
<p style="margin: 0; mso-line-height-alt: 14.399999999999999px;"> </p>
<p style="margin: 0; text-align: center;"><em><span style="font-size:20px;">Public service through quality education</span></em></p>
</div></div></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tr><td style="padding-bottom:35px;padding-left:10px;padding-right:10px;padding-top:5px;">
<div style="font-family: sans-serif">
<div style="font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 14.399999999999999px; color: #ffffff; line-height: 1.2;">
<p style="margin: 0; letter-spacing: 1px; mso-line-height-alt: 14.399999999999999px;"> </p>
<p style="margin: 0; text-align: center; letter-spacing: 1px;">Justice Cecilia Munoz-Palma corner Mayor Antonio J. Villegas Street Mehan Gardens, Ermita, Manila, Philippines 1000</p>
<p style="margin: 0; text-align: center; letter-spacing: 1px; mso-line-height-alt: 14.399999999999999px;"> </p>
<p style="margin: 0; text-align: center; letter-spacing: 1px;">Tel. No.: ( 632)5336-6582 / ( 632)5336-8956 / ( 632)5336-8966 | Fax. No. ( 632)336-6554 | www.udm.edu.ph</p>
<p style="margin: 0; text-align: center; letter-spacing: 1px; mso-line-height-alt: 14.399999999999999px;"> </p>
</div></div></td></tr></table></td></tr></tbody></table></td></tr></tbody></table></body></html>'''
% (first_name), 'html')
I'm geting this error "ValueError: unsupported format character '!' (0x21) at index 2235" and sometimes it gaves the same error but with different character
Tried using premailer and received another type of error which is "ValueError: unsupported format character '?' (0xa) at index 651"
I'm not really sure how to send these css styles and format it to sendable email. Any insights will be be a great help
CodePudding user response：
The % format operator treats every % in the string as a format operation. You have "%" in there many times. It's silly to use % for this. Just split the string into two parts: one before the body, one after the body. then just do prefix body suffix. Or, maybe, store this canned data in a file and read it in.