Para configurar formularios de Netlify, sigue estos pasos:

1. Activar la detección automática de formularios

• En el panel de tu proyecto, accede a Formularios y activa Habilitar detección de formularios.
• A partir del siguiente deploy, Netlify escaneará el proyecto en busca de formularios.

2. Integración del formulario en el código

• Crea un componente <form> que incluya los siguientes parámetros:
  • Un atributo name único para el formulario
  • netlify o data-netlify="true"
  • method="POST"
  • Un campo oculto form-name con el mismo valor que el atributo name
  • Un honeypot para prevención de spam
• Plantilla básica:

  <form 
    @submit.prevent="handleSubmit" 
    name="Contact" 
    data-netlify="true" 
    netlify-honeypot="hpfield" 
    method="POST"
  >
    <input type="hidden" name="form-name" value="Contact">
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <button type="submit">Enviar</button>
  </form>
  

  • El valor de form-name debe coincidir con el atributo name del formulario, "contact" en el caso de la plantilla.
  • Cada campo debe incluir un atributo name para que Netlify pueda registrar el valor.

3. Gestión de submit con JS

• Para evitar el refresco o redirección de la página al enviar el formulario, se puede interceptar el evento submit y enviar los datos mediante fetch.
• Ejemplo básico con JavaScript:

  const handleSubmit = async (event) => {
  
    const form = event.target;
    const formData = new FormData(form);
    
    try {
      const response = await fetch("/", {
        method: 'POST',
        body: formData,
        headers: {
          'Accept': 'application/json',
        }
      });
      if (response.ok) {
        console.log('Formulario enviado correctamente');
      } else {
        throw new Error(`Error: ${response.statusText}`);
      }
    } catch (error) {
        console.log("Error: " + error.message);
    }
  };
  

  • Una vez creado el método, asígnalo al evento submit del formulario usando @submit.prevent.

4. Gestión de uso y notificaciones

• Tras el deploy, el formulario aparecerá automáticamente en la sección Formularios del proyecto.
• Accede a Notificaciones de formulario para añadir notificaciones de envío.