Responsive emails

michiganawesome

Asked on April 11, 2018 at 11:34 AM

I am inputting responsive HTML emails (code below) in the autoresponder but all the styles making it responsive are stripped by your editor. Is there anything that can be done to keep those styles intact so the emails show up properly on mobile devices?

<!DOCTYPE html>

<head>

<title>Your Good Ink Printing Quote</title>

/* CLIENT-SPECIFIC STYLES */

#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */

.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */

body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */

table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */

img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

/* RESET STYLES */

body{margin:0; padding:0;}

img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}

table{border-collapse:collapse !important;}

body{height:100% !important; margin:0; padding:0; width:100% !important;}

/* iOS BLUE LINKS */

.appleBody a {color:#68440a; text-decoration: none;}

.appleFooter a {color:#999999; text-decoration: none;}

/* MOBILE STYLES */

@media screen and (max-width: 525px) {

/* ALLOWS FOR FLUID TABLES */

table[class="wrapper"]{

width:100% !important;

}

/* ADJUSTS LAYOUT OF LOGO IMAGE */

td[class="logo"]{

text-align: left;

padding: 20px 0 20px 0 !important;

}

td[class="logo"] img{

margin:0 auto!important;

}

/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */

td[class="mobile-hide"]{

display:none;}

img[class="mobile-hide"]{

display: none !important;

}

img[class="img-max"]{

max-width: 100% !important;

height:auto !important;

}

/* FULL-WIDTH TABLES */

table[class="responsive-table"]{

width:100%!important;

}

/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */

td[class="padding"]{

padding: 10px 5% 15px 5% !important;

}

td[class="padding-copy"]{

padding: 10px 5% 10px 5% !important;

text-align: center;

}

td[class="padding-meta"]{

padding: 30px 5% 0px 5% !important;

text-align: center;

}

td[class="no-pad"]{

padding: 0 0 20px 0 !important;

}

td[class="no-padding"]{

padding: 0 !important;

}

td[class="section-padding"]{

padding: 40px 15px 40px 15px !important;

}

td[class="section-padding-bottom-image"]{

padding: 40px 15px 0 15px !important;

}

/* ADJUST BUTTONS ON MOBILE */

td[class="mobile-wrapper"]{

padding: 10px 5% 15px 5% !important;

}

table[class="mobile-button-container"]{

margin:0 auto;

width:100% !important;

}

a[class="mobile-button"]{

width:80% !important;

padding: 15px !important;

border: 0 !important;

font-size: 16px !important;

}

*[class="gmail-fix"] {

display: none !important;

}

</style>

</head>

<tr>

We've received your quote request (#{quoteId}) and will be in touch soon!

</div>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

<tr>

<tr>

<td>

<tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<td align="center" style="font-size: 36px; font-family: Helvetica, Arial, sans-serif; color: #043a72; padding-top: 20px;" class="padding-copy">We're working on your quote!</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<p>Hello!</p>

<p>Thank you for considering Good Ink for your custom apparel needs! We're working on finalizing your quote and you'll be hearing from us soon.</p>

<p>If anything looks off about the quote below, please do not hesitate to contact us by <a href="mailto:hello@goodink.com" style="color:#2dcc70;">replying to this email</a> or calling (616) 294-8884.</p>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<p style="font-size: 18px; color: #043a72; font-weight: bold; margin-top:0;">Quote Summary:</p>

<p style="margin-top: 4px; margin-bottom: 4px;">Quote Number: {quoteId}</p>

<p style="margin-top: 4px; margin-bottom: 4px;">{garmentQty} x {garment}</p>

<p style="margin-top: 4px; margin-bottom: 4px;">Front Inks: {frontInks} | Back Inks: {backInks}</p>

<p style="margin-top: 4px; margin-bottom: 4px;"><strong>Cost Per Shirt</strong>: ${totalPerShirt}</p>

<p style="margin-top: 4px; margin-bottom: 4px;"><strong>Total</strong>: ${total}</p>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<p style="font-style:italic; color:#929395;">P.S. Did you know that you can fundraise with custom shirts for free?! <a href="https://goodink.com/how-it-works?utm_source=jotform&utm_medium=email&utm_campaign=customer-quote" style="color:#2dcc70;">Find out how it works here.</a></p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<tr>

<span class="appleFooter" style="color:#666666;">GoodInk.com LLC | 12330 James St, Suite H030 | Holland, MI, 49424</span><!--<br>

<a class="original-only" style="color: #666666; text-decoration: none;">Unsubscribe</a><span class="original-only" style="font-family: Arial, sans-serif; font-size: 12px; color: #444444;">   |   </span><a style="color: #666666; text-decoration: none;">View this email in your browser</a>-->

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Brody_S

Replied on April 11, 2018 at 12:30 PM

I have set up an autoresponse email on a test form using your custom HTML, this is the result on mobile:

1523464008testscreenshot Screenshot 10

Here's a quick guide to help you set it up:

1523464051stepone Screenshot 21

1523464070steptwo Screenshot 32

1523464089stepthree Screenshot 43

Note: Delete everything from the Email content box, only paste the code inside of the source code editor!

1523464111finalstep Screenshot 54

Hopefully, this will help you resolve any issues you may have.

If you have any further questions feel free to let us know!

Best regards.

michiganawesome

Replied on April 11, 2018 at 12:38 PM

Thanks for your response. While it looks ok in the Gmail app on Android, other clients do not behave that way. iOS mail app preview attached below. I would like to know if the responsive styles that I have input in the email body can be maintained and not stripped out by the editor somehow.

1523464674IMG 94063DCBDAD8 1 Screenshot 10

Brody_S

Replied on April 11, 2018 at 12:45 PM

In this case, the problem is with the HTML code itself (if the editor was stripping the CSS then it wouldn't work on Android either).

I will take a look at the code and get back to you shortly!

michiganawesome

Replied on April 11, 2018 at 12:54 PM

The code I provided, when used in other email service providers is responsive in all mobile mail clients. The issue is that the styles in the <head> are being stripped out by the JotForm email editor (examples below). I believe, and could be mistaken, that the Gmail app on Android will attempt to make non-responsive emails responsive.

PRIOR TO PASTING IN TO JOTFORM'S EDITOR:

<head>

<title>Your Good Ink Printing Quote</title>

/* CLIENT-SPECIFIC STYLES */

#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */

.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */

body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */

table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */

img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

/* RESET STYLES */

body{margin:0; padding:0;}

img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}

table{border-collapse:collapse !important;}

body{height:100% !important; margin:0; padding:0; width:100% !important;}

/* iOS BLUE LINKS */

.appleBody a {color:#68440a; text-decoration: none;}

.appleFooter a {color:#999999; text-decoration: none;}

/* MOBILE STYLES */

@media screen and (max-width: 525px) {

/* ALLOWS FOR FLUID TABLES */

table[class="wrapper"]{

width:100% !important;

}

/* ADJUSTS LAYOUT OF LOGO IMAGE */

td[class="logo"]{

text-align: left;

padding: 20px 0 20px 0 !important;

}

td[class="logo"] img{

margin:0 auto!important;

}

/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */

td[class="mobile-hide"]{

display:none;}

img[class="mobile-hide"]{

display: none !important;

}

img[class="img-max"]{

max-width: 100% !important;

height:auto !important;

}

/* FULL-WIDTH TABLES */

table[class="responsive-table"]{

width:100%!important;

}

/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */

td[class="padding"]{

padding: 10px 5% 15px 5% !important;

}

td[class="padding-copy"]{

padding: 10px 5% 10px 5% !important;

text-align: center;

}

td[class="padding-meta"]{

padding: 30px 5% 0px 5% !important;

text-align: center;

}

td[class="no-pad"]{

padding: 0 0 20px 0 !important;

}

td[class="no-padding"]{

padding: 0 !important;

}

td[class="section-padding"]{

padding: 40px 15px 40px 15px !important;

}

td[class="section-padding-bottom-image"]{

padding: 40px 15px 0 15px !important;

}

/* ADJUST BUTTONS ON MOBILE */

td[class="mobile-wrapper"]{

padding: 10px 5% 15px 5% !important;

}

table[class="mobile-button-container"]{

margin:0 auto;

width:100% !important;

}

a[class="mobile-button"]{

width:80% !important;

padding: 15px !important;

border: 0 !important;

font-size: 16px !important;

}

*[class="gmail-fix"] {

display: none !important;

}

</style>

</head>

AFTER PASTING IN TO JOTFORM EDITOR:

David JotForm Support

Replied on April 11, 2018 at 1:29 PM

Our email editor does not allow for creating a full HTML page in the email. Paragraph, table and other various tags can be used and can be styled using inline styling. The email editor would remove Class declarations and style sheet CSS will be stripped.