Problem with emails styles/formatting - Emails are losing all formatting when received

[mvpalves]

Your software
My PHP version is : 7.4.20
*My MySQL/MariaDB version is:
mariadb 10.3
Hostinger
SMTP Amazon SES

Hi guys!

I’ve installed the Mautic 4 and everything went well.

I’ve build some emails and got some problems with gmail formatting/styles, then I read that it must be inline css and also no external css files.

So I’ve done some simple emails with basically an image + button and it’s not working as it should. It seems that no formatting are being done to the elements of the email (not even texts).

The inline email that I’ve tested:

Then I tried another email, with just an image + text:

But same thing happened, my email formatting is being erased at gmail

Inside mautic the preview is working just fine. I’ve build my emails in many platforms in order to test it, but the results are always the same. The last one was build inside sendgrid

There are no error inside the log file.

What could this be? I’ve reinstalled the Mautic in another domain and I’m getting the same error.

Thanks!

[joeyk]

Hello!
Can you please check if you have the same HTML?
Open the letter in Gmail - 3 dots o the side rightclick - show original
What do you see if you compare?

[mvpalves]

Hey Joey! Thanks for your help!

I’ve done what you mentioned and noticed that for some reason the head tag is not closing, nor the body is opening (at least it’s what I noticed, I’m not that good with coding in general haha):

This is the original HTML (the one that I’ve used in the Blank theme builder on Mautic):
https://ajudafinanceiro.com/mautic/email_sent.html

The same one, but in txt:
https://ajudafinanceiro.com/mautic/email_sent.txt

This is what I got on gmail:
https://ajudafinanceiro.com/mautic/email_received.txt

I’ve build this email on sendgrid platform and then used the mailchimp inline tool

[joeyk]

I’ll take a look later.
The html doesn’t makes sense to you because it’s printed encoded. You need to copy the text add it to the bottom form here:
https://www.webatic.com/quoted-printable-convertor
An hit decode

[joeyk]

Another thing.

Never compare outlook with Gmail. If you want the best possible email, then create it in MJML here: mjml.io and copy it over to Mautic.

[mvpalves]

Thanks for the hints Joey!

I’ve tried a template from mjml.io, this one:
Email Editor

But even this one is not working as it should:

The same thing happened actually, the email lost the formatting (text and button).
Here is the original:
https://ajudafinanceiro.com/mautic/email_received-mjml.txt

I honestly have no idea why this is happening haha

[joeyk]

What is happening is, that head elements are not interpreted in the Mautic email builder.
So all this is disregarded:

<mj-head>
    <mj-attributes>
      <mj-all padding="0px"></mj-all>
      <mj-text font-family="Ubuntu, Helvetica, Arial, sans-serif" padding="0 25px" font-size="13px"></mj-text>
      <mj-section background-color="#ffffff"></mj-section>
      <mj-class name="preheader" color="#000000" font-size="11px"></mj-class>
    </mj-attributes>
    <mj-style inline="inline">a { text-decoration: none!important; color: inherit!important; }</mj-style>
  </mj-head>

Amd that makes your code break.
I would build a template from zero in MJML with inline styling.

Joey

[jaredrealtor]

This is happening with my instance of Mautic 4 as well. Even using the native builder results in the same result. The formatting gets lost.

[mvpalves]

Thanks Joey! Not sure why this is happening with my Mautic, I reinstalled it again and tried another domain, but the bug remained.

Then I installed Mautic 3.2.5 and it worked!

I don’t know why that is happening with Mautic 4, maybe it’s a conflict between mautic and my hosting (Hostinger) or something related to that.

I will wait a few patches to be released and hope the bug is fixed in the future.

For now I will keep using Mautic 3x for my projects.

Thanks for your support!

[jaredrealtor]

I fixed this accidentally. Not sure how. But I think the theme file I was using for email was named “email.html.twig” when it should be “email.mjml.twig”.

Then I had the other error that I couldn’t save the email in the builder. Editing the code in the builder and removing all references to “id=” fixed that issue.

[anil_naut111]

I got a quick work around for this to update the html code after creating a email sendout directly in sql table.
SELECT * FROM emails WHERE id = 40 ( id you can check in URL when you open the email in mautic), then edit the custom_html column data.

NOTE: We should not open builder after this, else it will update the html code again.

[rabii]

Is there any fix for this? i am having same problem, emails not rendered on both gmail and outlook. I am using mautic 4.4.12

[marcus42]

WYSIWYG are notorious for conflicting code since always. With that said I wouldn’t expect a “fix” within the next decade (sorry, not much helpful on that part).

The best I could suggest would be to clean your code before sending it.

I would also suggest to drop the CSS modern “best practice” and embrace web 1.0 CSS “best practice” (do not use CSS in the head for a starter).

[joeyk]

The fix is to make sure you use the builder right. You can learn this with some practice.

[rabii]

Thanks for your reply. Still new to Mautic so learning more. Mjml is the key, so much better than writing html with with inline css.
I think one thing that Mautic still needs a freshing up in design the UI is not that good and how data is structured is a bit messy. But i al grateful for such amazing product, great community too.
I appreciate your reply