HTML signature not working

Smart CRM & Sales Hub CRM
1

Hi,

I`m trying to create a signature that would be this.

tiago_bezerra_0-1709730549275.png
tiago_bezerra_0-1709730549275.png294×105 18.6 KB

But when I send it on outlook it`s showing differently:

tiago_bezerra_2-1709730615542.png
tiago_bezerra_2-1709730615542.png391×234 21.2 KB

I`m not sure what I`m doing different, here`s my code and I would really appreciate some help.

<div><b><span style="color:DodgerBlue;">Todd Johnson</span></b></div>
<div><em>Director of Sales</em></div>
<div><strong>Quotit Corporation</strong></div>
<div><strong>P: 714.564.5040 M: 952.223.7161</strong></div>
<div><strong>E: <a href="mailto:todd.johnson@quotit.com" target="_blank">todd.johnson@quotit.com</a></strong></div>
<div class="row">
 <div class="column">
 <p><a href="https://www.quotit.com/">
 <img src="https://app.hubspot.com/api/filemanager/api/v2/files/159555701112/signed-url-redirect?portalId=4902876" style="float:left ">
 </a></p>
 </div>
 <div class="column">
 <p><a href="https://agentcubed.com/">
 <img src="https://app.hubspot.com/api/filemanager/api/v2/files/159555883028/signed-url-redirect?portalId=4902876" style="float:left">
 </a></p>
 </div>
 <div class="column">
 <p><a href="https://comissio.com/">
 <img src="https://app.hubspot.com/api/filemanager/api/v2/files/159553731610/signed-url-redirect?portalId=4902876">
 </a></p>
 </div>
</div>
2

Hi, I create this HTML signature that it shows properly on the HTML, but as soon as I send a email it`s not configured right. I`m not sure what I`m doing wrong.

Below it`s my code. I want to have the images side by side.

<div><b><span style="color:DodgerBlue;">Todd Johnson</span></b></div>
<div><em>Director of Sales</em></div>
<div><strong>Quotit Corporation</strong></div>
<div><strong>P: 714.564.5040 M: 952.223.7161</strong></div>
<div><strong>E: <a href="mailto:todd.johnson@quotit.com" target="_blank">todd.johnson@quotit.com</a></strong></div>
<div class="row">
 <div class="column">
 <p><a href="https://www.quotit.com/">
 <img src="https://app.hubspot.com/api/filemanager/api/v2/files/159555701112/signed-url-redirect?portalId=4902876" style="float:left ">
 </a></p>
 </div>
 <div class="column">
 <p><a href="https://agentcubed.com/">
 <img src="https://app.hubspot.com/api/filemanager/api/v2/files/159555883028/signed-url-redirect?portalId=4902876" style="float:left">
 </a></p>
 </div>
 <div class="column">
 <p><a href="https://comissio.com/">
 <img src="https://app.hubspot.com/api/filemanager/api/v2/files/159553731610/signed-url-redirect?portalId=4902876">
 </a></p>
 </div>
</div>

This is how it`s showing on outlook:

tiago_bezerra_6-1709729934819.png
tiago_bezerra_6-1709729934819.png396×236 21.2 KB

3

Hi @tiago_bezerra I know this isn’t the answer to the question you’re asking, and I’m happy to help troubleshoot the email signature in Outlook, first I want to share with you my recommendation.

Remove the images and all the links from your signature.

You have three images with 3 file links, and 4 URLS - that 99.99% of your email recipients will ignore.

This is going to hurt your email deliverability.

I first learned about simplifying your email signature 4-5 years ago and it has drastically improved email performance for everyone I’ve worked with who heeds my warning.

Leslie Venetz recently had a webinar with HubSpot where she said the same thing, here’s a LinkedIn post with an example she shared explaining it further.

I’m happy to help if you still want to configure it, but my recommendation would be to simplify like this:

Todd Johnson
Director of Sales
Quotit Corporation
P: 714.564.5040
M: 952.223.7161

You can sprinkle in a little bold if you want to differentiate your name or job title, the simpler the better though!

4

Thank you so much for helping with this. We`re trying to keep the link because we have 3 different units being used. That`s why we need to keep that in our signature.

5

You’re welcome @tiago_bezerra, happy to help with the code.

The reason your images are not displaying in a row is because you’ve used <div> classes for column and row, but there is no CSS to say how those classes should behave.

Instead of div classes, you’ll need to use a table to keep things aligned.

Try this and share a screenshot of how it looks, we can make adjustments to the spacing if needed:

<b><span style="color:DodgerBlue;">Todd Johnson</span></b><br>
<em>Director of Sales</em><br>
<strong>Quotit Corporation</strong><br>
<strong>P: 714.564.5040 M: 952.223.7161</strong><br>
<strong>E: <a href="mailto:todd.johnson@quotit.com" target="_blank">todd.johnson@quotit.com</a></strong><br>
<table>
 <tr><td>
 <a href="https://www.quotit.com/">
 <img src="https://app.hubspot.com/api/filemanager/api/v2/files/159555701112/signed-url-redirect?portalId=4902876" style="float:left ">
 </a>
 </td>
 <td>
 <a href="https://agentcubed.com/">
 <img src="https://app.hubspot.com/api/filemanager/api/v2/files/159555883028/signed-url-redirect?portalId=4902876" style="float:left">
 </a>
 </td>
 <td>
 <a href="https://comissio.com/">
 <img src="https://app.hubspot.com/api/filemanager/api/v2/files/159553731610/signed-url-redirect?portalId=4902876">
 </a>
 </td>
</tr>
</table>
6

OMG, I really appreciate this. I was using AI and google to build that because I don`t know HTML.

Thank you for explaining, I`ll use this as a reference for future problems.

7

You’re welcome @tiago_bezerra, AI can be really helpful for creating code - with anything you create for Email, make sure you specify it’s for email so the limitations with CSS can be taken into account.

8

Hey @Jnix284,

I truly appreciate the thorough explanation you provided! :slightly_smiling_face: Your knowledge and experience are incredibly valuable contributions to the community.

Best,

Diana

9

Thank you @DianaGomez, always happy to help!