Crear un formulario de contacto HTML
Un formulario de contacto práctico comienza con un nombre, dirección de correo electrónico, mensaje, etiquetas visibles y un destino POST. La validación del navegador ayuda a los visitantes, mientras que el esquema del servidor publicado sigue siendo la autoridad para los campos aceptados.
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.
Utilice controles claros y accesibles
El atributo de nombre es la clave de campo enviada al backend. La identificación conecta una entrada a su etiqueta. Utilice type=email, autocompletar y obligatorio cuando mejoren la tarea, pero no confíe en el texto del marcador de posición como única etiqueta.
Recopile sólo lo que el destinatario necesita para responder. Los formularios más breves reducen la fricción y limitan los datos personales innecesarios.
Validar en el navegador y en el servidor
La validación del navegador proporciona comentarios inmediatos y la validación del servidor hace cumplir el contrato publicado. Muestra un mensaje específico para campos no válidos, límites de tarifas y fallas temporales de la red.
Conserva los valores escritos después de un error recuperable. Utilice una clave de idempotencia cuando vuelva a intentar contenido sin cambios para que una interrupción de la red no cree duplicados.
Confirmar el resultado completo
Trate el almacenamiento de envíos y la entrega de notificaciones como dos puntos de control. Muestre a los visitantes una confirmación veraz después del almacenamiento y luego utilice el historial de entregas para diagnosticar problemas del destinatario o del proveedor.
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.
Preguntas frecuentes
¿Qué campos son imprescindibles?
El nombre, el correo electrónico y el mensaje cubren la mayoría de los formularios de contacto. Agregue campos solo cuando cambien la formulario en que se maneja la solicitud.
¿El correo electrónico de destino debería aparecer en HTML?
No. Almacene los destinatarios en el espacio de trabajo privado y exponga solo la clave del formulario público.