Build a script that tracks newsletter signups

Here’s a simple but effective script example that tracks newsletter signups by capturing user email addresses, storing them, and optionally sending the data to a backend or analytics system. I’ll provide a full example in JavaScript with HTML for the frontend form and a basic way to send the signup data to a server endpoint via AJAX (fetch).

html
CopyEdit
<!-- Newsletter Signup Form -->
<form id="newsletterForm">
  <input type="email" id="email" placeholder="Enter your email" required />
  <button type="submit">Subscribe</button>
  <p id="message"></p>
</form>

<script>
// Track newsletter signups
document.getElementById('newsletterForm').addEventListener('submit', function (e) {
  e.preventDefault();

  const emailInput = document.getElementById('email');
  const email = emailInput.value.trim();
  const messageEl = document.getElementById('message');

  if (!validateEmail(email)) {
    messageEl.textContent = 'Please enter a valid email.';
    messageEl.style.color = 'red';
    return;
  }

  // Save email locally or send to backend
  saveSignup(email)
    .then(() => {
      messageEl.textContent = 'Thank you for subscribing!';
      messageEl.style.color = 'green';
      emailInput.value = '';
    })
    .catch(() => {
      messageEl.textContent = 'There was an error. Please try again later.';
      messageEl.style.color = 'red';
    });
});

// Simple email validation
function validateEmail(email) {
  const re = /^[^s@]+@[^s@]+.[^s@]+$/;
  return re.test(email.toLowerCase());
}

// Save signup via fetch to backend API (replace URL with your actual endpoint)
async function saveSignup(email) {
  // For demo, just simulate a network request
  // Replace with fetch() POST call to your backend here
  return fetch('/api/newsletter-signup', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ email })
  }).then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  });
}
</script>

How It Works:

• User enters email and submits the form.

• Email is validated with a regex.

• If valid, it sends the email to a backend API endpoint (/api/newsletter-signup) using fetch.

• Shows success or error messages accordingly.

Backend Notes:

You’ll need a backend endpoint /api/newsletter-signup that accepts POST requests with a JSON body like { email: "user@example.com" }. This endpoint should handle:

• Saving the email to your database or mailing list provider.

• Returning appropriate status for success or failure.

If you want, I can help with example backend code in Node.js, PHP, Python, etc. Just ask!