RI Email Signature Generator

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reconnaissance International - Email Signature Generator</title>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 20px;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  color: #666;
  margin-bottom: 30px;
}

.form-section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.form-section h2 {
  color: #333;
  margin-bottom: 20px;
  font-size: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

input:focus {
  outline: none;
  border-color: #0563C1;
}

.preview-section {
  margin-bottom: 30px;
}

.preview-section h2 {
  color: #333;
  margin-bottom: 15px;
  font-size: 20px;
}

#signaturePreview {
  border: 2px dashed #ddd;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  min-height: 300px;
}

.instructions {
  background-color: #e8f4f8;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.instructions h3 {
  color: #333;
  margin-bottom: 10px;
}

.instructions ol {
  margin-left: 20px;
}

.instructions li {
  margin-bottom: 8px;
}

.copy-button {
  background-color: #0563C1;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 15px;
}

.copy-button:hover {
  background-color: #044a94;
}

.copy-button:active {
  transform: scale(0.98);
}

.success-message {
  display: none;
  background-color: #d4edda;
  color: #155724;
  padding: 10px 15px;
  border-radius: 5px;
  margin-top: 10px;
  border: 1px solid #c3e6cb;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
</style>
</head>
<body>

<div class="container">
  <h1>Email Signature Generator</h1>
  <p class="subtitle">Create your personalized Reconnaissance International email signature</p>

  <div class="instructions">
    <h3>How to use:</h3>
    <ol>
      <li>Fill in your contact information below</li>
      <li>Your signature will automatically appear in the preview section</li>
      <li>Click "Copy Signature" button</li>
      <li>Paste directly into your Outlook signature editor</li>
    </ol>
  </div>

  <div class="form-section">
    <h2>Your Information</h2>
    <div class="form-grid">
      <div class="form-group">
        <label for="fullName">Full Name *</label>
        <input type="text" id="fullName" placeholder="e.g., Sam Burns" required>
      </div>
      
      <div class="form-group">
        <label for="email">Email Address *</label>
        <input type="email" id="email" placeholder="e.g., [email protected]" required>
      </div>
      
      <div class="form-group full-width">
        <label for="jobTitle">Job Title *</label>
        <input type="text" id="jobTitle" placeholder="e.g., Director of Business Development" required>
      </div>
      
      <div class="form-group">
        <label for="telephone">Telephone</label>
        <input type="tel" id="telephone" placeholder="e.g., +44 (0) 1932 785 680">
      </div>
      
      <div class="form-group">
        <label for="mobile">Mobile</label>
        <input type="tel" id="mobile" placeholder="e.g., +44 (0) 7825 337 822">
      </div>
    </div>
  </div>

  <div class="preview-section">
    <h2>Preview</h2>
    <div id="signaturePreview">
      <p style="color: #999; text-align: center; padding: 40px;">Fill in your information above to see your signature preview</p>
    </div>
    <button class="copy-button" onclick="copySignature()">Copy Signature</button>
    <div class="success-message" id="successMessage">✓ Signature copied! Now paste it into Outlook.</div>
  </div>
</div>

<script>
// Update preview in real-time
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
  input.addEventListener('input', updatePreview);
});

function updatePreview() {
  const fullName = document.getElementById('fullName').value;
  const jobTitle = document.getElementById('jobTitle').value;
  const telephone = document.getElementById('telephone').value;
  const mobile = document.getElementById('mobile').value;
  const email = document.getElementById('email').value;

  // Only show preview if at least name is filled
  if (!fullName) {
    document.getElementById('signaturePreview').innerHTML = '<p style="color: #999; text-align: center; padding: 40px;">Fill in your information above to see your signature preview</p>';
    return;
  }

  const signature = `
    <table cellpadding="0" cellspacing="0" style="font-family: Arial, sans-serif; font-size: 10pt; color: #000000; margin-bottom: 15px;">
      <tr>
        <td style="padding-right: 15px; vertical-align: top;">
          <a href="https://reconnaissance.net/" style="text-decoration: none; border: none;">
            <img src="https://ri-events-media-files.s3.amazonaws.com/email-signature/RI-2025-logo.webp" alt="Reconnaissance International" width="150" style="display: block; border: none;">
          </a>
        </td>
        <td style="vertical-align: top;">
          <div style="font-size: 11pt;"><strong>${fullName}</strong></div>
          <div style="margin: 3px 0;">${jobTitle}</div>
          ${telephone || mobile ? `<div style="margin: 10px 0 3px 0;">
            ${telephone ? `Tel: <a href="tel:${telephone.replace(/\s/g, '')}" style="color: #0563C1; text-decoration: none;">${telephone}</a>` : ''}${telephone && mobile ? '<br>' : ''}
            ${mobile ? `Mob: <a href="tel:${mobile.replace(/\s/g, '')}" style="color: #0563C1; text-decoration: none;">${mobile}</a>` : ''}
          </div>` : ''}
          ${email ? `<div style="margin: 8px 0 0 0;">
            <a href="https://www.reconnaissance.net" style="font-weight: bold; color: #0563C1; text-decoration: none;">www.reconnaissance.net</a><br>
            <a href="mailto:${email}" style="font-weight: bold; color: #0563C1; text-decoration: none;">${email}</a>
          </div>` : ''}
        </td>
      </tr>
    </table>

    <div style="margin-top: 15px;">
      <a href="https://reconnaissance.net/#upcoming-events" style="text-decoration: none; border: none;">
        <img src="https://ri-events-media-files.s3.amazonaws.com/email-signature/ri-events-banner.png" alt="Upcoming Events" style="max-width: 600px; width: 100%; display: block; border: none;">
      </a>
    </div>

    <div style="font-size: 8pt; color: #666666; font-style: italic; margin-top: 15px;">
      <p style="margin: 15px 0 5px 0;">This email and its attachments contain private and confidential information sent for the intended person or organisation only.</p>
      <p style="margin: 5px 0;">If you received this email in error, you must not copy, forward or use this email or its content.<br>
      Reconnaissance International Limited is registered in England No. 2685685.</p>
    </div>
  `;

  document.getElementById('signaturePreview').innerHTML = signature;
}

function copySignature() {
  const preview = document.getElementById('signaturePreview');
  
  // Create a temporary element to hold the HTML
  const temp = document.createElement('div');
  temp.innerHTML = preview.innerHTML;
  temp.style.position = 'absolute';
  temp.style.left = '-9999px';
  document.body.appendChild(temp);

  // Select the content
  const range = document.createRange();
  range.selectNode(temp);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);

  try {
    // Copy to clipboard
    document.execCommand('copy');
    
    // Show success message
    const successMsg = document.getElementById('successMessage');
    successMsg.style.display = 'block';
    
    setTimeout(() => {
      successMsg.style.display = 'none';
    }, 3000);
    
  } catch (err) {
    alert('Please manually select and copy the signature from the preview box.');
  }

  // Clean up
  window.getSelection().removeAllRanges();
  document.body.removeChild(temp);
}

// Initialize preview on page load
updatePreview();
</script>

</body>
</html>

Free access for Government organisations!

When you fill-in the form, please ensure that you use your official email address. Any attempt to register using a generic email system like Gmail and Yahoo will be disregarded.

A single generic username/password will be provided per government entity, this can be shared within the organisation and simultaneous login are allowed. Only one application is required per organisation

This is a one-time process and the validation will be undertaken as quickly as possible – within two hours or less during a normal working day, or 24 hours if over a weekend. If we are unable to validate your organisation from the details you provide, we will contact you for further information.

Thank you

Publications manager

Contact Us

Please select the corresponding contact email address to minimise our response time to your query.