0

Background: I have an Email Template that was developed in Visualforce Page with a static resource (Bootstrap).

When I preview the email, it looks as expected:

enter image description here

When I Test Merge & Send, the formatting is removed:

enter image description here

Here is the VF Code:

<messaging:emailTemplate subject="Your secure link to 's Loan Application" recipientType="Lead" relatedToType="Lead">
    <messaging:htmlEmailBody >

        <html lang="en">

        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title> Loan Application</title>

            <!-- Bootstrap -->
            <!-- CSS only -->
            <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
                integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
                crossorigin="anonymous" /> -->
                
            <!-- <apex:stylesheet value="{!URLFOR($Resource.Bootstrap_4_5_0,'Bootstrap_4_5_0/bootstrap-4.5.0-dist/css/bootstrap.min.css')}"/> -->
            
            <link href="{!URLFOR($Resource.Bootstrap_4_5_0, 'bootstrap-4.5.0-dist/css/bootstrap.min.css')}" rel="stylesheet" />
            
            <!-- <apex:stylesheet value="{!URLFOR($Resource.Bootstrap_min_css_4_5_0, 'bootstrap.min.css')}"/> -->

            
        </head>

        <style>
            a:link:active, a:visited:active {
                color: white;
            }
        </style>

        <body style="background-color: rgba(245, 245, 245);">

            <br></br>

            <div class="container">
                <div class="row">
                    <div class="col-sm" style="background-color: white; padding-left: 10%; padding-right: 10%">
                        <br></br>
                        <p>
                            {!recipient.name},
                        </p>
                        <br></br>
                        <p style="color:red">
                            <b>
                                Congratulations on taking the first step in funding your business!
                            </b>
                        </p>

                        <p>
                            It was a pleasure speaking with you and learning more about the funding requirements of your
                            business. At we're committed to providing you with excellent customer service
                            and working capital that will help your business grow.
                        </p>
                        <br></br>
                        <p>
                            To get started, please fill out our  loan application:
                        </p>
                        <br></br>
                        <p>
                            <button type="button" class="btn btn-danger">
                                <a href="{!$Setup.Instance_Settings__c.Base_URL__c}{!recipient.DLP_Token__c}" style="color:white"><b>APPLY NOW</b></a>
                            </button>

                        </p>
                        <br></br>
                        <p>
                            I'm looking forward to working with you and helping your business succeed
                        </p>
                        <br></br>
                        <p style="font-weight: bold;">
                            Rep Name | Rep Title
                        </p>
                    </div>
                </div>

                <br></br>

                <div class="row">
                    <div class="col-sm" style="padding-left: 10%; padding-right: 10%; font-size: small">
                        <p>
                            Products offered by Funding, LLC and affiliates are business loans only. The
                            products
                            may be provided by third parties and subject to lender approval. Loans to customers in

                        </p>
                        <br></br>
                        <hr>
                        </hr>
                        <br></br>
                        <p style="font-style: italic; text-align: center;">
                            Copyright © 2020 , LLC. All rights reserved.
                        </p>
                    </div>
                </div>
            </div>

        </body>

        </html>
    </messaging:htmlEmailBody>
</messaging:emailTemplate>

As you can see in the VF code, I have tried a few different formats to get this to work. I am not sure why the HTML Preview is showing the Email template one way but when I actually send the email it is being sent/received without the expected resource formatting. I have tested a multiple email platforms including Outlook & Gmail. I have gotten the the HTML Preview formatting to work with both of the following:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
                integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
                crossorigin="anonymous" />
<link href="{!URLFOR($Resource.Bootstrap_4_5_0, 'bootstrap-4.5.0-dist/css/bootstrap.min.css')}" rel="stylesheet" />
  1. Has anyone experienced this issue before?
  2. Is this an issue with how I am referencing the resource in the VF Page?
  • Do referenced static resources has Public as Cache control? – kurunve Jul 13 at 19:14
  • Yeah, Cache control on the static resource is currently set to public – Max Jul 13 at 19:39
  • HTML for emails is not like HTML for browsers. These days it's relatively easy to build websites that display well in all major browsers, but email clients are still finicky. If the intention is that as many people as possible can open your email then you will most likely have to rebuild your template completely. Take a look at this website if you'd like to know more webdesign.tutsplus.com/articles/… – Kasper Jul 13 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.