FormsFort
EN ES

Guía de Next.js

Formularios de contacto Next.js sin rutas API.

Use un POST normal de formulario cuando su sitio Next.js no necesite lógica de servidor personalizada. FormsFort recibe el envío, filtra el abuso y enruta los datos a email o integraciones.

Utilice HTML estándar primero

Para exportaciones estáticas, páginas de marketing y flujos de contacto simples, un endpoint alojado es más simple que una ruta API o una acción del servidor. Coloque el formulario en un componente de cliente o servidor y deje que el navegador lo envíe. 

export default function ContactForm() {
  return (
    <form action="https://api.formsfort.com/submit" method="POST">
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <label htmlFor="email">Email</label>
      <input id="email" type="email" name="email" required />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" rows={6} required />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} />
      <button type="submit">Send message</button>
    </form>
  );
}

Lista de verificación de producción

  • Utilice únicamente una clave de acceso público; nunca exponga secretos de API privados en un paquete de cliente Next.js.
  • Agregue el dominio desplegado a los orígenes permitidos antes del lanzamiento.
  • Pruebe el formulario después de la implementación, no solo en el desarrollo local.
  • Utilice AJAX sólo si necesita estados de éxito en línea; el flujo POST estándar es suficiente para la mayoría de los formularios.

Guías relacionadas de Next.js

Para obtener más detalles, consulte Guía del formulario de contacto de Next.js y Guía del formulario de contacto de exportación estática de Next.js.