I am trying to customize my default email signature with an HTML version with my company's require brand standard color and logo. I have written out the HTML signature in basic html with a div container. I have made each line to be contained within a p tag with zero margins and padding. Once I paste this HTML into the "My Email Settings" signature field it will paste in fine. Of course with this field on this page it will not render the HTML. However when I go and create an email the HTML signature will render but Salesforce adds two extra line breaks between every line in my signature. I've tried several different ways of creating this HTML signature and Salesforce disregards my code in and injects those two line breaks after every line regardless.
This is what my email signature should look like.
This is what my html email signature renders out like when creating a new email utilizing my default "My Email Settings" signature.
Please someone give some insight on this. I know I can go and create an email template with my html signature and that renders fine. However I dont want our users to have to manually select that template everytime they are sending out an email.
Best regards,
SG
I was experiencing this issue recently, and here is what I've determined:
Salesforce appears to retain carriage returns in the Email Signature field (editable by users in My Email Settings). This means that if you are using HTML in your Email Signature and you are including paragraph (<p>) tags or break (<br>) tags along with carriage returns, you will see unintended line breaks. Following is an example:
<p>MY NAME</p> <!-- carriage return will be retained as a line break --><p>MY TITLE</p> <!-- p tag will add additional line break before this line --><p><img src=".../path/to/my_logo.png" /></p><p>MOBILE: xxx-xxx-xxxx</p><br /> <!-- this line will be followed by 3 line breaks: 1) p tag, 2) br tag, 3) carriage return --><p>OFFICE: xxx-xxx-xxxx</p><p>WEB: example.com</p>
"Browsers automatically add a single blank line before and after each <p> element" (https://www.w3schools.com/tags/tag_p.asp). The above Email Signature HTML would render as follows:
So, to resolve this issue, you have a few options:
- Option 1: Do not use paragraph (<p>) or break (<br>) tags at all. Instead, use carriage returns to start new lines. You can use span (<span>) tags to add styling around specific lines or words.
- Option 2: Do not use carriage returns at all. Write the Email Signature HTML as one line without carriage returns. Use the break (<br>) tag to start new lines. Again, you can use span (<span>) tags to add styling around specific portions.
- Option 3: You can try including paragraph tags and styling the paragraph tags to include no margin and no padding, but I think that this may result in messier HTML. If you go this route, you will again want to remove all carriage returns.
In each of the above, I also recommend removing any unnecessary whitespace from the HTML. Following are examples to better render an email signature without unintended line breaks:
Option 1:
MY NAME<span style="color:#c93c70">MY TITLE</span><img src=".../path/to/my_logo.png" />MOBILE: xxx-xxx-xxxxOFFICE: xxx-xxx-xxxxWEB: <a href="https://example.com">example.com</a>
Option 2:
MY NAME<br><span style="color:#c93c70">MY TITLE</span><br><img src=".../path/to/my_logo.png" /><br>MOBILE: xxx-xxx-xxxx<br>OFFICE: xxx-xxx-xxxx<br>WEB: <a href="https://example.com">example.com</a>
Here is what these would look like when rendered:
