Custom Email Signature Creator JavaScript, HTML, CSS

👤 Sharing: AI 
```html
<!DOCTYPE html>
<html>
<head>
  <title>Email Signature Creator</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 20px;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
    }

    .form-group {
      margin-bottom: 15px;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input[type="text"],
    input[type="email"],
    textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background-color: #3e8e41;
    }

    .signature-preview {
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 10px;
    }

    .signature-preview p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Email Signature Creator</h1>

    <div class="form">
      <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
      </div>

      <div class="form-group">
        <label for="title">Title:</label>
        <input type="text" id="title" name="title">
      </div>

      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </div>

      <div class="form-group">
        <label for="phone">Phone:</label>
        <input type="text" id="phone" name="phone">
      </div>

      <div class="form-group">
        <label for="website">Website:</label>
        <input type="text" id="website" name="website">
      </div>

       <div class="form-group">
        <label for="linkedin">LinkedIn Profile URL:</label>
        <input type="text" id="linkedin" name="linkedin">
      </div>


      <div class="form-group">
        <label for="address">Address:</label>
        <textarea id="address" name="address"></textarea>
      </div>

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

    <div class="signature-preview" id="signaturePreview">
      <h2>Signature Preview:</h2>
      <p id="previewName"></p>
      <p id="previewTitle"></p>
      <p id="previewEmail"></p>
      <p id="previewPhone"></p>
      <p id="previewWebsite"></p>
      <p id="previewLinkedIn"></p>
      <p id="previewAddress"></p>

      <button onclick="copySignature()">Copy Signature</button>
    </div>
  </div>

  <script>
    function generateSignature() {
      const name = document.getElementById('name').value;
      const title = document.getElementById('title').value;
      const email = document.getElementById('email').value;
      const phone = document.getElementById('phone').value;
      const website = document.getElementById('website').value;
      const linkedin = document.getElementById('linkedin').value;
      const address = document.getElementById('address').value;

      document.getElementById('previewName').textContent = name ? name : '';
      document.getElementById('previewTitle').textContent = title ? title : '';
      document.getElementById('previewEmail').textContent = email ? "Email: " + email : '';
      document.getElementById('previewPhone').textContent = phone ? "Phone: " + phone : '';
      document.getElementById('previewWebsite').textContent = website ? "Website: " + website : '';
      document.getElementById('previewLinkedIn').textContent = linkedin ? "LinkedIn: " + linkedin : '';
      document.getElementById('previewAddress').textContent = address ? "Address: " + address : '';
    }

    function copySignature() {
      const signaturePreview = document.getElementById('signaturePreview');
      const range = document.createRange();
      range.selectNode(signaturePreview);
      window.getSelection().removeAllRanges(); // clear current selection
      window.getSelection().addRange(range); // to select the signaturePreview in the DOM
      try {
        document.execCommand('copy');
        alert('Signature copied to clipboard!');
      } catch (err) {
        console.error('Unable to copy signature: ', err);
        alert('Unable to copy signature. Please copy manually.');
      }
      window.getSelection().removeAllRanges();// clear selection after copy
    }
  </script>
</body>
</html>
```
👁️ Viewed: 14

Comments