Menú
Crear mi primer formulario
Contacto

Un formulario de solicitud de soporte con contexto de diagnóstico útil

Recopile suficiente contexto de diagnóstico para enrutar una solicitud de soporte sin pedir a los visitantes que expongan contraseñas, tokens o datos personales innecesarios.

Vista previa local: los cambios permanecen en este navegador. No se envía ningún mensaje o correo electrónico.

Solicitud de soporte

Envía los detalles adecuados a tu equipo.

1 / 1
LittleReply
Personaliza la plantilla
Etiquetas y campos obligatorios

Agregue su identidad, propósito, base aplicable, retención, contacto de derechos y enlace de privacidad. Este ejemplo no es un consejo legal.

HTML/CSS independiente
<!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="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="support-name">Nombre completo *</label>
  <input type="text" name="name" id="support-name" required />

  <label for="support-email">Correo electrónico *</label>
  <input type="email" name="email" id="support-email" required />

  <label for="support-department">Departamento (opcional)</label>
  <select name="department" id="support-department"><option value="">—</option><option>Ventas</option><option>Soporte</option><option>Facturación</option></select>

  <label for="support-message">Mensaje *</label>
  <textarea name="message" id="support-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>
</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.

Instalar esta plantilla

  1. Solicite marcas de tiempo, identificaciones públicas y mensajes de error en lugar de credenciales.
  2. Mantenga estables las opciones de departamento para que las reglas de enrutamiento sigan siendo comprensibles.
  3. Explique que la recepción de envío es diferente de un compromiso de tiempo de respuesta.
  4. Select “Use this template” to carry the current configuration into signup.
  5. Verify recipients, publish the form, and replace the example key in the generated code.
  6. Send a recognizable test and inspect storage and delivery separately.

Preguntas frecuentes

¿Esta plantilla envía un envío real en vista previa?

No. La vista previa pública permanece en su navegador. Cree y publique un formulario antes de usar su clave pública en un sitio en vivo.

¿Puedo cambiar los campos y el estilo?

Sí. Personalice las etiquetas, los requisitos, los colores, el texto de confirmación y el esquema publicado antes de instalar el código generado.