The Palos Publishing Company

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

Build an HTML email signature generator

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.

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

We respect your email privacy

Categories We Write About