Fix newsletter forms: wire up footer form handler, fix FormSubmit string-truthy bug
All checks were successful
Build and Deploy to Storj / build-and-deploy (push) Successful in 13s

This commit is contained in:
Scott Scoble 2026-05-26 22:08:39 -07:00
parent 7fa021b8af
commit 2f84d0f7a8
3 changed files with 78 additions and 4 deletions

View file

@ -20,6 +20,50 @@ const currentYear = new Date().getFullYear();
el.innerHTML = '<a href="mailto:' + email + '">' + email + '</a>';
})();
</script>
<!-- Footer newsletter form handler -->
<script>
(function() {
const form = document.getElementById('footer-newsletter-form');
if (!form) return;
const successEl = form.parentElement.querySelector('.footer-newsletter-success');
const errorEl = form.parentElement.querySelector('.footer-newsletter-error');
const submitBtn = form.querySelector('button[type="submit"]');
form.addEventListener('submit', async (e) => {
e.preventDefault();
submitBtn.disabled = true;
submitBtn.textContent = 'Subscribing...';
errorEl.style.display = 'none';
errorEl.textContent = '';
successEl.style.display = 'none';
try {
const formData = new FormData(form);
formData.append('_subject', 'Newsletter Subscribe - Scott Scoble');
const response = await fetch('https://formsubmit.co/ajax/scott@scoble.me', {
method: 'POST',
body: formData,
});
const result = await response.json();
if (!response.ok || result.success !== 'true') {
throw new Error(result.message || 'Subscription failed. Please try again.');
}
form.style.display = 'none';
successEl.style.display = '';
} catch (err) {
errorEl.textContent = err.message || 'Something went wrong. Please try again.';
errorEl.style.display = '';
submitBtn.disabled = false;
submitBtn.textContent = 'Subscribe';
}
});
})();
</script>
<div class="footer-social">
<a href="https://linkedin.com/in/scottscoble" target="_blank" rel="noopener" class="social-link" aria-label="Follow on LinkedIn for AI insights and leadership perspectives" data-umami-event="footer-linkedin-click">
@ -40,10 +84,17 @@ const currentYear = new Date().getFullYear();
<div class="footer-newsletter">
<h4>Stay in the loop</h4>
<p>Get updates on new talks, workshops, and writings.</p>
<form class="newsletter-form">
<input type="email" placeholder="Your email" required />
<form class="newsletter-form" id="footer-newsletter-form">
<div style="position: absolute; left: -9999px;" aria-hidden="true">
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" />
</div>
<input type="email" name="email" placeholder="Your email" required />
<button type="submit">Subscribe</button>
</form>
<div class="footer-newsletter-success" style="display:none;">
<p><strong>You're subscribed!</strong> Check your inbox for the welcome email.</p>
</div>
<div class="footer-newsletter-error" style="display:none;"></div>
<p class="newsletter-note">No spam. Unsubscribe anytime.</p>
</div>
@ -173,6 +224,29 @@ const currentYear = new Date().getFullYear();
font-size: 0.9375rem;
margin: 0 0 1rem;
}
.footer-newsletter-success {
text-align: center;
padding: 1rem;
background: rgba(61, 90, 62, 0.6);
color: white;
border-radius: 6px;
font-size: 0.875rem;
}
.footer-newsletter-success p {
color: white;
margin: 0;
}
.footer-newsletter-error {
background: #dc2626;
color: white;
padding: 0.75rem;
border-radius: 4px;
font-size: 0.8125rem;
width: 100%;
}
.newsletter-form {
display: flex;

View file

@ -152,7 +152,7 @@ const topicParam = Astro.url.searchParams.get('topic');
const result = await response.json();
if (!response.ok || !result.success) {
if (!response.ok || result.success === 'false' || !result.success) {
throw new Error(result.message || 'Failed to send message. Please try again or email directly.');
}

View file

@ -57,7 +57,7 @@ const {
const result = await response.json();
if (!response.ok || !result.success) {
if (!response.ok || result.success === 'false' || !result.success) {
throw new Error(result.message || 'Subscription failed. Please try again.');
}