I'm creating an html email. On Outlook and GMail, the email format is correct. But with Google Inbox the formatting gets messed up. When I inspect the email in Inbox it shows that google adding extra code for google maps. Ive done the research on possible solutions but none seems to work. Here are two samples of what I've done from the research. I replace #ADDRESS1 with the users address before sending out the email.
<td style="width: 45%;">
<span class="" style="color: #000; font-size: 12px; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;">
<a rel="nofollow" href="#" style="text-decoration:none; color: #000; border: none;"> #ADDRESS1</a>
</span>
</td>
<td style="width: 45%;">
<span rel="nofollow" class="" style="color: #000; font-size: 12px; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; text-decoration:none;">
#ADDRESS1
</span>
</td>
When I inspect the email. This is what is added to the code:
<td style="width:45%">
<span style="color:#000;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif">
<a rel="nofollow" href="#m_-3542100051568633109_" style="text-decoration:none;color:#000;border:none"> 43478 GOLDEN MEADOW CIRCLE</a><a href="https://maps.google.com/?q=43478+GOLDEN+MEADOW+CIRCLE+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09+%0D%0A%0D%0A%0D%0A%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09+ASHBURN+VA+20147&entry=gmail&source=g" data-saferedirecturl="https://www.google.com/url?q=https://maps.google.com/?q%3D43478%2BGOLDEN%2BMEADOW%2BCIRCLE%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2509%2BASHBURN%2BVA%2B20147%26entry%3Dgmail%26source%3Dg&source=gmail&ust=1523385602990000&usg=AFQjCNHtFzuxkGzIBkMPomWrrIXWB_iz_w">
</a></span><a href="https://maps.google.com/?q=43478+GOLDEN+MEADOW+CIRCLE+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09+%0D%0A%0D%0A%0D%0A%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09+ASHBURN+VA+20147&entry=gmail&source=g" data-saferedirecturl="https://www.google.com/url?q=https://maps.google.com/?q%3D43478%2BGOLDEN%2BMEADOW%2BCIRCLE%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2509%2BASHBURN%2BVA%2B20147%26entry%3Dgmail%26source%3Dg&source=gmail&ust=1523385602990000&usg=AFQjCNHtFzuxkGzIBkMPomWrrIXWB_iz_w">
</a></td>
Any suggestions would be appreciated
Update
Just to clear it up. I don't want Google to add map links to my addresses. Because Google is adding the maps, its messing up my formatting in Google Inbox. In fact I don't want any map information at all
Related
I implemented Add to Calendar dropdown button in a web page
<div class="dropdown" style="display: inline;">
<button target="_blank" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border: 1px;border-radius: 2px;padding: 5px 10px;max-height: 30px; background-color: #004FBF;"><i class="material-icons" style="color: #FFFFFF">event</i> <span style="font-size: 12px;font-family: RobotoMedium;color:#FFFFFF;line-height:14px;letter-spacing:0px;border:1px;position: relative;top: -8px;">Add to Calendar</span></button>
<ul class="dropdown-menu" style="margin-top: 12px;">
<li style="padding: 5px;"><a target="_blank" href="http://www.google.com/calendar/event?action=TEMPLATE&text={{encode title}}&dates={{calendarFormat sessionStartTime}}/{{calendarFormat sessionEndTime}}&details={{calendarDetail _id}}&location={{location _id}}&trp=false&output=xml" ><i class="fa fa-google" style="color: #000000;padding: 5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px; line-height: 16px;">Google</span></a></li>
<li class="addToIcalendar" style="padding: 5px;" ><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" download><i class="fa fa-apple" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px; line-height: 16px;">Apple</span></a></li>
<li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" ><img src="/images/outlook.png" height="19" width="19"><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
height: 16px;width: 45px; line-height: 16px;padding: 5px;">Outlook</span></a></li>
<li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}"><i class="fa fa-yahoo" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
height: 16px;width: 45px; line-height: 16px;">Yahoo</span></a></li>
</ul>
</div>
In a similar way, I want to create in Welcome email but it is not working as expected.
The output of the Add to Calendar in the email is
The dropdown items are by default displayed not after clicking the button. The icons are not displayed as expected
The same code in the email body is not working. Please help and thank you!
Dropdowns and really anything with a click event are very tricky to code in an email because you can't use JS, plus it may not work in all clients. My suggestion is to use something like AddEvent in particular their Direct URL method as the regular button will only work on a webpage not an email. Using the direct url method you can make a CTA in your email that will link out to a webpage created by AddEvent with info on the event and add to calendar links.
Dropdowns won't work in most emails, but there are several things you can do to explore.
First, you should attach the .ics file. Gmail for example pulls that out and makes it super easy to add to a person's calendar.
Second, you have a default button that goes to the .ics download. This will be so that people don't miss the attached .ics file, and make it clear what it is for.
Third, you may want to include direct calendar links for Gmail and Yahoo. These are specific URLs that will take a user to the webmail versions of their email. This may not be suitable from mobiles - you'll need to test the experience. But seeing as Gmail makes it really easy and visible when you attach the ics file, there's no real reason to muck around with that.
Litmus have a write up on the specific code for that (it's complicated), and some URL generation tools. https://litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails, Gmail: http://kalinka.tardate.com/, ICS generation: https://apps.marudot.com/ical/.
I'm very very new to html. I'm mostly copy-pasting bits of code as my framework and customizing it to make my emails work. I have this bit of code for my email, but I can't seem to get the opt-in button to center. I've tried reading other similar questions, but my knowledge of coding is that of a beginner, and I can't understand how their coding solutions, in which the code is slightly different, relates to my code to find a solution. I was adding style=text-align: center; in a few spots, but it wasn't working. There were other solutions, but I didn't quite understand how they would work in my code. I've been trying to fix this things for hours now. So very frustrated.
Other than the centering it works in the email.
<td valign="middle" style="text-align: center; padding: 0px 10px 10px
0px;">You've previously contacted us at Business Name. <br>We
are <b>only sending this email once</b> to our current client list to
invite you to join our new free monthly e-newsletter. <br>
style="text-align: center;
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr>
<td>
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td style="border-radius: 2px;" bgcolor="#018736">
<a href="https://www.businessname.com/community-
newsletter.html" target="_blank" style="padding: 10px 32px; border: 1px
solid #018736;border-radius: 2px;font-family: Helvetica, Arial, sans-
serif;font-size: 24px; color: #ffffff;text-decoration: none;font-
weight:bold;display: inline-block;">
OPT-IN
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>Grief is a difficult thing. If you choose not to join our free
monthly newsletter at this time we understand, but will not be sending
any other emails to you going forward. <br><br></td>
Use this code below:
<td valign="middle" style="text-align: center; padding: 0px 10px 10px
0px;">You've previously contacted us at Handsome Stitchery. <br>We
are <b>only sending this email once</b> to our current client list to
invite you to join our new free monthly e-newsletter. <br>
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr>
<td style="text-align:center;">
<table cellspacing="0" cellpadding="0" style="margin:0 auto;">
<tbody><tr>
<td style="border-radius: 2px;" bgcolor="#018736">
<a href="https://www.handsomestitchery.com/community-
newsletter.html" target="_blank" style="padding: 10px 32px; border: 1px
solid #018736;border-radius: 2px;font-family: Helvetica, Arial, sans-
serif;font-size: 24px; color: #ffffff;text-decoration: none;font-
weight:bold;display: inline-block;">
OPT-IN
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>Grief is a difficult thing. If you choose not to join our free
monthly newsletter at this time we understand, but will not be sending
any other emails to you going forward. <br><br></td>
Going off what you have, I think throwing style="text-align: center; on the <td> that your link button is in should do the trick. Also you might want to get rid of the other style="text-align: center; that is floating above the first tag, it is code that is showing up as text on your page.
I have created an email signature in HTML and would like to use it in Outlook 2010. However, there are few things I am getting stumped on.
Some preface info:
(I included my logo, and four social media icons with links in my signature. I just uploaded the images to dropbox and linked to them in my code)
My code opened fine and looked as it should it my browser, so I saved the code to the signatures folder. I went to compose a new message and tried inserting my signature, but no dice. Outlook recognizes that the signature exists in the signature folder, but when I click on it, it isn't included in the message.
I read here that Outlook needs 3 different files (in .htm, .txt and .rtf formats). in order for a signature to work. But I'm not convinced that this is the case. To test this theory, I went to htmlsig.com and created a signature. It was just a simple html document. I downloaded the signature and saved it to the signature folder. I then opened Outlook, created a new message, and was able to insert that signature just fine.
I opened up the signature folder to see what kinds of files were in there, and the only file in there was a single Chrome HTML document.
My question:
How can I add my html file to be used as an email signature?
In case you were curious, here is my source code: (Its a work in progress)
<!DOCTYPE html>
<html>
<body>
<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; margin-bottom: 10px;">
<img src="https://dl.dropboxusercontent.com/s/ccjrncxekbz4k1p/Transparent%20logo.jpg?dl=0" alt="MidWest Quality Gloves" border="0" class="sig-logo" height="115" width="133">
</p>
<p class="social-list" style="font-size: 0px; line-height: 0; font-family: Helvetica, Arial, sans-serif;">
##facebook##
<a style="text-decoration: none; display: inline;" class="social signature_facebook-target sig-hide" href="https://www.facebook.com/MidwestGlove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="facebook.jpg" src="https://dl.dropboxusercontent.com/s/42pre6zyk40xa98/Facebook.jpg?dl=0" alt="Facebook">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_facebook-sep social-sep">
</span>
##instagram##
<a style="text-decoration: none; display: inline;" class="social signature_instagram-target sig-hide" href="https://www.instagram.com/midwestglove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="instagram.jpg" src="https://dl.dropboxusercontent.com/s/dmrbysqop83moq8/instagram.jpg?dl=0" alt="Instagram">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_instagram-sep social-sep">
</span>
##pinterest##
<a style="display: inline; text-decoration: none;" class="social signature_pinterest-target sig-hide" href="https://www.pinterest.com/mwglove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="pinterest.jpg" src="https://dl.dropboxusercontent.com/s/9ejjex9wzksbvy3/pinterest.jpg?dl=0" alt="Pinterest">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_pinterest-sep social-sep">
</span>
##LinkedIn##
<a style="text-decoration: none; display: inline;" class="social signature_linkedin-target sig-hide" href="https://www.linkedin.com/company/midwest-quality-gloves-inc">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="linkedin.jpg" src="https://dl.dropboxusercontent.com/s/b6ceobojyt3zjle/linkedin.jpg?dl=0" alt="linkedin">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_linkedin-sep social-sep">
</span>
</body>
</html>
Back in the time when i used outlook 2010 i remember that i had to go to the Signatures panel and create a new one with some text. Then went to:
C:\Users\MYNAME\AppData\Roaming\Microsoft\Signatures
Edited the .htm signature file that was created and replaced the content with my html code, saved and restarted outlook. Can't really explain for certain why and how.
The links in my email buttons don't redirect the user when they are clicked on, even a simple redirect as shown in the code snippet below has no effect when clicked.(tested in hotmail, gmail, yahoo mail so far). Any suggestions?
<p >
If you feel your email account has been compromised please take the appropriate steps to secure your account.<br />
Please click the button below so we can remove this registration request.<br />
<table cellspacing="10" cellpadding="0">
<tr>
<td align="center" width="240 " height="36" bgcolor="#0478db" style="margin-left:15px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color :ghostwhite !important; display: block;">
<a href="http:\\www.google.com" style="color: #ffffff; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Delete Registration Request
</a>
</td>
</tr>
</table>
</p>
When clicked on in gmail it takes me to a blank page; about:blank. In hotmail and Yahoo nothing happens
The url syntax you have used is wrong
Urls are supposed to be like http://www.google.com not like http:\\www.google.com
Try updating the URL as below
<p >
If you feel your email account has been compromised please take the appropriate steps to secure your account.<br />
Please click the button below so we can remove this registration request.<br />
<table cellspacing="10" cellpadding="0">
<tr>
<td align="center" width="240 " height="36" bgcolor="#0478db" style="margin-left:15px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color :ghostwhite !important; display: block;">
<a href="http://www.google.com" style="color: #ffffff; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Delete Registration Request
</a>
</td>
</tr>
</table>
</p>
I am making email templates so I am limited with what I can do.
I've got align="center" but I still need space between the two spans. How can I do this?
CODE:
<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
</td>
NOTE: I can't use margins or padding in email templates.
Margin is not supported in all email clients. I've also had some slight inconsistencies in padding in the past, although it does work.
Might seem like a hack (but isn't html for email that anyway?) - safest way in email is to use multiple together like so: .
I'd also use <font> tags instead of <span>, they are more consistent.
is padding what you are looking for?
span{
padding-left: 15px;
}
Try this CSS:
span{
margin-right: 10px;
}
Here is Demo: http://jsfiddle.net/84qyG/
Consider doing this:
<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span> <span style="color: #ffffff;
font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
</td>
Notice the subtle & nbsp; between the spans.
Not sure why you can't use margins though. Also, is there a reason you're using td? I'm guessing it's part of a table?
I believe what you are actually looking for is
display: block;
Ex. http://jsfiddle.net/kshreve/5jNGu/
Another way you could do this is to add <br/> after the closing spans.
Edit: You should also look into adding CSS classes to reduce the amount of redundant styling
Consider inserting an empty div in between the 2 span tags?
.spacer {
display: inline-block;
width: 10px;
}
Either using multiple non-break-space characters or spacer image can solve your problem.
<span style="">text #1</span><img src="images/spacer.gif" alt="" border="0" width="10" height="1" /><span style="">text #2</span>
You could use padding or margin:
http://jsfiddle.net/tpXF4/
<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;padding-right:30px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
</td>
If you are using jsx/React you can use back ticks:
<span>{` My text...`}</span>
Just add a whitespace to start your text (or end your text)