Per configurar formularis de Netlify, segueix aquests passos:

1. Activar la detecció automàtica de formularis

• Al panell del teu projecte, accedeix a Formularis i activa Habilitar detecció de formularis.
• A partir del següent deploy, Netlify escanejarà el projecte a la recerca de formularis.

2. Integració del formulari al codi

• Crea un component <form> que inclogui els paràmetres següents:
  • Un atribut name únic per al formulari
  • netlify o data-netlify="true"
  • method="POST"
  • Un camp ocult form-name amb el mateix valor que l'atribut name
  • Un honeypot per a la prevenció 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">Envia</button>
  </form>
  

  • El valor de form-name ha de coincidir amb l'atribut name del formulari, "contact" en el cas de la plantilla.
  • Cada camp ha d'incloure un atribut name perquè Netlify pugui registrar el valor.

3. Gestió del submit amb JS

• Per evitar el refresc o la redirecció de la pàgina en enviar el formulari, pots interceptar l'esdeveniment submit i enviar les dades mitjançant fetch.
• Exemple bàsic amb 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('Formulari enviat correctament');
      } else {
        throw new Error(`Error: ${response.statusText}`);
      }
    } catch (error) {
        console.log("Error: " + error.message);
    }
  };
  

  • Un cop creat el mètode, assigna'l a l'esdeveniment submit del formulari amb @submit.prevent.

4. Gestió d'ús i notificacions

• Després del deploy, el formulari apareixerà automàticament a la secció Formularis del projecte.
• Accedeix a Notificacions de formulari per afegir notificacions d'enviament.