Advanced Mail Templates with Conditional HTML tags for Outlook

Tagged: html, mail, tags, templates

This topic has 13 replies, 2 voices, and was last updated 2 years, 6 months ago by Anonymous.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
Sat 30 Oct 2021 at 13:10 #63352
Anonymous
Inactive
Hi all,

I’m trying to implement some more advanced mail templates that work in as many mail clients as possible. To that end I found several sites that recommend to use conditional HTML tags ans so-called “to work around MS Outlook problems. This guide for example -> https://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email–webdesign-12978
Specifically, a so-called “Ghost-Table” with this code block:
```

    [Container goes here]

```
Using the extra HTML tags in EME settings I managed to keep the !--[if mso] tag but the closing ![endif] gets stripped out not matter what.

Same with another code block and the Outlook-specific <o:> tags
```
 <noscript>
        <xml>
            <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
    </noscript>
```
Any ideas?

This is probably not strictly an EME question, but searching this forum plus addtional googling didn’t yield any usable help for me either (plus I’m no WordPress specialst, unfortunately).

Thank you!
Sat 30 Oct 2021 at 14:30 #63354

Franky
Keymaster

The next version will allow all html if the user has the wp-rights for that (but still strip out javascript). This is a bit like wordpress posts are handled.

Sat 30 Oct 2021 at 14:35 #63355

Anonymous
Inactive

WOW!
Amazing. Thank you!!!

To clarify for me: does this mean, we don’t need to use the extra HTML tags in EME settings anymore?
And which WP rights are you talking about? I assume as Admin I’ll have the approriate rights, correct?

Thanks again!!

Sat 30 Oct 2021 at 18:47 #63358

Franky
Keymaster

Yes, as admin it will be ok. A notice will be shown where it is allowed.

Sun 31 Oct 2021 at 00:45 #63359

Franky
Keymaster

If you’re willing to try out the dev-version, that should work fine now.

Sun 31 Oct 2021 at 08:22 #63360
Anonymous
Inactive
Thanks for the dev version. But I’m afraid I still see all the stripping out going on.
And if I remove all the “extra HTML tags” from EME settings, then it’s really bad.

This is what I input in the Booking Made Email Body (for clarity, only the first part):
```
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title>NOW2022EME Booking Approved - E-Mail Template</title>
    
    <style>
        @font-face {
     ...
   </style>
</head>

<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;">
    <div role="article" aria-roledescription="email" lang="en" style="text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;">
        
        <table role="presentation" style="width:100%;border:none;border-spacing:0;">
            <tr>
                <td align="left" style="padding:20px;">
                    
                    

                    
                    <table role="presentation" style="table-layout: fixed;width: 100%; max-width:980px;border:none;border-spacing:0;text-align:left;font-family: 'Open Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif;font-size:20px;line-height:1.5;color:#2a3646;">
```
++++++++++++++++++++++++++++++++

And this is what’s left after saving:
```
    
    
    
    <title>NOW2022EME Booking Approved - E-Mail Template</title>
    
    
        table {border-collapse:collapse;border-spacing:0;border:none;margin:0;}
        div, td {padding:0;}
        div {margin:0 !important;}
    
    
        
            
            96
            
        
    
    
    
        @font-face {
        ...
                }
    

    <div role="article" lang="en" style="background-color:#ffffff">
        
        <table role="presentation" style="width:100%;border:none;border-spacing:0">
            <tr>
                <td align="left" style="padding:20px">
                    
                    
                    <table role="presentation" align="center" style="width:980px">
                    <tr>
                    <td>
                    

                    
                    <table role="presentation" style="width: 100%;max-width:980px;border:none;border-spacing:0;text-align:left;font-family: 'Open Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif;font-size:20px;line-height:1.5;color:#2a3646">
```
It seems that this is the exaxt same behaviour as before – as if the dev version had not been used. Any ideas?
Sun 31 Oct 2021 at 08:39 #63361

Franky
Keymaster

Where did you enter that? Did you see the text “Your account has the ability to post unrestricted HTML content.” there (beliw the input field)? Edit e.g. a template, you’ll see there.

Maybe I overlooked some settings (and not all settings are “totally free”), it is still dev of course 🙂

Sun 31 Oct 2021 at 09:25 #63362

Anonymous
Inactive

Hah!

Classic misunderstanding – I used the “Mail Templates” under EME Settings, not the Templates section 🙂

Now that I tried that – created a new Template and then assigned it to the RSVP Mail Templates for the Events – it worked just fine.
And yes, when creating the template, it now says “Your account has the ability to post unrestricted HTML content.”
This I didn’t see in the Mail Template section under EME Settings, of course…

So, as far as my issue is concerned – it’s solved! Thank you.
(Using a specific template for RSVP mails is the better way to do it, anyway)

Sun 31 Oct 2021 at 09:27 #63363

Franky
Keymaster

Also, if you decide to add html-header and body tags the current mail-tarcking url (if being added) will not be added correctly. I’m already changing the code to take that into account.
And I’ll check the mailer-part for unfiltered html too.

Sun 31 Oct 2021 at 09:29 #63364

Franky
Keymaster

Code updated

Sun 31 Oct 2021 at 09:34 #63365

Franky
Keymaster

Btw: I tested your html in a template, and there it works ok. I’ll leave it up to your testing for html-mail outcome in a mail itself, but I doubt you should be using html+header tags, the phpmailer software probably won’t like it. So I recommend just the body-part.

Sun 31 Oct 2021 at 09:45 #63366
Anonymous
Inactive
Thanks again – for all the additional info and updates!

Regarding your last remark: I was wary about using a full HTML document as a template myself. But I did relative extensive testing with alot of email clients and it works well throughout. So I’m confident moving forward with this now.

Here’s the list of clients I tested the template on (perhaps this can help others):
- MS Outlook 2016
- Outlook Web App
- Gmail Web
- Gmail Android App
- Apple Mail on Mac
- Apple Mail on iPhone
- Nextcloud Email Web
- Rainloop App on Nextcloud
- Roundcube Webmail
- Fair Email Android App
Sun 31 Oct 2021 at 09:58 #63367

Franky
Keymaster

It is not that I don’t trust email clients, but more the wordpress phpmailer class working fine with it 🙂 Also, I would never use html for outlook clients specifically, but that’s just me (I’m not much of a layout man 🙂 ).
But feel free to test the dev-version, see what it gives now.

Sun 31 Oct 2021 at 12:43 #63368

Anonymous
Inactive

I see your point. In my case, the emails we send out to our participants are rather long and contain all sorts of additional info about our conference. So in order to make it digestible, I need/want to have some nice layout going. Plus, I AM a layout man, less a coder 🙂

So, the latest dev version is awesome. Didn’t find any issues. On my end, it worked exactly as the prior dev version.

Thank you.
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The forum ‘How do I …’ is closed to new topics and replies.