105 lines
3.4 KiB
JavaScript
105 lines
3.4 KiB
JavaScript
/**
|
|
* Envío de formulario de contacto con Formspree + modal de éxito.
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
|
|
const form = document.getElementById('form-contacto');
|
|
const modal = document.getElementById('modal-contacto');
|
|
const btnCerrar = modal ? modal.querySelector('.modal-cerrar') : null;
|
|
const btnEnviar = form ? form.querySelector('button[type="submit"]') : null;
|
|
|
|
if (!form || !modal) return;
|
|
|
|
const FORMSPREE_URL = 'https://formspree.io/f/xkjgjzpn';
|
|
|
|
let redirectTimer = null;
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────
|
|
function abrirModal(mensaje) {
|
|
const texto = modal.querySelector('.modal-mensaje');
|
|
if (texto && mensaje) texto.textContent = mensaje;
|
|
modal.classList.add('is-visible');
|
|
modal.setAttribute('aria-hidden', 'false');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function cerrarModal(redirigir = false) {
|
|
modal.classList.remove('is-visible');
|
|
modal.setAttribute('aria-hidden', 'true');
|
|
document.body.style.overflow = '';
|
|
if (redirectTimer) clearTimeout(redirectTimer);
|
|
if (redirigir) window.location.href = 'index.html';
|
|
}
|
|
|
|
function mostrarError(mensaje) {
|
|
modal.classList.add('is-error');
|
|
abrirModal(mensaje);
|
|
}
|
|
|
|
// ── Cerrar modal ───────────────────────────────────────────────────
|
|
if (btnCerrar) {
|
|
btnCerrar.addEventListener('click', () => cerrarModal(true));
|
|
}
|
|
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) cerrarModal(true);
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && modal.classList.contains('is-visible')) {
|
|
cerrarModal(true);
|
|
}
|
|
});
|
|
|
|
// ── Submit ─────────────────────────────────────────────────────────
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
// Validación nativa HTML5
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return;
|
|
}
|
|
|
|
// Estado de carga
|
|
const textoOriginal = btnEnviar ? btnEnviar.innerHTML : '';
|
|
if (btnEnviar) {
|
|
btnEnviar.disabled = true;
|
|
btnEnviar.innerHTML = 'Enviando…';
|
|
}
|
|
|
|
try {
|
|
const data = new FormData(form);
|
|
|
|
const res = await fetch(FORMSPREE_URL, {
|
|
method: 'POST',
|
|
body: data,
|
|
headers: {
|
|
'Accept': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (res.ok) {
|
|
modal.classList.remove('is-error');
|
|
abrirModal('¡Mensaje enviado! Te contactaremos en menos de 48 horas hábiles.');
|
|
form.reset();
|
|
|
|
// Redirección automática después de 4 segundos
|
|
redirectTimer = setTimeout(() => {
|
|
window.location.href = 'index.html';
|
|
}, 4000);
|
|
} else {
|
|
const json = await res.json().catch(() => ({}));
|
|
mostrarError(json.error || 'No pudimos enviar tu mensaje. Intentá nuevamente.');
|
|
}
|
|
} catch (err) {
|
|
mostrarError('Hubo un problema de conexión. Probá nuevamente.');
|
|
} finally {
|
|
if (btnEnviar) {
|
|
btnEnviar.disabled = false;
|
|
btnEnviar.innerHTML = textoOriginal;
|
|
}
|
|
}
|
|
});
|
|
})(); |