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:
When I Test Merge & Send, the formatting is removed:
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" />
- Has anyone experienced this issue before?
- Is this an issue with how I am referencing the resource in the VF Page?
