BigAndini / ers

Event Registration System
GNU General Public License v2.0
10 stars 6 forks source link

E-Mail Design is broken in Gmail #337

Open smadamit opened 9 years ago

smadamit commented 9 years ago

v0.3.9

The design of the email looks for me like this (Gmail): email-design

Should it look like this? Or is there a kind of header-design?

BigAndini commented 9 years ago

Is this question still relevant or are there major changes on the email layout since this question? Please close if not important anymore.

smadamit commented 9 years ago

still relevant

BigAndini commented 9 years ago

Gmail show a special type of "HTML mail". Check what needs to be done that even Gmail can display the email correctly.

smadamit commented 9 years ago

This is part of the text I get after clicking: "Original anzeigen"

This is a message in Mime Format.  If you see this, your mail reader does not support this format.

--=_538790de483b2870c38585d484397072
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

 =C2=A0=C2=A0=C2=A0 =C2=A0=C2=A0=C2=A0 =0AEJC 2015 - 01.-09.08.2015 in B=
runeck, South Tyrol, Italy -=0Awww.ejc2015.org [http://www.ejc2015.org]=
 =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 =0A=0ADear Test 124 M=C3=BCl=
ler, =0A=0ATo receive this email in another language you can visit the r=
esend=0Aemail link=0A[https://preregpp.eja.net/order/email/D6W7G2NAUR4XW=
923GW32N2W8VHA64N17].=0A=0A=0Athis is the confirmation for your order=0A=
[https://preregpp.eja.net/order/view/D6W7G2NAUR4XW923GW32N2W8VHA64N17]=
=0Afrom 23.04.2015 with the order ID 5X3X9K12. =0A=0ANOTE: To receive th=
e email with your eTickets correctly, it is=0Aimportant that you add the=
 email address prereg@eja.net to your=0Aaddress book. =0A=0AThank you fo=
r registering for the 38th European Juggling Convention!=0AYour registra=
tion helps us to improve EJC 2015 for you and for all=0Afellow jugglers.=
 =0A=0AYou chose SEPA Bank Transfer as payment method. =0A=0ATo complete=
 your order, we need to receive your bank transfer within=0A14 days. If=
 you ordered a discounted ticket (phase 1 or phase 2),=0Aplease make sur=
e that your payment is processed within 14 days after=0Athe end of this=
 phase (i.e. 14th of May / 14th of July). =0A=0APlease transfer the amou=
nt by SEPA bank transfer to the following=0Aaccount: =0A=0ATo MAKE THE O=
RGAS LIFE EASY, please add the reason for payment:=0A5X3X9K12 =0A=0A =09=
=09Owner=0A =09=09STICHTING EUROPEAN JUGGLING ASSOCIATION=0A=0A =09=09IB=
AN=0A =09=09NL84 INGB 0007 8721 92=0A=0A =09=09BIC=0A =09=09INGBNL2A=0A=
=0A =09=09Bank=0A =09=09ING BANK N.V.=0A=0A =09=09Country=0A =09=09Nethe=
rlands=0A=0A =09=09Amount=0A =09=090,12=C2=A0=E2=82=AC=0A=0A =09=09reaso=
n for payment=0A =09=095X3X9K12=0A=0AMake sure to state your order ID 5X=
3X9K12 as the reference for the=0Atransfer. Otherwise we won't be able t=
o match your payment and your=0Aorder can't be processed. =0A=0ATo see i=
f we have already received your payment, you can visit the=0Afollowing l=
ink: Your order details=0A[https://preregpp.eja.net/order/view/D6W7G2NAU=
R4XW923GW32N2W8VHA64N17]=0A=0A=0APlease consider our general terms and c=
onditions=0A[https://preregpp.eja.net/info/terms], which are attached to=
 this=0Aemail. To be able to read the document, you need to install Adob=
e=0AAcrobat Reader, which you can download here:=0Ahttp://get.adobe.com/=
reader [http://get.adobe.com/reader] =0A=0AYour eTickets and further inf=
ormation concerning the 38th European=0AJuggling Convention will be deli=
vered in another email (not=0Aimmediately after your payment has been re=
ceived). =0A=0AWe are looking forward to welcoming you at 38th European=
 Juggling=0AConvention! =0A=0AOfficial EJC-T-Shirt and other aweseome EJ=
C merchandising products now=0Afor sale at http://www.stikkma.de/EJC-201=
5/en=0A[http://www.stikkma.de/EJC-2015/en] =0A=0ABest regards,=0A Your E=
uropean Juggling Association and the local 38th European=0AJuggling Conv=
ention organizers =0A-------------------------=0A=0AYou purchased the fo=
llowing items (ordered by Test 124 M=C3=BCller): =0A=0A TEST 124 M=C3=9C=
LLER =0A=0A =09=09PRODUCT=0A =09=09AMOUNT=0A =09=09PRICE=0A=0A =09=09 We=
ek Ticket =0A =09=091=0A =09=090,12=C2=A0=E2=82=AC=0A=0A =09=09Subtotal:=
=0A =09=090,12=C2=A0=E2=82=AC=0A=0A BEGLEITER M=C3=9CLLER =0A=0A =09=09P=
RODUCT=0A =09=09AMOUNT=0A =09=09PRICE=0A=0A =09=09 Week Ticket =0A =09=
=091=0A =09=090,00=C2=A0=E2=82=AC=0A=0A =09=09Subtotal:=0A =09=090,00=C2=
=A0=E2=82=AC=0A=0A =09=09Order amount:=0A =09=090,12=C2=A0=E2=82=AC=0A=
=0A =09=09Payment Charge:=0A =09=090,00=C2=A0=E2=82=AC=0A=0A =09=09TOTAL=
 AMOUNT:=0A =09=090,12=C2=A0=E2=82=AC=0A=0AThis mail was sent to you by=
 the EJC Registration System (ERS),=0Aoperated by the European Juggling=
 Association (EJA) on behalf of EJC=0A2015.=0AIf you have any questions=
 about your pre-registration, please contact=0Athe EJA pre-registration=
 coordinator at prereg@eja.net.=0A For more information about EJC 2015,=
 please visit=0Ahttp://www.ejc2015.org [http://www.ejc2015.org] or conta=
ct=0Ainfo@ejc2015.org.
--=_538790de483b2870c38585d484397072
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

=0A<html>=0A=C2=A0=C2=A0=C2=A0 <head>=0A=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0=C2=A0 <meta http-equiv=3D"Content-Type" content=3D"text/html;char=
set=3DUTF-8" />=0A        <style type=3D"text/css">=0A            * {=0A=
                font-family: sans-serif;=0A            }=0A            .=
header, .footer {=0A            =09width: 100%;=0A            =09text-al=
ign: center;=0A            =09padding: 1em;=0A            }=0A         =
   .header {=0A            =09margin-top: 0px;=0A            =09backgrou=
nd-color: #85b32a;=0A            =09color: #fff;=0A            }=0A    =
        .clear-both {=0A                clear: both;=0A            }=0A=
            .header > a {=0A            =09color: #fff;=0A           =
 =09font-weight: bold;=0A            =09text-decoration: none;=0A      =
      }=0A            .footer {=0A            =09background-color: #eeee=
ee;=0A            }=0A        </style>=0A=C2=A0=C2=A0=C2=A0 </head>=0A=
=C2=A0=C2=A0=C2=A0 <body>=0A        <div class=3D'header'>EJC 2015 - 01.=
-09.08.2015 in Bruneck, South Tyrol, Italy - <a href=3D'http://www.ejc20=
15.org'>www.ejc2015.org</a></div>=0A=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=
=C2=A0 =0A        <p>Dear Test 124 M=C3=BCller,</p>=0A        <p>To rece=
ive this email in another language you can visit the <a href=3D"https://=
preregpp.eja.net/order/email/D6W7G2NAUR4XW923GW32N2W8VHA64N17">resend em=
ail link</a>.</p>=0A        <p>this is the confirmation for=0A         =
   <a href=3D"https://preregpp.eja.net/order/view/D6W7G2NAUR4XW923GW32N2=
W8VHA64N17">your order</a>=0A            from 23.04.2015 with the =0A  =
          order ID 5X3X9K12.</p>=0A        <p><strong>Note:</strong> To=
 receive the email with your eTickets correctly, it is important that yo=
u add the email address prereg@eja.net to your address book.</p>=0A    =
    <p>Thank you for registering for the 38th European Juggling Conventi=
on! Your registration helps us to improve EJC 2015 for you and for all f=
ellow jugglers.</p>=0A        <p>You chose SEPA Bank Transfer as payment=
 method.</p>=0A                    <p>To complete your order, we need to=
 receive your bank transfer =0A                within 14 days. If you or=
dered a discounted ticket (phase 1 or =0A                phase 2), pleas=
e make sure that your payment is processed within =0A                14=
 days after the end of this phase (i.e. 14th of May / 14th of July).</p>=
=0A            <div>=0A        <p>Please transfer the amount by SEPA ban=
k transfer to the following account:</p>=0A    <p>To <strong>make the or=
gas life easy</strong>, please add the reason for =0A        payment: <s=
trong>5X3X9K12</strong></p>=0A    <table class=3D"table">=0A        <tr>=
=0A            <td>Owner</td>=0A            <td>STICHTING EUROPEAN JUGGL=
ING ASSOCIATION</td>=0A        </tr>=0A        <tr>=0A            <td>IB=
AN</td>=0A            <td>NL84 INGB 0007 8721 92</td>=0A        </tr>=0A=
        <tr>=0A            <td>BIC</td>=0A            <td>INGBNL2A</td>=
=0A        </tr>=0A        <tr>=0A            <td>Bank</td>=0A         =
   <td>ING BANK N.V.</td>=0A        </tr>=0A        <tr>=0A            <=
td>Country</td>=0A            <td>Netherlands</td>=0A        </tr>=0A  =
      <tr>=0A            <td>Amount</td>=0A            <td>0,12=C2=A0=E2=
=82=AC</td>=0A        </tr>=0A        <tr>=0A            <td>reason for=
 payment</td>=0A            <td>5X3X9K12</td>=0A        </tr>=0A    </ta=
ble>=0A    </div>            <p>Make sure to state your order ID <strong=
>5X3X9K12</strong> as the reference for the transfer. Otherwise we won't=
 be able to match your payment and your order can't be processed.</p>=0A=
            <p>To see if we have already received your payment, you can=
 visit the following link:=0A            <a href=3D"https://preregpp.eja=
.net/order/view/D6W7G2NAUR4XW923GW32N2W8VHA64N17">Your order details</a>=
</p>=0A                <p>Please consider our general=0A            <a h=
ref=3D"https://preregpp.eja.net/info/terms">terms and conditions</a>, wh=
ich are attached to this =0A                email. To be able to read th=
e document, you need to install =0A                Adobe Acrobat Reader,=
 which you can download here: =0A                <a href=3D"http://get.a=
dobe.com/reader">http://get.adobe.com/reader</a></p>=0A        <p>Your e=
Tickets and further information concerning the =0A            38th Europ=
ean Juggling Convention will be delivered in another email =0A         =
   (not immediately after your payment has been received).</p>=0A      =
  <p>We are looking forward to welcoming you at 38th European Juggling C=
onvention!</p>=0A        =0A        <!--<p>The official EJC 2015 T-Shirt=
 and other awesome merchandise-products =0A            will soon be avai=
lable for pre-ordering! We'll let you know as soon =0A            as the=
 merchandise-webshop is open.</p>-->=0A        =0A        <p>Official EJ=
C-T-Shirt and other aweseome EJC merchandising products now for sale at=
=0A            <a href=3D"http://www.stikkma.de/EJC-2015/en">http://www.=
stikkma.de/EJC-2015/en</a></p>=0A        =0A        <p>Best regards,<br=
 />=0A            Your European Juggling Association and the local =0A =
               38th European Juggling Convention organizers</p>=0A     =
   <hr />=0A        <p>You purchased the following items (ordered by =0A=
            Test 124 M=C3=BCller):</p>=0A        <div>=0A            <di=
v class=3D"package">=0A            <h3>=0A                Test 124 M=C3=
=BCller            </h3>=0A=0A                        <table class=3D"ta=
ble">=0A                <tr>=0A                    <th>Product</th>=0A =
                   <th class=3D"cart-amount">Amount</th>=0A            =
        <th class=3D"cart-price">Price</th>=0A                </tr>=0A =
                                   <tr>=0A                        <td>=
=0A                            <span class=3D"product-name">Week Ticket<=
/span>=0A                                                        </td>=
=0A                        <td class=3D"cart-amount">1</td>=0A         =
               <td class=3D"cart-price">0,12=C2=A0=E2=82=AC</td>=0A    =
                </tr>=0A                                <tr>=0A        =
            <td></td>=0A                    <td class=3D"cart-amount">Su=
btotal:</td>=0A                    <td class=3D"cart-price">0,12=C2=A0=
=E2=82=AC</td>=0A                </tr>=0A            </table>=0A       =
             </div>=0A            <div class=3D"package">=0A           =
 <h3>=0A                Begleiter M=C3=BCller            </h3>=0A=0A   =
                     <table class=3D"table">=0A                <tr>=0A =
                   <th>Product</th>=0A                    <th class=3D"c=
art-amount">Amount</th>=0A                    <th class=3D"cart-price">P=
rice</th>=0A                </tr>=0A                                   =
 <tr>=0A                        <td>=0A                            <span=
 class=3D"product-name">Week Ticket</span>=0A                          =
                              </td>=0A                        <td class=
=3D"cart-amount">1</td>=0A                        <td class=3D"cart-pric=
e">0,00=C2=A0=E2=82=AC</td>=0A                    </tr>=0A             =
                   <tr>=0A                    <td></td>=0A             =
       <td class=3D"cart-amount">Subtotal:</td>=0A                    <t=
d class=3D"cart-price">0,00=C2=A0=E2=82=AC</td>=0A                </tr>=
=0A            </table>=0A                    </div>=0A            <tabl=
e class=3D"table sum-table">=0A        <tr>=0A            <td>Order amou=
nt:</td>=0A            <td>0,12=C2=A0=E2=82=AC</td>=0A        </tr>=0A =
       <tr>=0A            <td>Payment Charge:</td>=0A            <td>0,0=
0=C2=A0=E2=82=AC</td>=0A        </tr>=0A        <tr>=0A            <th><=
span class=3D"total-amount">Total amount:</span></th>=0A            <th>=
<span class=3D"total-amount">0,12=C2=A0=E2=82=AC</span></th>=0A        <=
/tr>=0A    </table>=0A    <div class=3D"clear-both"></div>=0A</div>    =
    <div class=3D'footer'>This mail was sent to you by the EJC Registrat=
ion =0A            System (ERS), operated by the European Juggling Assoc=
iation (EJA) on =0A            behalf of EJC 2015.<br />If you have any=
 questions about your =0A            pre-registration, please contact th=
e EJA pre-registration =0A            coordinator at <a href=3D'mailto:p=
rereg@eja.net'>prereg@eja.net</a>.<br />=0A            For more informat=
ion about EJC 2015, please visit =0A            <a href=3D'http://www.ej=
c2015.org'>http://www.ejc2015.org</a> or =0A            contact <a href=
=3D'mailto:info@ejc2015.org'>info@ejc2015.org</a>.</div>=0A    </body>=
=0A</html>
--=_538790de483b2870c38585d484397072--
--=_6ad9509048b3cd71b12e3dd86ddc97fb
Content-Type: application/pdf
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="Terms-and-Conditions-ERS-EN-v3.pdf"

JVBERi0xLjUNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIv
TGFuZyhkZS1ERSkgL1N0cnVjdFRyZWVSb290IDI1IDAgUi9NYXJrSW5mbzw8L01hcmtlZCB0
cnVlPj4+Pg0KZW5kb2JqDQoyIDAgb2JqDQo8PC9UeXBlL1BhZ2VzL0NvdW50IDMvS2lkc1sg
MyAwIFIgMTggMCBSIDIyIDAgUl0gPj4NCmVuZG9iag0KMyAwIG9iag0KPDwvVHlwZS9QYWdl
L1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjEgNSAwIFIvRjIgOSAwIFIvRjMg
MTEgMCBSL0Y0IDEzIDAgUj4+L0V4dEdTdGF0ZTw8L0dTNyA3IDAgUi9HUzggOCAwIFI+Pi9Q
cm9jU2V0Wy9QREYvVGV4dC9JbWFnZUIvSW1hZ2VDL0ltYWdlSV0gPj4vTWVkaWFCb3hbIDAg
MCA1OTYuMDQgODQyLjA0XSAvQ29udGVudHMgNCAwIFIvR3JvdXA8PC9UeXBlL0dyb3VwL1Mv
BigAndini commented 8 years ago

To see the mail complete a purchase in the test system. As payment type the simplest way is to choose bank transfer. Could you have a look at the mail if it's still broken and maybe look into it how it's possible to display html mails in Gmail?

odegroot commented 8 years ago

It's still broken, as in: styles still do not get applied. This is because Gmail ignores all <style> elements. You can only use inline styles.

http://kb.mailchimp.com/campaigns/ways-to-build/about-html-email#Fundamental-Principles https://www.campaignmonitor.com/css/

Note that the header mentioned in this issue has recently been removed from the email - see issue #690 / PR #702, so the header no longer needs fixing. The orange text and footer are still unstyled though.

This could be fixed by converting the <style></style> element into inline <... style="">s.