Nuxt
Formulario de contacto para Nuxt sin backend.
Un formulario de contacto en Nuxt no necesita una ruta Nitro, una API de servidor ni código de correo personalizado. Envíe un formulario estándar a FormsFort, mantenga el sitio estático y reciba envíos por email o webhook.
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.
Agregue un formulario de Vue
Pegue el formulario en una página o componente de Nuxt. No se requiere ruta del servidor.
Implementar en cualquier lugar
Utilice SSR, renderizado híbrido o generación estática. El navegador envía directamente en FormsFort.
Configuración
Página de Nuxt con formulario de contacto
<!-- pages/contact.vue -->
<template>
<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>
</template>Migración
Lista de verificación de migración.
Mueve un formulario existente en minutos sin reconstruir el marcado.
Crea un formulario FormsFort y copia la clave de acceso.
Agregue una página contact.vue o un componente ContactForm.vue.
Establezca la acción del formulario en https://api.formsfort.com/submit.
Mantener la clave de acceso en una entrada oculta; no agregue secretos de API a Nuxt.
Agregue los campos de nombre, correo electrónico, mensaje y verificación de bots.
Implementar y enviar un envío de prueba desde el dominio de producción.
Recursos relacionados
Sigue construyendo desde aquí.
Generador de formularios HTML
Genere un fragmento de formulario listo para el backend antes de adaptarlo a Nuxt.
Jamstack Form Backend
Utilice el mismo patrón de endpoint en Nuxt, Astro, Hugo, 11ty y hosts estáticos.
Prevención de spam de formularios
Capa de honeypots, captcha, dominios permitidos y límites de velocidad en formularios públicos.
Preguntas frecuentes
Preguntas comunes.
¿Necesito una ruta del servidor Nuxt para los formularios de contacto?
No. Si el formulario solo necesita entrega por correo electrónico, filtrado de spam, cargas o reenvío de webhooks, el navegador puede publicar directamente en FormsFort.
¿Esto funciona con la generación estática de Nuxt?
Sí. Debido a que el formulario se publica en un endpoint externo, funciona cuando Nuxt genera archivos estáticos.
¿Puedo enviar con fetch en lugar de usar un POST normal de formulario?
Sí. Utilice fetch() si desea un estado de éxito en línea. Mantenga los mismos nombres de campo y publíquelos en el endpoint de envío de FormsFort.
¿Dónde debo guardar la clave de acceso a FormsFort?
Utilice la clave de acceso público en un campo de formulario oculto. No exponga claves de API de administración, tokens de OAuth ni secretos de captcha en el código del cliente Nuxt.
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.