Formulario de contacto (SMTP vía Poste), Quiénes somos e invitación a venir al programa

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TSyR5Zw5eGj6oPTRVjvP1b
2026-10-20 16:04:00 +02:00
parent 4be49b0c91
commit 89bb7b4d34
9 changed files with 291 additions and 12 deletions
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Contacto · Anda Que No Sabes Ná</title>
+<meta name="description" content="¿Quieres venir al programa, proponer un tema o decirnos algo? Escríbenos.">
+<meta name="theme-color" content="#06080d">
+<link rel="icon" href="img/avatar.jpg">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<header class="top">
+  <a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
+  <nav aria-label="Principal"><a href="/">Inicio</a><a href="/#quienes">Quiénes somos</a></nav>
+</header>
+
+<main class="legal contact">
+  <h1>¿Quieres venir al <em>programa</em>?</h1>
+  <p class="lead-c">Cuéntanos quién eres y de qué te gustaría hablar. También puedes proponer un tema o simplemente escribirnos. Te respondemos por correo.</p>
+
+  <form id="f" class="form" novalidate>
+    <label>Nombre
+      <input name="nombre" type="text" autocomplete="name" maxlength="100" required>
+    </label>
+    <label>Correo electrónico
+      <input name="email" type="email" autocomplete="email" maxlength="200" required>
+    </label>
+    <label>Motivo
+      <select name="motivo">
+        <option value="venir">Quiero venir al programa</option>
+        <option value="tema">Propongo un tema</option>
+        <option value="otro">Otro asunto</option>
+      </select>
+    </label>
+    <label>Mensaje
+      <textarea name="mensaje" rows="6" maxlength="3000" required placeholder="Cuéntanos a qué te dedicas y qué te gustaría contar…"></textarea>
+    </label>
+    <div class="trap" aria-hidden="true"><label>No rellenes este campo <input name="web" type="text" tabindex="-1" autocomplete="off"></label></div>
+    <label class="check">
+      <input name="consent" type="checkbox" required>
+      <span>He leído la <a href="privacidad.html" target="_blank" rel="noopener">política de privacidad</a> y acepto que usen mis datos para responderme.</span>
+    </label>
+    <button class="btn primary" type="submit">Enviar mensaje</button>
+    <p id="st" class="status" role="status" aria-live="polite"></p>
+  </form>
+  <noscript><p>Necesitas JavaScript para usar el formulario. Mientras tanto, escríbenos a <a href="mailto:andaquenosabesnada@gmail.com">andaquenosabesnada@gmail.com</a>.</p></noscript>
+</main>
+
+<script>
+(function () {
+  var f = document.getElementById('f'), st = document.getElementById('st'), t0 = Date.now(), busy = false;
+  function say(msg, ok) { st.textContent = msg; st.className = 'status ' + (ok ? 'ok' : 'err'); }
+  f.addEventListener('submit', function (e) {
+    e.preventDefault();
+    if (busy) return;
+    var d = new FormData(f);
+    var body = {
+      nombre: (d.get('nombre') || '').trim(), email: (d.get('email') || '').trim(),
+      motivo: d.get('motivo'), mensaje: (d.get('mensaje') || '').trim(),
+      consent: f.consent.checked, web: d.get('web') || '', t: Date.now() - t0
+    };
+    if (!body.nombre || !/^[^@\s]+@[^@\s]+\.[^@\s]{2,}$/.test(body.email) || body.mensaje.length < 10 || !body.consent) {
+      say('Revisa los campos: nombre, correo válido, un mensaje de al menos 10 caracteres y la casilla de privacidad.', false);
+      return;
+    }
+    busy = true; say('Enviando…', true);
+    fetch('/api/contacto', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+      .then(function (r) { return r.json().catch(function () { return {}; }).then(function (j) { return { ok: r.ok && j.ok, j: j }; }); })
+      .then(function (x) {
+        if (x.ok) { f.reset(); say('¡Gracias! Hemos recibido tu mensaje y te responderemos pronto.', true); }
+        else { say((x.j && x.j.error) || 'No se pudo enviar. Escríbenos a andaquenosabesnada@gmail.com.', false); }
+      })
+      .catch(function () { say('No se pudo enviar. Escríbenos a andaquenosabesnada@gmail.com.', false); })
+      .then(function () { busy = false; });
+  });
+})();
+</script>
+</body>
+</html>