Vite static
Formulario de contacto para un sitio Vite estático sin backend.
La compilación de producción de Vite es un conjunto de recursos estáticos en dist/. Su servidor de desarrollo y paquete cliente no procesan envíos de producción, así que use un formulario HTML estándar que envíe directamente a FormsFort.
Cómo funciona
Tres pasos para la producción de formularios.
Cree un formulario alojado
Cree un formulario de FormsFort, configure las notificaciones y copie la clave de acceso pública.
Añada marcado estático
Coloque el formulario en index.html o en el componente renderizado de su aplicación Vite. action es un POST entre sitios normal.
Despliegue dist/
Ejecute vite build y sirva dist/ desde un host estático. No dependa del servidor de desarrollo de Vite ni del JavaScript cliente para recibir envíos.
Configuración
Página index de Vite con un formulario de contacto HTML
<!-- index.html -->
<section aria-labelledby="vite-contact-title">
<h1 id="vite-contact-title">Request a demo</h1>
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="hidden" name="subject" value="New Vite demo request">
<label for="vite-company">Company</label>
<input id="vite-company" name="company" type="text" autocomplete="organization" required>
<label for="vite-email">Work email</label>
<input id="vite-email" name="email" type="email" autocomplete="email" required>
<label for="vite-team-size">Team size</label>
<input id="vite-team-size" name="team_size" type="number" min="1" required>
<label for="vite-message">What are you building?</label>
<textarea id="vite-message" name="message" rows="4" required></textarea>
<input type="checkbox" name="botcheck" style="display:none">
<button type="submit">Request a demo</button>
</form>
</section>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.
Agregue el marcado a index.html o al componente renderizado por el punto de entrada de Vite.
Establezca action en https://api.formsfort.com/submit y conserve method=POST.
Use solo la clave de acceso pública; no coloque secretos de API en el paquete cliente de Vite.
Ejecute vite build y despliegue dist/ en el host estático que sirve el sitio.
Envíe una solicitud de demostración desde la URL desplegada y verifique la notificación configurada.
Recursos relacionados
Sigue construyendo desde aquí.
Generador de plantillas de formularios HTML
Genere un punto de partida HTML simple antes de integrarlo en una página de entrada de Vite.
Guía del endpoint de formularios
Revise los campos del endpoint y el comportamiento de respuesta tras un POST directo.
Formulario de captura de clientes potenciales
Adapte un formulario Vite estático a consultas cualificadas de demostración y ventas.
Preguntas frecuentes
Preguntas comunes.
¿El servidor de desarrollo de Vite es un backend de formularios?
No. El servidor de desarrollo de Vite es para desarrollo local y vite build emite recursos estáticos en dist/. Los envíos de producción necesitan un endpoint alojado como FormsFort.
¿Un formulario Vite estático necesita JavaScript del cliente?
No. Un POST nativo de formulario basta para navegar a la respuesta de FormsFort. Añada JavaScript solo si necesita una experiencia personalizada de carga o éxito en línea.
¿Dónde debo colocar el formulario en un proyecto Vite?
Use index.html para una página estática simple o renderice un marcado equivalente desde el punto de entrada de la aplicación. En ambos casos el HTML generado por el navegador envía a FormsFort.
¿Puedo usar las variables de entorno de Vite para la clave de acceso?
Use únicamente una clave de acceso pública en el marcado expuesto al cliente. Vite sustituye las variables de entorno del cliente durante la compilación, por lo que no debe colocar allí claves de API privadas ni secretos de webhook.
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.