sscoble/brand-site
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Replace mailto: form submission with LinkedIn redirect (refs #82)
All checks were successful
Build and Deploy to Storj / build-and-deploy (push) Successful in 10s
Details

Browse source 
mailto: is bad UX - opens desktop email client most people don't have configured.
Forms now validate, show success message, then redirect to LinkedIn.
Removed spinner element and mailto: logic entirely.
This commit is contained in:
Scott Scoble 2026-05-06 20:21:44 -07:00
parent fd9e89e850
commit 9a15541771
1 changed files with 12 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/components/Form/SharedForm.astro
View file

@ -110,16 +110,15 @@ const topicParam = Astro.url.searchParams.get('topic');
))}
<button type="submit" class="form-submit">
<span class="submit-text">{type === 'waitlist' ? 'Join Waitlist' : 'Send Message'}</span>
<span class="submit-spinner" aria-hidden="true" style="display:none;"></span>
<span class="submit-text">{type === 'waitlist' ? 'Join Waitlist' : 'Connect on LinkedIn'}</span>
</button>
<div class="form-error" role="alert" style="display:none;"></div>
</form>
<div class="form-success" style="display:none;">
<h4>{type === 'waitlist' ? "You're on the waitlist!" : 'Thank you!'}</h4>
<p>{type === 'waitlist' ? "We'll let you know when Dark Provenance is available." : 'Your message has been sent. I\'ll get back to you shortly.'}</p>
<h4>{type === 'waitlist' ? "You're on the waitlist!" : 'Thanks for reaching out!'}</h4>
<p>{type === 'waitlist' ? "We'll let you know when Dark Provenance is available." : 'You\'ll be redirected to LinkedIn to connect with Scott.'}</p>
</div>
</div>
@ -132,41 +131,33 @@ const topicParam = Astro.url.searchParams.get('topic');
const errorEl = container.querySelector('.form-error');
const submitBtn = form.querySelector('.form-submit');
const submitText = submitBtn.querySelector('.submit-text');
const submitSpinner = submitBtn.querySelector('.submit-spinner');
form.addEventListener('submit', async (e) => {
e.preventDefault();
submitBtn.disabled = true;
submitText.textContent = 'Sending...';
submitSpinner.style.display = '';
submitText.textContent = 'Redirecting...';
errorEl.style.display = 'none';
errorEl.textContent = '';
const formData = new FormData(form);
formData.append('form_type', type);
try {
// Construct mailto link with form data
const data = Object.fromEntries(formData.entries());
const subject = encodeURIComponent(`${type} inquiry from ${data.name || data.email}`);
const body = encodeURIComponent(
Object.entries(data).map(([k, v]) => `${k}: ${v}`).join('\n')
);
window.location.href = `mailto:scott@scoble.me?subject=${subject}&body=${body}`;
// Show success message briefly, then redirect to LinkedIn
form.style.display = 'none';
successEl.style.display = '';
// Umami tracking
// Track with Umami if available
if (window.umami) {
window.umami.track('form_submitted', { type, success: true });
}
// Redirect to LinkedIn after a brief pause
setTimeout(() => {
window.location.href = 'https://linkedin.com/in/scottscoble';
}, 1000);
} catch (err) {
errorEl.textContent = err.message;
errorEl.style.display = '';
submitBtn.disabled = false;
submitText.textContent = type === 'waitlist' ? 'Join Waitlist' : 'Send Message';
submitSpinner.style.display = 'none';
submitText.textContent = type === 'waitlist' ? 'Join Waitlist' : 'Connect on LinkedIn';
}
});
</script>
@ -238,15 +229,6 @@ const topicParam = Astro.url.searchParams.get('topic');
cursor: not-allowed;
}
.submit-spinner {
width: 16px;
height: 16px;
border: 2px solid white;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.75s linear infinite;
}
.form-error {
background: #dc2626;
color: white;