Textarea losing styles in email coldfusion

Question

I have a textarea where I have the body of the email with style like below. But the email does not retain any of the below styles in outlook. I have <cfmail type="html". Any ideas on how to retain the styles I have below. The extra html tags have closing tags in another footer file that I am including on the email.

  <textarea  name="email_body">
    <table class="one-column" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing:0" bgcolor="#FFFFFF">
          <tr><td align="left" style="padding:10px 40px 40px 40px"><p style="color:#5f6971; font-size:20px; text-align:left; font-family: Helvetica, Arial, sans-serif"><strong>Dear Dr. <cfoutput>#user.fname# #user.lname#</cfoutput>, </strong></p><p style="color:#5f6971; font-size:16px; text-align:left; font-family: Helvetica, Arial, sans-serif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.        

        Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p></td></tr></table>
                <strong> <cfoutput>#user.detail#</cfoutput></strong>
              <center><table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr><td><table border="0" cellpadding="0" cellspacing="0"><tr><td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;</td></tr></table><table border="0" align="center" cellpadding="0" cellspacing="0" style="Margin:0 auto;"><tbody><tr><td align="center"><table border="0" cellpadding="0" cellspacing="0" style="Margin:0 auto;"><tr><td width="250" height="60" align="center" bgcolor="#1a99e6"><a href="http://www.example.net" target="_blank" style="width:250; display:block; text-decoration:none; border:0; text-align:center; font-weight:bold;font-size:18px; font-family: Arial, sans-serif; color: #ffffff; background:#1a99e6" class="button_link">View the User Detail</a></td></tr></table></td></tr></tbody></table></td></tr>
                </table></center></td></tr>
        </table></textarea>

Have you tried viewing the email in a web-based email client like gmail? I ask because Outlook does not support the full CSS specification for emails. Take a look here to see all the things Outlook does NOT support: https://www.campaignmonitor.com/css/email-client/outlook-2007-16/ If it renders as expected in a web-based client, then the level of Outlook support could be the culprit. — Scott Rogers, Oct 13 '17 at 13:27

score 0 · Answer 1 · answered Oct 06 '17 at 18:02

You want HTML to be the inputted content of the textarea, right? You need to encode the content then.

<cfsavecontent variable="content">
    <table class="one-column" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing:0" bgcolor="#FFFFFF">
        <tr>
            <td align="left" style="padding:10px 40px 40px 40px">
                <p style="color:#5f6971; font-size:20px; text-align:left; font-family: Helvetica, Arial, sans-serif">
                    <strong>Dear Dr. <cfoutput>#user.fname# #user.lname#</cfoutput>,</strong>
                </p>
                <p style="color:#5f6971; font-size:16px; text-align:left; font-family: Helvetica, Arial, sans-serif">
                    Lorem ipsum dolor sit amet, ...
                </p>
            </td>
        </tr>
    </table>
    <strong><cfoutput>#user.detail#</cfoutput></strong>
    <p>etc.</p>
</cfsavecontent>

<textarea name="email_body">
    <cfoutput>#encodeForHtml(content)#</cfoutput>
</textarea>

<cfsavecontent> stores your desired input into the variable content.
encodeForHtml() encodes the text of said variable, so it's not recognized as actual HTML/markup (a.k.a. < is <, > is > etc.), but as literal text.

I put the html into , just added the encodeForHtml(content) now, still the same behavior. — user747291, Oct 06 '17 at 18:17

score 0 · Answer 2 · answered Oct 06 '17 at 18:17

I recently had to write a page to allow our mailmeisters to investigate delivery problems. I did it the easy way.

Form page

<cftextarea richtext="yes" name="mailBody" rows="80" cols="30" height="500"></cftextarea>

Action page

<cfmail from="#session.username# <#form.sender#>" 
to="#form.recipients#" subject="Test Mail" type="html">

#form.mailBody#

<p>This mail was sent using ColdFusion.</p>
</cfmail>

It works magnificently. I use ColdFusion version 9.

Textarea losing styles in email coldfusion

2 Answers2

Linked