Style the confirmation Email

  • Resolved philwied

    (@philwied)


    2 years, 1 month ago

    Hi!
    I would like to style the confirmation e-mail and used everything that I found in your forums: https://www.mailpoet.com/blog/improve-your-signup-confirmation-email/ .

    When I set up HTML email like this (copying the html code), it is not styled correctly. The main problem ist the “Confirmation button” that should look attractive. But padding, … is not working at all.

    I am using the latest version of Mail Poet Premium and Mail Poet sending service. I think this issue can be reproduced very easy.

    Thank you and regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author MailPoet

    (@mailpoet)

    Hi there,

    Thanks for reaching out. Sorry to see you encountered problems with styling the Sign-Up Confirmation email.

    In my test, I can see it like this if I just copy paste the code from the tutorial + I have added optional code to show where users are subscribing to, placed below the confirmation button.

    Can you please share the code you’re trying to paste and the screenshot? Do you use any email software client to receive the email?

    Thank you!

    Thread Starter philwied

    (@philwied)

    Hi,

    thank you for answering.

    Here ist the code and the screenshot. As I already said, it is mainly the button, which is not styled very attractive. I am using Outlook (newest version).

    Code:

    <!doctype html><html><head><meta charset="UTF-8"><title>Thanks for signing up</title></head><body bgcolor="#ffede3">

<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffede3"><tr><td>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff"><tr><td colspan="3"><a href="https://www.mailpoet.com"><img style="display:block;border:0;outline:none;-ms-interpolation-mode:bicubic;" src="https://www.mailpoet.com/wp-content/uploads/2019/01/mailpoet-logo-orange-header.png" width="600" height="118" alt="MailPoet" /></a></td></tr><tr><td width="20"></td>

<td style="color:#071c6d;font-family:arial,sans-serif;font-size:15px;">
<b>Hello!</b>

Thanks for signing up. 

Please confirm your subscription so you can start receiving emails from us:

[activation_link]<span style="display:inline-block;padding:10px 40px;color:#ffede3;background:#fe5301;font-family:Arial, Tahoma,sans-serif;font-size:15px;font-weight:bold;text-decoration:none;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;">Confirm your subscription</span>[/activation_link]

If you didn't sign up for this, just ignore this email.

Best wishes,
The MailPoet Team

</td><td width="20"></td></tr></table>
</td></tr></table></body></html>

    Screenshot: https://we.tl/t-6WSkZxmzFl

    Regards

    • This reply was modified 2 years, 1 month ago by philwied.
    • This reply was modified 2 years, 1 month ago by philwied.
    • This reply was modified 2 years, 1 month ago by philwied.
    • This reply was modified 2 years, 1 month ago by philwied.
    • This reply was modified 2 years, 1 month ago by philwied.
    Plugin Author Bruna a11n

    (@bruberries)

    Hi @philwied,

    The code seems correct, and I could test the styling on my testing website as well.

    Can you please let us know if the problems related to the button’s HTML are happening on a specific email client only (i.e. Outlook)?

    Thread Starter philwied

    (@philwied)

    Hi @bruberries ,

    Thank you for having a look.
    I tried to receive the confirmation mail with another email client. And… IT IS WORKING FINE!
    But it would be fine, if it would work with Outlook too. Many people out there are using Outlook.

    Regards

    Plugin Author Bruna a11n

    (@bruberries)

    Hi @philwied,

    I know, and I agree it should be great to have the email properly rendered on all email clients.

    Unfortunately, that’s one of the reasons why we do not allow users to use custom HTML in our newsletter editor. It’s very difficult to control how they will be rendered.

    The Outlook desktop client, in particular, is known for rendering issues. That’s because Outlook versions since 2007 use Microsoft Word to render emails, and it renders restricted support for HTML and CSS. ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Style the confirmation Email’ is closed to new replies.