Once
Formulario de contacto para Eleventy sin backend.
Un formulario de contacto de Eleventy puede permanecer completamente estático. Agregue un formulario HTML estándar a una plantilla Nunjucks, Liquid o HTML, envíelo a FormsFort y reciba envíos sin una función de servidor.
Cómo funciona
Tres pasos para la producción de formularios.
Cree un formulario
Cree un formulario FormsFort y copie la clave de acceso público.
Agregar un
Coloque el formulario en un include de Eleventy para que cada plantilla pueda reutilizarlo.
Compilación e implementación
Ejecute su compilación 11ty e implemente la build estático en cualquier host. FormsFort maneja los envíos.
Configuración
Eleventy se incluye con el formulario de contacto
<!-- _includes/contact-form.njk -->
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="name">Name</label>
<input id="name" name="name" type="text" autocomplete="name" required />
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Send message</button>
</form>
<!-- Use it from a Nunjucks page -->
{% include "contact-form.njk" %}Migración
Lista de verificación de migración.
Mueve un formulario existente en minutos sin reconstruir el marcado.
Cree un formulario FormsFort y copie la clave de acceso público.
Cree _includes/contact-form.njk, o use Liquid/HTML si coincide con su configuración de Eleventy.
Pegue el fragmento del formulario y reemplace YOUR_ACCESS_KEY.
Representa la inclusión desde su página de contacto o diseño.
Ejecute la compilación de Eleventy e implemente los archivos estáticos generados.
Envíe un mensaje de prueba desde la URL desplegada.
Recursos relacionados
Sigue construyendo desde aquí.
Jamstack Form Backend
Use el mismo patrón de formulario estático en Eleventy, Hugo, Astro, Nuxt y SvelteKit.
Ejemplos de formularios HTML
Copie patrones de campos accesibles para formularios de contacto, carga, casilla de verificación y selección.
Guía de formularios de sitios estáticos
Consulte la ruta de configuración más amplia para generadores de sitios estáticos sin código de backend.
Preguntas frecuentes
Preguntas comunes.
¿Puede Eleventy procesar los envíos de formularios por sí solo?
No. Eleventy crea archivos estáticos. Utilice un backend de formularios alojado cuando los envíos necesiten entrega por correo electrónico, filtrado de spam, cargas, webhooks o registros.
¿Esto funciona con 11ty en GitHub Pages?
Sí. La página generada es HTML estático y se publica en FormsFort, por lo que funciona en páginas de GitHub y otros hosts estáticos.
¿Puedo usar Liquid en lugar de Nunjucks?
Sí. El formulario es HTML simple. Coloque el mismo marcado en una inclusión de Liquid o directamente en una página de Eleventy.
¿Los formularios de contacto de Eleventy admiten la carga de archivos?
Sí. Agregue enctype="multipart/form-data" y una entrada de archivo, luego habilite las cargas en el formulario FormsFort.
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.