The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build an HTML email signature generator

Written by

Bernardo Palos

in

Here’s a fully functional HTML email signature generator built with HTML, CSS, and JavaScript. It allows users to input their name, title, company, phone, and email, and it generates a live preview and the corresponding HTML code they can copy.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Email Signature Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f7f7f7;
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 800px;
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
    }
    label {
      font-weight: bold;
      display: block;
      margin-top: 10px;
    }
    input {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      border-radius: 6px;
      border: 1px solid #ccc;
    }
    #signature-preview {
      margin-top: 30px;
      padding: 20px;
      border: 1px solid #ddd;
      background: #fdfdfd;
    }
    #html-output {
      width: 100%;
      height: 200px;
      margin-top: 20px;
    }
    button {
      margin-top: 20px;
      padding: 10px 20px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
    button:hover {
      background: #0056b3;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Email Signature Generator</h2>
    <label for="name">Full Name:</label>
    <input type="text" id="name">

    <label for="title">Job Title:</label>
    <input type="text" id="title">

    <label for="company">Company:</label>
    <input type="text" id="company">

    <label for="phone">Phone:</label>
    <input type="text" id="phone">

    <label for="email">Email:</label>
    <input type="text" id="email">

    <button onclick="generateSignature()">Generate Signature</button>

    <div id="signature-preview"></div>

    <label for="html-output">HTML Code:</label>
    <textarea id="html-output" readonly></textarea>
  </div>

  <script>
    function generateSignature() {
      const name = document.getElementById("name").value;
      const title = document.getElementById("title").value;
      const company = document.getElementById("company").value;
      const phone = document.getElementById("phone").value;
      const email = document.getElementById("email").value;

      const signatureHTML = `
<table cellpadding="0" cellspacing="0" style="font-family: Arial, sans-serif; font-size: 14px; color: #000;">
  <tr><td style="font-size:16px; font-weight:bold;">${name}</td></tr>
  <tr><td style="color: #555;">${title} | ${company}</td></tr>
  <tr><td>📞 <a href="tel:${phone}" style="color:#000;">${phone}</a></td></tr>
  <tr><td>✉️ <a href="mailto:${email}" style="color:#000;">${email}</a></td></tr>
</table>`;

      document.getElementById("signature-preview").innerHTML = signatureHTML;
      document.getElementById("html-output").value = signatureHTML.trim();
    }
  </script>
</body>
</html>

Features:

  • Simple and clean design.

  • Real-time preview of the email signature.

  • Automatically generates copyable HTML code.

You can enhance it further by:

  • Adding profile pictures or logos.

  • Allowing color and font customization.

  • Supporting social media icons. Let me know if you want those included.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About