How To Code Html Email Signature

< 5 The Contact Details >

HTML Email Signature Tutorial (2021 Novice Tutorial)

< td colspan=5 style=padding-top: 40px font-size: 22px font-family:montserrat > Jemima Von Puddleduck< /td> < /tr> < td colspan=5 style=padding-bottom: 15px > Senior Head of Puddleducking< /td> < /tr> < td colspan=5> +44 123 456 789< /td> < /tr> < td colspan=5> Puddleduckingham Palace, London SW1A 1AA< /td> < /tr> < tr> < td colspan=5 style=padding-bottom: 15px > < a style=color: #8FC0A9 text-decoration: none >< /a> < /td> < /tr>

In this section you can add your own contact details. Ive also added a little extra padding to separate the name and job title from the contact details, and contact details from social icons.

In line 41, weve also added in a little extra styling for the link. Without this code, youll get an old-skool blue underlined link, so we just added the colour back in. I didnt think Jemima von Puddleduck would be a fan our the underline, so added in the text-decoration: none , if you like an underline then just delete this little bit.

Customize Your Email Sign

Proceeding to the design, customize your email signature to make sure it’s in line with your brand identity. Choose the best-suitable layout options, such as font size, color, background.

Some basic HTML footer templates are available in our free editor. The premium editor allows you to choose from a wider variety of signature templates, add different icons, and use advanced design tools.

Html Code For Email Signature

  • $100
  • ProposalsClose the tooltip

    This range includes relevant proposals, but does not include proposals that are withdrawn, declined, or archived. Please note that all proposals are accessible to clients on their applicants page.


  • This is when the client last reviewed or interacted with the applicants for this job.

    8 minutes ago

Member since Jul 10, 2019

  • United States
  • 84% hire rate, 1 open job
  • $2k+ total spent
  • 30.00/hr avg hourly rate paid 3 hours
  • Member since Jul 10, 2019

Read Also: How To Send Long Videos On Email

How To Edit The Email Signature In Html Mode


  • Video tutorial
  • This post is also available in: Portugu√™s

    You can associate your own custom HTML for a department. Then, edit the code and add the placeholders to be updated with the employee information.

    In this quick tutorial with video support, well do all the steps to paste, edit, and update email signatures from HTML code.

    Many people refer to the term as an editor in HTML mode.

    Run out of time? Navigate to the end to view the video tutorial.

    Why Should You Use Email Signatures

    How to Create an HTML Email Signature

    Email signatures matter because they:

    • Provide essential contact details that a recipient or potential customer can use to reach you
    • Establish a sense of legitimacy and professionalism
    • Convey who you are and how you may be of assistance to your email recipient
    • Generate brand recognition especially if you add your company logo to your email campaigns
    • Include exclusive promotions and sales offers that captivate your audience
    • Function as a scheduling tool where the recipient can schedule and start a meeting with you directly from their inbox

    Read Also: How Do I Send A Large Video Through Email

    Edit The Html Version Of The Signature

    The tutorial steps start here.

    Lets assume that you already have a department created. Then remove the current signature from the department so that you can associate another one.

    Departments menu Signature Remove.

    When removing, you will have the option to associate another email signature in the department. Choose the HTML File option, as you can see in the illustration below.

    Start typing your HTML code in the available text field.

    When youre ready, click save.

    Benefits Of Using Our Service

    The HTML email signature generator helps in making your emails look more relevant, professional, and well-informed. This is primarily because email signatures are:

    • Cross-platform
    • Mobile friendly
    • Branded

    The elegant and professional HTML email signatures we design for you are bound to create a positive and lasting impression on your recipients and business clients. So what are you waiting for? Create your signature now with our easy-to-use email signature generator!

    Recommended Reading: How To Email A Video That Is Too Large

    Key Benefits Of An Html Email Signature

  • Customisability: HTML is very flexible, allowing you to build a signature that perfectly meets your brand and marketing objectives. Because code is recognised across platforms, it will allow you to embed graphics and images that display correctly on all devices.
  • Easy to update: With the right email signature provider, you can instantly update sender information, promotional banners, link URLs, UTM codes and more with the click of a button automating the change to all applicable senders in your company.
  • You can make different parts of the signature clickable. Examples include email addresses, social media, website URLs, promotions, maps, or business card downloads.
  • A custom HTML email signature will allow you to track each click by adding a UTM to the URL. Rocketseed has built in analytics to quickly build reports on campaign performance.
  • Reduced email size: By stripping images from replies, HTML signatures can reduce the size of an email chain and improve load speeds.
  • Our best email signature sizes guide highlights ideal dimensions, the best file formats, font sizes and more for your email banners and signatures.

    Example Of An Email Created In Fyi With An Email Signature

    How to Create a Professional HTML Email Signature in Under 5 Minutes (for FREE)

    The following is an example of an Email that has been created in FYI with an Email Signature that just has Merge Fields for the user’s name, and phone number.

    The following example shows how to include an HTML file with images and text as the Email Signature and make adjustments to it. The following example shows how to include Merge Fields for the author’s name, role, mobile and email.

  • Create Email Signature refer to .Enter the name, if relevant, set the State to “Active”, enter the Filing and checkmark Signature.Instead of entering text in the Email Editor, you copy the HTML.
  • Open the HTML file in a browser.
  • In the browser, select all the text and images and copy it .
  • In FYI, in the Email Editor for the Signature, position the cursor where you want the Signature to appear and Paste the HTML. It displays in exactly the same way as via the browser.
  • To add Merge Fields, select the text that has been copied in from the HTML then select Merge Field. In the following example, this is adding the FYI Merge Field .
  • The following example shows the Merge Fields added for Author Name, Author Role, Author Mobile and Author Email.
  • If needed, use the tools to reapply any formatting to the Merge Fields. You can use the formatting tools so set formatting such as bold, fonts, colour. Use the tools to apply any font setting to the text above the signature. This will set the font used for any text in the email. Refer to .
  • Don’t Miss: How To Get Your Old Email Account Back

    Bonus Tip: How To Add Signatures Quickly To Bulk Emails

    If youre an email marketer, you probably send emails to hundreds of recipients every day.However, you cant waste time adding your signature to each email manually, right?

    Dont worry.

    If you want to include signatures in your bulk email marketing campaigns, just use GMass.

    Wait, whats GMass?

    GMass is powerful marketing and outreach software that works within Gmail. Its superior mail-merge features and straightforward user interface make it a popular tool used by employees in large companies like Google and Uber and social media giants like Twitter and LinkedIn.

    Its also a perfect marketing channel for casual Gmail users, solopreneurs, digital marketing professionals, small businesses, and institutions like churches, too.

    To get started with GMass, just , and sign up with your Gmail or Google Workspace account.

    Heres how you can add a signature block to your marketing or bulk emails with GMass:

  • Click Compose to launch a new message window.
  • Enter in the To field.
  • Type and format your signature content in the single email message body, and hit the GMass button to send.
  • When you do this, GMass will save your signature so that it can be used in the future.

    Once your signature is added, it will automatically appear in all emails you send out. You dont need to add them manually anymore!

    The process is as easy as that!

    How To Insert Html Signature In Gmail

    In order to insert HTML signature in Gmail, you have to follow some few steps as highlighted below.

    • Open your HTML file. In this case, you will have to drag your HTML email signature Gmail file right into your browser
    • At this point, you will need to select your signature design. To do that, go to Edit> Select All Edit> Copy
    • Open your Gmail settings and go to the signature section and then to Edit and then paste the Gmail email signature HTML you stored in clipboard earlier and then click on “Save Changes” located below the signature edit box. Note that you can find all these in the General tab in settings

    As seen above, Gmail insert HTML signature is easy and straightforward. If you run into problem during the process, it could be a minor mistake so you may need to go over the process again to get it right.

    Read Also: How To Send Pictures To Email From Samsung Phone

    Installing Html Email Signatures In Microsoft Outlook

    If you have comissioned a custom email signature from us, or created your own, here is how to install it in Microsoft Outlook 2010:Step 1: Add a New Placeholder Signature

    In Outlook, go to File > Options > Mail and click on Signatures. Click New to create a new placeholder signature. Give the new signature a name you can remember.Set to use your new Signature for both New Messages and Replies/Forwards.Hit “OK” to save and “OK” again to close the Outlook Options window.QUIT OUTLOOK

    Step 2: Open Outlooks Signature Folder on Your Computer

    Here are the locations on the hard drive where Outlook places signature files, these locations are usually hidden so make sure you show hidden files and folders:

    Windows 7 and Windows VistaC:\Users\username\AppData\Roaming\Microsoft\Signatures

    Windows XPC:\Documents and Settings\username\Application Data\Microsoft\Signatures

    Step 3: Find and Open the New Signature file

    Within the Signature Folder, locate the file that you have created in Step 1. If you see multiple files with the same name, the file you want to open is the HTM file with the .htm extension. Open it with Notepad. You can right-click on the file and select Open with > Notepad.

    Step 4: Replace Placeholder Text With Your HTML Code

    Send yourself an email to test the signature.

    • 160 Users Found This Useful

    Importing Your Html Email Signature

    How to Create a Personalized HTML Email Signature

    This differs so much from client-to-client, browser-to-browser, and so I wont write up the instructions here. When youre happy with your signature are ready to start using it, just Google set up HTML email signature in XYZ and follow the instructions of someone who knows a lot more about this than I do.

    So thats it. If you use my free template to create your email signature, Id love to see the results! Share your pics in the comments below x

    You May Like: How To Send Pictures From Samsung Phone To Email

    < 2 Dotty Cell Borders >

    padding: 10px 40px > < tbody>

    CSS allows you to apply styles to HTML, so that you dont have to code in this text is pink 100 times. In the fancy world of websites, these are super sophisticated and a chunk of CSS can be applied to whole websites in one go.

    Were dealing with the drastically un-fancy world of email signatures, so we need to apply these styles to the areas where they will actually be visible. Luckily, we can apply a lot of CSS to the table, as most of our content sits within this HTML element.

    You can also add additional styles here, e.g. text-transform: uppercase to make all the text uppercase, or letter-spacing: 1px if you like some airy text. Make sure each style ends with a semi-colon, I forget these all. The. Time.

    #build Your Custom Email Signature With Html And Css

    Tired of typing your name at the end of every email you send?

    In this article you’ll learn how to build your own email signature with HTML and CSS, and style it your own way.

    Here is the final product you can build, that has social media icons, phone number, email and website that can be clicked and redirect people to links!

    In this article, I’m gonna share with you the creation process, step by step:

    You can do the same and show the world your coding skills from a simple email signature. Let’s get onboard and start this coding adventure!

    Recommended Reading: Remove Duplicate In Outlook

    About Html Email Signature Code

    Email signatures prove to be of great help in closing out your emails effectively and professionally, along with your name and various other details. You can save your email signatures to prevent creating them every time you draft and write new emails.

    Moreover, an HTML email signature creates a unique code that enables you to quickly move the information associated with your signature from one client to another. Practically anybody who uses email services can profoundly benefit from a professional email signature.

    HTML email signature codes can be challenging to create, particularly when trying to create signatures for several people in an organization. An example of an HTML email signature code shows you a code in the form of a signature.

    If you can interpret this HTML code, you can custom use this example to work for your own needs. However, this process can be confusing and time-consuming, and you need to have in-depth know-how of the HTML code to do all this.

    But did you know theres no need to create an HTML email signature on your own?

    Yes! Thats right. Several templates are available to help you design your own unique email signature ideas. Most generators help you create email signatures using HTML. An email signature generator lets you create the HTML code you need to write down your email signatures, all without learning the complex language of HTML.

    Html Email Signature Outlook

    HTML Email Signature Tutorial

    Now, lets look at how to create an HTML email signature Outlook. Like with Gmail, you follow the same steps as you do when creating any email signature Outlook, but if youre trying to figure out how to add HTML email signature in Outlook 365, you just paste in HTML email signature code Outlook instead of using regular text.

    To simplify this process, you may want to use an email signature template Outlook written in HTML. Or, again, you can reverse the process by following these steps to convert Outlook signature to HTML.

  • Double click to open the Outlook email
  • Find the Message tab
  • Choose Other Actions
  • Select View Source
  • This will let you view email as HTML Outlook, and it will open the code as a .txt file on your computer. This process is the same whether youre trying to view the code for an HTML email signature Outlook Mac, an HTML signature Outlook online, or an HTML signature outlook Windows 10.

    Looking at the HTML in other signatures can help you understand how to write the HTML for your own signatures. You may also want to look for Office 365 HTML signature examples. For an even easier process, an Outlook signature HTML template provides you with a basic template, and then you fill in your details to customize it.

    In the case of an Outlook HTML signature not displaying correctly, you should make sure that you have stripped the formatting and not introduced any issues. Alternatively, consider looking into software that creates the HTML for you.

    Don’t Miss: Mail Not Updating

    Popular Articles

    Related Stories

    Stay on top - Get the daily news in your inbox