Tutorial: Formularios de Sitios Web Estáticos con Fabform

Cuando se desarrollan sitios web estáticos, uno de los desafíos comunes es cómo manejar formularios sin tener un backend o un servidor propio. Para resolver esto, podemos utilizar servicios como Fabform, que permite manejar la recolección de datos de formularios de manera simple y eficiente.

Este tutorial te guiará paso a paso para implementar formularios en un sitio web estático utilizando Fabform.

1. Crear el formulario HTML básico

Primero, necesitas un formulario HTML básico. Aquí tienes un ejemplo de un formulario de contacto simple:

<form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Mensaje:</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Enviar</button>
</form>

Este es un formulario simple con tres campos: nombre, correo electrónico y mensaje. El atributo action apunta a la URL de Fabform, donde YOUR_FORM_ID es el identificador único de tu formulario (se obtiene después de registrar el formulario en Fabform).

2. Registrar el formulario en Fabform

Sigue estos pasos:

Ve a Fabform y crea una cuenta o inicia sesión.
Una vez dentro, haz clic en "Crear un nuevo formulario".
Asigna un nombre a tu formulario, y obtendrás un ID único para tu formulario (el que necesitas poner en el atributo action de tu formulario HTML).
Configura las notificaciones por correo electrónico, si deseas recibir los datos enviados a tu correo.
Guarda y copia el enlace generado para pegarlo en el código HTML como vimos antes.

3. Agregar protección de spam (Opcional)

Fabform proporciona protección contra spam mediante reCAPTCHA o Honeypot. Aquí te mostramos cómo puedes añadir un campo Honeypot para reducir los envíos de bots.

Agrega un campo oculto al formulario para engañar a los bots (que llenarán el campo, pero los usuarios humanos no lo verán ni lo rellenarán).

<form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="honeypot" style="display: none;">
  <!-- Los otros campos de tu formulario -->
</form>

Si deseas añadir reCAPTCHA, puedes configurarlo en Fabform directamente.

4. Manejo de redireccionamiento después del envío

Para una mejor experiencia de usuario, es posible que quieras redirigir al usuario a una página de agradecimiento después de enviar el formulario. Para ello, simplemente debes configurar el redireccionamiento en el panel de Fabform o añadir un campo oculto en el formulario.

<input type="hidden" name="_redirect" value="https://tusitio.com/gracias">

Esto hará que, después de que el usuario envíe el formulario, sea redirigido automáticamente a la URL especificada.

5. Prueba del formulario

Finalmente, asegúrate de probar el formulario para verificar que los datos se están enviando correctamente a Fabform. Llena el formulario con datos de prueba y comprueba si llegan a tu correo (o revisa el panel de Fabform para verificar los envíos).

Conclusión

Con Fabform, puedes implementar formularios en un sitio web estático sin necesidad de configurar un backend, lo que simplifica el proceso de desarrollo y manejo de datos. Solo necesitas configurar el formulario HTML correctamente y vincularlo con Fabform para empezar a recibir datos de tus usuarios.

¡Ahora estás listo para recolectar datos en tu sitio web estático de manera fácil y efectiva!