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
All checks were successful
Build and Deploy to Storj / build-and-deploy (push) Successful in 13s
This commit is contained in:
parent
7fa021b8af
commit
2f84d0f7a8
3 changed files with 78 additions and 4 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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.');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.');
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue