adam/seahaven-site
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/seahaven-site.git synced 2026-10-02 03:43:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add AJAX submission and success/error feedback to contact form

Browse source 
Form now submits via fetch with JSON accept header for Basin AJAX
mode. Shows success message on completion or error message with
fallback email address on failure.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adam Moussa 2026-04-04 19:07:01 -04:00
parent 80bed32ad1
commit e8e1dbc27f
1 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
contact/index.html
View file

@ -440,6 +440,37 @@
</div>
</div>
</form>
<div id="form-success" style="display:none;padding:20px;margin-top:15px;background:#2ecc71;color:#fff;border-radius:4px;text-align:center;">Thank you! Your message has been sent successfully.</div>
<div id="form-error" style="display:none;padding:20px;margin-top:15px;background:#e74c3c;color:#fff;border-radius:4px;text-align:center;">Something went wrong. Please try again or email us directly at work-orders@seahaven.com</div>
<script>
(function(){
var form = document.querySelector('.elementor-form');
form.addEventListener('submit', function(e){
e.preventDefault();
var btn = form.querySelector('button[type="submit"]');
btn.disabled = true;
btn.querySelector('.elementor-button-text').textContent = 'Sending...';
fetch(form.action, {
method: 'POST',
body: new FormData(form),
headers: {'Accept': 'application/json'}
}).then(function(r){
if(r.ok){
form.reset();
form.style.display = 'none';
document.getElementById('form-success').style.display = 'block';
} else {
document.getElementById('form-error').style.display = 'block';
}
}).catch(function(){
document.getElementById('form-error').style.display = 'block';
}).finally(function(){
btn.disabled = false;
btn.querySelector('.elementor-button-text').textContent = 'Submit';
});
});
})();
</script>
</div>
</div>
</div>