Conecte un formulario de Webflow a su flujo de trabajo de correo electrónico
Webflow ya incluye manejo de formularios. Un punto final externo es útil cuando necesita el mismo flujo de trabajo de admisión en varios sitios, una bandeja de entrada privada separada o un historial de entrega e integración fuera del proyecto Webflow.
Crear un formulario gratisUn ejemplo copiable
<form action="https://littlereply.com/api/submit" method="POST" data-littlereply="YOUR_ACCESS_KEY" data-locale="es" data-success="Hemos recibido tu mensaje.">
<input type="hidden" name="_fq_key" value="YOUR_ACCESS_KEY" />
<input type="text" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" aria-hidden="true" />
<label for="contact-name">Nombre completo *</label>
<input type="text" name="name" id="contact-name" required />
<label for="contact-email">Correo electrónico *</label>
<input type="email" name="email" id="contact-email" required />
<label for="contact-message">Mensaje *</label>
<textarea name="message" id="contact-message" required rows="5"></textarea>
<button type="submit">Enviar mensaje</button>
<p role="status" aria-live="polite"></p>
</form>
<!-- Errores AJAX accesibles y reintentos sin duplicados -->
<script src="https://littlereply.com/client/v1.js" data-api="https://littlereply.com" defer></script>la clave YOUR_ACCESS_KEY es un marcador de posición para reemplazar con la clave pública de su formulario. El código no contiene clave de servidor ni dirección de destino.
Decidir si un punto final externo ayuda
Mantener el manejo nativo de Webflow cuando cumpla con los requisitos del proyecto. Agregue otro servicio solo para una necesidad concreta, como un flujo de trabajo entre sitios, controles de retención específicos o una bandeja de entrada compartida para el equipo.
Preservar nombres de campos y comentarios
Asigne cada nombre de entrada de Webflow al esquema publicado. Mantenga accesibles los mensajes de éxito y error y pruebe las redirecciones en el dominio implementado en lugar de solo en Designer.
Verificar ambos sistemas
Confirme que la solicitud sale de la página Webflow, aparece en la bandeja de entrada de LittleReply y llega a los destinos configurados. No trate el estado correcto del navegador como prueba de entrega de correo electrónico.
Pruebe la plantilla antes de crear una cuenta.
Vista previa local: los cambios permanecen en este navegador. No se envía ningún mensaje o correo electrónico.
contacto HTML
Nombre, correo electrónico y mensaje: lo esencial para iniciar una conversación.
LittleReply<!doctype html>
<html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Formulario de contacto</title>
<style>form[data-littlereply]{max-width:640px;margin:2rem auto;padding:1.5rem;font:16px/1.6 system-ui,sans-serif;color:#202033;background:white;border:1px solid #e4e4ee;border-radius:16px;box-sizing:border-box}form[data-littlereply] label{display:block;margin-top:1rem;font-weight:600}form[data-littlereply] input,form[data-littlereply] textarea,form[data-littlereply] select{box-sizing:border-box;width:100%;padding:.75rem;font:inherit;border:1px solid #727285;border-radius:8px;background:white;color:#202033}form[data-littlereply] input[type=checkbox],form[data-littlereply] input[type=radio]{width:auto}form[data-littlereply] button{margin-top:1rem;padding:.8rem 1.1rem;font:inherit;font-weight:600;border:0;border-radius:8px;background:var(--form-accent,#4f46e5);color:white;cursor:pointer}form[data-littlereply] :focus-visible{outline:3px solid #f59e0b;outline-offset:3px}form[data-littlereply] button:disabled{opacity:.6}form[data-littlereply] [role=status]{min-height:1.6em}form[data-littlereply] fieldset{border:0;padding:0}form[data-littlereply] .privacy-notice{font-size:.875rem;color:#4b4b60}
form[data-littlereply]{--form-accent:#4f46e5;--form-ink:#ffffff}
form[data-littlereply] button{color:var(--form-ink)}form[data-littlereply] button[data-fq-back]{background:#eee;color:#202033}form[data-littlereply] [hidden]{display:none}</style></head><body>
<form action="https://littlereply.com/api/submit" method="POST" data-littlereply="YOUR_ACCESS_KEY" data-locale="es" data-success="Su mensaje ha sido almacenado. Responderemos pronto.">
<input type="hidden" name="_fq_key" value="YOUR_ACCESS_KEY" />
<input type="text" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" aria-hidden="true" />
<label for="fq_name">Tu nombre *</label>
<input type="text" name="name" id="fq_name" required autocomplete="name" />
<label for="fq_email">Su dirección de correo electrónico *</label>
<input type="email" name="email" id="fq_email" required autocomplete="email" />
<label for="fq_message">tu mensaje *</label>
<textarea name="message" id="fq_message" required maxlength="5000" rows="5"></textarea>
<button type="submit">enviar mi mensaje</button>
<p role="status" aria-live="polite"></p>
</form>
<!-- Errores AJAX accesibles y reintentos sin duplicados -->
<script src="https://littlereply.com/client/v1.js" data-api="https://littlereply.com" defer></script>
</body></html>Reemplace YOUR_ACCESS_KEY con la clave pública de su formulario. El código incluye sus estilos y una mejora AJAX; el HTML POST nativo también funciona sin JavaScript.
Fuentes
Preguntas frecuentes
¿Webflow carece de formularios?
No. Tiene manejo de formularios nativo. Utilice un backend externo cuando su flujo de trabajo se adapte mejor al proyecto.
¿Puedo conservar mi diseño de Webflow?
Sí. El punto final cambia la ruta de procesamiento, no el diseño del formulario visual.