How to Code Your Own Email Signature if You're Not a Coder

Andrew J. Chwalik | January 10, 2019

Andrew J. Chwalik | January 10, 2019


You don’t need to be a tech wizard to customize your own email signature.

Let’s get this out of the way — I am NOT a coder, developer, or anything of the sort. I don’t know any programming languages. If you showed me a page of Facebook’s secret raw code, I wouldn’t even know how to steal it. 

However, I code my own email signatures.

Yes, I hardcode my own email signatures and you can too! It’s extremely simple and basically just involves copy and pasting. There are two reasons as to why you should manually HTML code your own email signature:

  1. You are able to add your personal or company brand elements in any manner your heart desires; and

  2. Coding your signature in HTML will almost always keep the formatting the same across every platform, enabling brand consistency.

Here, take my hand ✋🏼 and we’ll walk through this together. Don’t worry, you won’t be holding it long. This will literally take two minutes.

Step #1: Check out my email signature that I coded all by myself! Pretty cool, huh? I’ll be teaching you how to do this in five steps. And would you look at that, step one is already done!

Andrew Chwalik Coded Email Signature.png

Step #2: Copy my customized HTML email signature code below. Seriously, it’s that easy. If you don’t like my signature style, you can change it up in the next step. It’s just a good starting place.

<a href=”"> <img src=”" alt=”Andrew J. Chwalik” width=”60" height=”60" style=”float: left; padding: 0px 5px 0 0;”>

<div id=”sig” style=”min-height: 50px; line-height: 14px; margin: 15px 0; padding: 4px; font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif; font-size: 15px; min-width: 10px;”>

<br><a> <font style=”color: #52432D; <”font size=”4">Andrew J. Chwalik</font>

<br><a> <font style=”color: #52432D; <”font size=”1">Marketer | Videographer | Speaker</font>

Step #3: Head on over to w3school’s coding editor and paste my code in the left box. This is a great site for visual learners because it shows you how every code change will look physically. Try googling some different HTML functions and copy/paste them in that left box. That’s how I got started.

Step #4: Replace my image source link with one of your own so when you send emails you won’t confuse the reader by having my face in your signature. Go to one of your social media profiles. Right click on your picture and select “Copy Image Address”. Head back over to your code and replace the with the link you just copied. Make sure you only replace the link I mentioned above or it may destroy your entire string of code. Click “run” and see your beautiful image now included in your email signature.

Step #5: Replace the “Andrew J. Chwalik” and “Marketer | Videographer | Speaker” with your own name and text. You can mess around with the numbers in the code to increase and decrease spacing/size.

Boom. You now have your very own customized HTML email signature! To top it all off, you actually coded it yourself. Congratulations you tech nerd. Of course, you can customize it however you like with other lines of code. Try googling a feature that you want, copying the string of code, and paste it on your canvas.

The final piece is getting your new HTML email signature in your email. I’m a Mac user (sorry everyone else) so I’ll give you the link to the video I watched when learning how to do this. I’ll be making a higher quality version, but in the meantime, enjoy this random guy explaining the process:

Enjoy sending emails with your new custom signature that was made by you! If you want other clever marketing tips like this or want to share your legit new email signature with me, drop your email below and I’ll reach out.

— Andrew J. Chwalik