Pro Tip: Get HTML Email Templates In Sitecore To Render Properly Across Gmail & Outlook

Introduction

Are you trying to use Sitecore Send Action to send emails, but things don't look, right?

• Spacing is misaligned?
• HTML Tags being replaced?
• Mail renders properly in Outlook but not Gmail?

There may be a simpler solution than trying to get the front-end guy to do it over.

The Solution

For this setup, we were using a custom send action to send emails out based on provided email templates.

The send mail action is typical on which inherited from Sitecore.ExperienceForms.Mvc.Processing.SubmitActions.SendEmail and overrode the Execute() method.

In the Forms Designer in the Sitecore CMS, we created the Customized Send Action.

Open the editor and edit the send action.

Here you would put your email template, which should be a self-contained HTML with embedded styles (and if there are external images to be pulled in, they should be hosted on the secure storage option, such as Azure Storage, etc.).

Now the issue with this is, the HTML must be properly formatted. That means there should be no EOL (End Of Line Characters) or unnecessary spaces /tabs within the tags. If there are spaces and EOL, this will cause problems when the email is rendered on web-based email clients such as Gmail or local clients such as windows Outlook or Apple Mail.

Notepad++

I accomplished this by using Notepad++ Edit options. Notepad++ is a really powerful text editor, which has some underused options, especially when it comes to text editing and formatting. Apart from the really cool plugin and extending framework, I used the "Edit" menu option to perform the following:

Line Operations

EOL Operations

With these options, I was able to strip away all spaces and EOLs (essentially converting the HTML to one contiguous line of code, which is how the web consumes and produces HTML anyway).

Hope this tip helps!