patx/frontlineboats
update form
Commit e983d15 · patx · 2026-07-30T19:28:02-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index fa08d7e..1f14ebf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1293,6 +1293,16 @@
line-height: 1.6;
}
+ .form-error {
+ display: none;
+ font-size: 0.82rem;
+ color: var(--flame-lite);
+ text-align: center;
+ line-height: 1.6;
+ }
+
+ .form-error.is-visible { display: block; }
+
.form-success {
display: none;
border: 1px solid var(--flame);
@@ -2334,10 +2344,7 @@
</div>
<div data-reveal>
- <!-- To deliver straight to an inbox, point action= at a form endpoint
- (Formspree, Netlify Forms, etc.). Until then this opens the
- visitor's mail app with the details prefilled. -->
- <form class="quote-form" id="quote-form" novalidate>
+ <form class="quote-form" id="quote-form" action="https://formspree.io/f/xeeywgwl" method="POST" novalidate>
<div>
<h2 class="form-title">Request a Quote</h2>
<p class="form-note">The more you tell us about the boat, the tighter the number.</p>
@@ -2384,15 +2391,14 @@
</div>
<button class="btn btn--primary form-submit" type="submit">Request a Free Quote</button>
+ <p class="form-error" id="form-error" role="alert"></p>
<p class="form-fine">In a hurry? Call or text <a class="contact-value" href="tel:+17862780478">(786) 278-0478</a>.</p>
- <div class="form-success" id="form-success" tabindex="-1">
- <h3>Details Ready to Send</h3>
+ <div class="form-success" id="form-success" role="status" tabindex="-1">
+ <h3>Quote Request Received</h3>
<p>
- Your email app should have opened with everything filled in — hit send and we will get
- back to you. If it did not open, call or text
- <a href="tel:+17862780478">(786) 278-0478</a> or email
- <a href="mailto:[email protected]">[email protected]</a>.
+ Thanks for reaching out. Your details have been sent to Frontline Boat Services, and
+ we will get back to you as soon as possible.
</p>
</div>
</form>
@@ -2769,8 +2775,11 @@
/* ── Quote form ─────────────────────────────────────────────────────── */
var form = document.getElementById('quote-form');
var formSuccess = document.getElementById('form-success');
+ var formError = document.getElementById('form-error');
+ var submitButton = form.querySelector('.form-submit');
+ var submitLabel = submitButton.textContent;
- form.addEventListener('submit', function (event) {
+ form.addEventListener('submit', async function (event) {
event.preventDefault();
if (!form.checkValidity()) {
@@ -2778,25 +2787,28 @@
return;
}
- var value = function (id) { return document.getElementById(id).value.trim(); };
- var name = (value('fname') + ' ' + value('lname')).trim();
-
- var body = [
- 'Name: ' + name,
- 'Email: ' + value('email'),
- 'Phone: ' + value('phone'),
- 'Service needed: ' + value('service'),
- '',
- 'About the boat:',
- value('message')
- ].join('\n');
-
- window.location.href = 'mailto:[email protected]' +
- '?subject=' + encodeURIComponent('Quote request — ' + value('service') + ' — ' + name) +
- '&body=' + encodeURIComponent(body);
-
- form.classList.add('is-sent');
- formSuccess.focus();
+ submitButton.disabled = true;
+ submitButton.textContent = 'Sending…';
+ formError.textContent = '';
+ formError.classList.remove('is-visible');
+
+ try {
+ var response = await fetch(form.action, {
+ method: form.method,
+ body: new FormData(form),
+ headers: { Accept: 'application/json' }
+ });
+
+ if (!response.ok) { throw new Error('Form submission failed'); }
+
+ form.classList.add('is-sent');
+ formSuccess.focus();
+ } catch (error) {
+ formError.textContent = 'Your request could not be sent. Please try again, or call or text (786) 278-0478.';
+ formError.classList.add('is-visible');
+ submitButton.disabled = false;
+ submitButton.textContent = submitLabel;
+ }
});
})();
</script>