I’ve been working on making a nicer format for email notifications.
I’ve put together a draft that looks fine in Gravity Forms Notifications Settings Visual Editor
… and in a Html Render, codeshack.i o/html-viewer
The issue that I’m facing is that in Gmail the template renders with extra spacing around the h1 at the top and around the Button.
Here’s the draft of the template
<table
border="0"
width="100%"
cellspacing="0"
cellpadding="0"
bgcolor="#f4f4f4"
>
<tbody>
<tr>
<td align="center">
<table
style="max-width: 600px; width: 100%;"
border="0"
width="600"
cellspacing="0"
cellpadding="0"
>
<!-- Header -->
<tbody>
<tr>
<td style="padding: 20px 20px 10px; text-align: center;">
<h1 style="font-size: 28px; color: #333333; margin: 0;">
Welcome to Save My Fur Baby!
</h1>
</td>
</tr>
<!-- Main Content -->
<tr>
<td
style="padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"
bgcolor="#ffffff"
>
<p
style="font-size: 16px; line-height: 24px; color: #333333; margin: 0 0 20px 0;"
>
Hi {First Name of Pet Owner:40},
</p>
<p
style="font-size: 16px; line-height: 24px; color: #333333; margin: 0 0 20px 0;"
>
Thank you for registering with Save My Fur Baby! We're excited
to have you and your furry friend join our community.
</p>
<p
style="font-size: 16px; line-height: 24px; color: #333333; margin: 0 0 30px 0;"
>
To complete your registration and access your profile, please
activate your account.
<strong>Username:</strong> {Email Address:5}
</p>
<!-- Bulletproof Button (Blue #4A90E2) -->
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 0 20px;" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<!-- [if mso]>
<td align="center" bgcolor="#4A90E2" style="border-radius: 8px;">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{activation_url}" style="height:50px;v-text-anchor:middle;width:250px;" arcsize="10%" stroke="f" fillcolor="#4A90E2">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:bold;">Activate My Account</center>
</v:roundrect></td>
<![endif]--><!-- [if !mso]><!-- -->
<td
style="border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;"
align="center"
bgcolor="#4A90E2"
>
<a
style="font-size: 18px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; padding: 15px 40px; display: inline-block; border-radius: 8px;"
href="{activation_url}"
target="_blank"
rel="noopener"
>
Activate My Account
</a>
</td>
<!--<![endif]-->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p
style="font-size: 16px; line-height: 24px; color: #333333; margin: 0 0 20px 0;"
>
If the button doesn’t work, copy and paste this link into your
browser:
<a
style="color: #4a90e2; text-decoration: underline;"
href="{activation_url}"
>{activation_url}</a
>
</p>
<p
style="font-size: 16px; line-height: 24px; color: #333333; margin: 0 0 20px 0;"
>
<strong>What happens next:</strong> After you activate your
account, you’ll receive a confirmation email.
</p>
<p
style="font-size: 16px; line-height: 24px; color: #333333; margin: 0;"
>
If you didn’t sign up for this account, you can safely ignore
this email.
</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td
style="padding: 20px 20px 30px; text-align: center; font-size: 14px; color: #666666;"
>
<p style="margin: 0 0 10px 0;">
We look forward to having you as part of our community!
</p>
<p style="margin: 0;">
Warm regards, <strong>The Save My Fur Baby Team</strong>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Here’s what appears in Chrome Dev Tools Elements when inspecting in Gmail:
<div class="">
<div class="aHl" id="avWBGd-324"></div>
<div id=":5v4" tabindex="-1"></div>
<div
class="ii gt"
jslog="20277; u014N:xr6bB; 1:WyIjdGhyZWFkLWY6MTg1MzYxNjAzODE2MDQwNzk4NyJd; 4:WyIjbXNnLWY6MTg1MzYxNjAzODE2MDQwNzk4NyIsbnVsbCxudWxsLG51bGwsMSwwLFsxLDAsMV0sMTA4LDY4MyxudWxsLG51bGwsbnVsbCxudWxsLG51bGwsMSxudWxsLG51bGwsWzBdLG51bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLDAsMF0."
id=":5vc"
>
<div class="a3s aiL" id=":5vd">
<div id="avWBGd-327">
<div class="adM"></div>
<div>
<div class="adM">
<br />
<br /><br />
</div>
<table
border="0"
width="100%"
cellspacing="0"
cellpadding="0"
bgcolor="#f4f4f4"
>
<tbody>
<tr>
<td><br /></td>
</tr>
</tbody>
<tbody>
<tr>
<td align="center">
<br />
<br /><br /><br /><br />
<table
style="max-width:600px;width:100%"
border="0"
width="600"
cellspacing="0"
cellpadding="0"
>
<tbody>
<tr>
<td><br /></td>
</tr>
</tbody>
<tbody>
<tr>
<td style="padding:40px 20px;text-align:center">
<br />
<h1 style="font-size:28px;color:#333333;margin:0">
Welcome to Save My Fur Baby!
</h1>
<br />
</td>
<td><br /></td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td
style="padding:40px 30px;border-radius:8px"
bgcolor="#ffffff"
>
<br />
<p
style="font-size:16px;line-height:24px;color:#333333;margin:0 0 20px 0"
>
Hi Kirstin,
</p>
<br />
<p
style="font-size:16px;line-height:24px;color:#333333;margin:0 0 20px 0"
>
Thank you for registering with Save My Fur Baby!
We're excited to have you and your furry friend join
our community.
</p>
<br />
<p
style="font-size:16px;line-height:24px;color:#333333;margin:0 0 30px 0"
>
To complete your registration and access your
profile, please activate your account.
</p>
<br />
<strong>Username:</strong>
<a href="mailto:test1@testibg.com" target="_blank"
>test1@testibg.com</a
><br />
<br />
<br />
<br /><br />
<table
border="0"
width="100%"
cellspacing="0"
cellpadding="0"
>
<tbody>
<tr>
<td><br /></td>
</tr>
</tbody>
<tbody>
<tr>
<td style="padding:20px 0" align="center">
<br />
<br /><br />
<table
border="0"
cellspacing="0"
cellpadding="0"
>
<tbody>
<tr>
<td><br /></td>
</tr>
</tbody>
<tbody>
<tr>
<td
style="border-radius:8px"
align="center"
bgcolor="#4A90E2"
>
<a
style="font-size:18px;font-family:Arial,Helvetica,sans-serif;font-weight:bold;color:#ffffff;text-decoration:none;padding:15px 40px;display:inline-block;border-radius:8px"
href="https://savemyfurbaby.org/?gfur_activation=NotReal"
rel="noopener"
target="_blank"
data-saferedirecturl="https://www.google.com/url?q=https://savemyfurbaby.org/?gfur_activation%&source=gmail&ust=1767832424371000&usg=AOvVaw3bOGy0wLov7Onu2jL-A3qS"
><br />
Activate My Account<br />
</a>
</td>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
</tr>
</tbody>
<tbody>
<tr>
<td><br /></td>
</tr>
</tbody>
</table>
<br />
</td>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
</tr>
</tbody>
<tbody>
<tr>
<td><br /></td>
</tr>
</tbody>
</table>
<br />
<p
style="font-size:16px;line-height:24px;color:#333333;margin:30px 0 20px 0"
>
If the button doesn’t work, copy and paste this link
into your browser:<br />
<a
style="color:#4a90e2;text-decoration:underline"
href="https://savemyfurbaby.org/?gfur_activation=NotReal"
target="_blank"
data-saferedirecturl="https://www.google.com/url?q=https://savemyfurbaby.org/?gfur_activation%3NotActuallyALink&source=gmail&ust=1767832424371000&usg=AOvVaw3bOGy0wLov7Onu2jL-A3qS"
>https://savemyfurbaby.org/?<wbr />gfur_activation=<wbr />NotReal</a
>
</p>
<br />
<p
style="font-size:16px;line-height:24px;color:#333333;margin:0 0 20px 0"
>
<strong>What happens next:</strong><br />
After you activate your account, you’ll receive a
confirmation email.
</p>
<br />
<p
style="font-size:16px;line-height:24px;color:#333333;margin:0"
>
If you didn’t sign up for this account, you can
safely ignore this email.
</p>
<br />
</td>
<td><br /></td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td
style="padding:30px 20px;text-align:center;font-size:14px;color:#666666"
>
<br />
<p style="margin:0 0 10px 0">
We look forward to having you as part of our
community!
</p>
<br />
<p style="margin:0">
Warm regards,<br />
<strong>The Save My Fur Baby Team</strong>
</p>
<br />
</td>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
</tr>
</tbody>
<tbody>
<tr>
<td><br /></td>
</tr>
</tbody>
</table>
<br />
</td>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
</tr>
</tbody>
<tbody>
<tr>
<td><br /></td>
</tr>
</tbody>
</table>
<div class="yj6qo"></div>
<div class="adL"></div>
</div>
<div class="adL"></div>
</div>
</div>
</div>
<div class="WhmR8e" data-hash="0" id="avWBGd-328"></div>
</div>
