Gatsby
Formulario de contacto para Gatsby sin backend.
La compilación de Gatsby crea el directorio público antes del despliegue, por lo que no puede recibir envíos por sí misma. Renderice un formulario estándar en una página, envíelo a FormsFort y mantenga estático el sitio desplegado.
Cómo funciona
Tres pasos para la producción de formularios.
Cree un formulario de FormsFort
Cree el formulario, configure la entrega y copie su clave de acceso pública.
Renderice el formulario de la página
Añada el formulario a src/pages/contact.js o a un componente Gatsby compartido. El navegador lo envía directamente a FormsFort.
Compile el directorio público
Ejecute gatsby build y despliegue public/ en un host estático. Los archivos generados por Gatsby no necesitan un controlador de envíos en el servidor.
Configuración
Página Gatsby con un formulario de contacto estático
// src/pages/contact.js
import React from "react";
export default function ContactPage() {
return (
<main>
<h1>Contact us</h1>
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label htmlFor="gatsby-name">Name</label>
<input id="gatsby-name" name="name" type="text" required />
<label htmlFor="gatsby-email">Email</label>
<input id="gatsby-email" name="email" type="email" required />
<label htmlFor="gatsby-project">Project details</label>
<textarea id="gatsby-project" name="message" rows="6" required />
<input type="checkbox" name="botcheck" style={{ display: "none" }} />
<button type="submit">Send project details</button>
</form>
</main>
);
}Migración
Lista de verificación de migración.
Mueve un formulario existente en minutos sin reconstruir el marcado.
Cree un formulario de FormsFort y copie su clave de acceso pública.
Agregue el formulario a src/pages/contact.js o a un componente compartido.
Establezca action en https://api.formsfort.com/submit y method en POST.
Use las convenciones htmlFor y className de Gatsby sin añadir una ruta de servidor.
Incluya los campos name, email, message y botcheck.
Ejecute gatsby build, despliegue public/ y pruebe desde el dominio de producción.
Recursos relacionados
Sigue construyendo desde aquí.
Backend de formulario HTML
Comprenda qué gestiona el endpoint alojado después del envío de Gatsby.
Webhooks de formularios
Reenvíe los envíos de Gatsby a otro flujo después de la entrega.
Prevención de spam de sitios estáticos
Añada honeypots, captcha, comprobaciones de dominio y límites de velocidad a un formulario público.
Preguntas frecuentes
Preguntas comunes.
¿Una compilación estática de Gatsby puede recibir envíos de formularios?
No. gatsby build escribe archivos estáticos en public/; no crea un endpoint de envíos. El navegador debe enviar a un endpoint de formularios alojado como FormsFort.
¿Necesito SSR de Gatsby o una función Gatsby para este formulario?
No. Este flujo usa intencionadamente solo la página generada y un POST estándar a FormsFort. No se necesitan SSR ni funciones de Gatsby para la entrega.
¿Dónde debe colocarse el código del formulario Gatsby?
Coloque un formulario de página en src/pages/contact.js o el JSX en un componente importado por esa página. Se incluirá en la salida generada public/contact/.
¿Puedo añadir carga de archivos a un formulario Gatsby?
Sí. Añada enctype="multipart/form-data" y una entrada de archivo, y active las cargas para el formulario de FormsFort. La página Gatsby estática seguirá enviando al mismo endpoint.
Dejar de administrar servidores de formularios.
Cree un endpoint de formulario de producción, migre su primer formulario de forma gratuita y escale cuando esté listo.