Gmail Not Showing Emails with HTML Formatting

Wappler General Need Help
1

I'm experimenting with using HTML files in the "Send Mail" wappler component. Sending works with my provider, but when viewing the email, Gmail is not showing it how I've designed it in wappler.

I have the mail body set to "file" in the Send Mail component. I selected the email template I created, and set the format to HTML. I do not have my own html, head, or body tags defined in my template, just some CSS and the body of the email. It looks great in wappler, and I receive the email, it's just showing up as non-formatted HTML (it has links that work).

Digital Ocean sends me HTML formatted emails often. I noticed they have "Content-Type: multipart/alternative;" in the headers whereas wappler uses "Content-Type: text/html; charset=utf-8". AI suggests the multipart/alternative is the proper MIME type for most email clients.

Suggestions? What have you done to get formatted emails to show up correctly in email clients from wappler?

2

Email has attachments?

3

No attachments.

4

You need html and body tags in your email template.

5

The HTML and BODY tags are being removed by Wappler prior to sending. When I inspect the raw output of the sent email in my gmail client, these tags are missing. When I reopen the HTML email template file in my Wappler project, those tags are now missing from the file.

6

I've filed a bug as I was able to track down why the HTML tags were missing and what actions trigger this.

7

Is your email template displaying fine in gmail when the html and body tags are there?

8

No. Here's a snippet of what the raw output looks like from gmail:

Subject: FanFuser Signup Confirmation
Message-ID: <redacted>
Content-Transfer-Encoding: quoted-printable
Date: Wed, 15 Jan 2025 16:26:22 +0000
MIME-Version: 1.0
Content-Type: text/html; charset=utf-8

<meta charset=3D"UTF-8">
<meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=3D1.=
0">
<base href=3D"https:/<redacted>/emailTemplates/">
<style type=3D"text/css">
=09body {
=09=09font-family: sans-serif;
=09=09margin: 0;
=09=09padding: 20px;
=09=09background-color: #f4f4f4;
=09=09color: black;
=09=09line-height: 1.6;
=09}

Even though the email template file has the HTML, HEAD, and BODY tags still in it, they appear to be removed during processing of the Send Mail component

9

And in other clients you see it fine, it's just gmail?
Have you tried sending this email template using another service and not send mail step in Wappler? If yes is the result the same?

10

I sent the email to Hotmail, which rendered it correctly. However, the HTML, HEAD, and BODY tags were again missing in the message source so it was Hotmail that decided to render the mail as I intended.

This does still look like an issue with the Send Mail component at execution time. I've already filed a bug showing how to get Wappler to delete these HTML tags just by editing the template from within Send Mail.

11

David,

I design my email templates using Bootstrap Email without any problems.

Try their online editor:

1 Like
12

Hmmm, that looks interesting. Thanks @ben !

1 Like