Come inviare dati di moduli HTML con JavaScript fetch()

Se hai mai creato un modulo di contatto e hai visto l'intera pagina ricaricarsi dopo che un utente clicca su "Invia", sai già quanto possa essere fastidiosa questa esperienza. Utilizzando tecniche di invio form HTML con fetch javascript, puoi inviare i dati del modulo a un endpoint backend in background, mantenere l'utente sulla stessa pagina e mostrare un messaggio di successo o errore pulito senza alcun refresh completo della pagina. Questo tutorial ti guida attraverso ogni passaggio, dalla scrittura dell'HTML di base fino al puntare la tua chiamata fetch() verso un endpoint Sendform in modo che le tue sottomissioni arrivino direttamente nella tua casella email o nel flusso di lavoro collegato.

Perché Usare fetch() Invece dell'Invio Form Predefinito

Il comportamento predefinito di invio form del browser fa esattamente una cosa: serializza i campi del form, invia una richiesta POST (o GET) all'URL action, e poi carica qualsiasi risposta il server restituisca. Questo significa che l'utente vede un flash bianco, perde la sua posizione di scroll e aspetta che una nuova pagina si carichi. Su una connessione lenta, questo può sembrare rotto.

L'API Fetch risolve questo problema facendo richieste HTTP programmaticamente, interamente in JavaScript, senza navigare via. Questo abilita un pattern di invio form senza ricarica pagina che mantiene gli utenti coinvolti e ti dà il controllo completo su ogni aspetto dell'esperienza utente, inclusi stati di caricamento, feedback di validazione inline e banner di successo animati.

Ragioni pratiche aggiuntive per preferire fetch():

• Puoi allegare header personalizzati (ad esempio, un token CSRF o una chiave di autorizzazione) che un form HTML semplice non può inviare.
• Puoi serializzare i dati come JSON, FormData, o stringhe URL-encoded a seconda di cosa si aspetta l'endpoint.
• La gestione degli errori è esplicita. Tu decidi cosa significa "fallimento" e come comunicarlo.
• Funziona su qualsiasi sito statico, inclusi quelli ospitati su GitHub Pages, Netlify, o una CDN, perché la logica vive interamente nel browser.

Configurazione del Form HTML di Base

Prima di scrivere una singola riga di JavaScript, hai bisogno di un form HTML ben strutturato. Il dettaglio chiave qui è che non hai bisogno di un attributo action che punti da qualche parte, perché JavaScript gestirà l'invio. Tuttavia, vuoi attributi name significativi su ogni input - questi diventano le chiavi dei campi nel payload inviato.

<form id="contact-form" novalidate>
  <div>
    <label for="name">Il Tuo Nome</label>
    <input type="text" id="name" name="name" required placeholder="Mario Rossi">
  </div>

  <div>
    <label for="email">Indirizzo Email</label>
    <input type="email" id="email" name="email" required placeholder="[email protected]">
  </div>

  <div>
    <label for="message">Messaggio</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <button type="submit">Invia Messaggio</button>

  <!-- Area feedback -->
  <div id="form-feedback" aria-live="polite"></div>
</form>

Alcune cose degne di nota in questo markup:

• novalidate sull'elemento form disabilita le bolle di validazione native del browser, dandoti il controllo completo sui messaggi di errore in JavaScript.
• Il div id="form-feedback" con aria-live="polite" è dove appariranno i messaggi di successo ed errore. L'attributo ARIA assicura che gli screen reader annuncino automaticamente il feedback.
• Ogni input ha sia un id (per l'associazione della label) che un name (per il payload del form).

Catturare l'Evento Submit

Il primo passo in qualsiasi invio form javascript è intercettare il comportamento predefinito del browser. Lo fai ascoltando l'evento submit sull'elemento form e chiamando immediatamente event.preventDefault().

const form = document.getElementById('contact-form');

form.addEventListener('submit', async function (event) {
  event.preventDefault(); // Ferma la navigazione predefinita della pagina

  // Validazione base lato client
  const name = form.elements['name'].value.trim();
  const email = form.elements['email'].value.trim();
  const message = form.elements['message'].value.trim();

  if (!name || !email || !message) {
    showFeedback('Per favore compila tutti i campi.', 'error');
    return;
  }

  // Procedi a inviare i dati (sezione successiva)
  await submitForm({ name, email, message });
});

Separando la logica di validazione dalla chiamata di rete, mantieni il codice leggibile e facile da estendere. La parola chiave async sul gestore di eventi ti permette di usare await al suo interno, il che fa sembrare sincrona la chiamata dati API Fetch ed evita catene di promise profondamente annidate.

Puntare fetch() verso un Endpoint Sendform

Qui è dove avviene il vero lavoro. Invece di costruire il tuo server per ricevere, memorizzare e inoltrare le sottomissioni dei form, puoi usare Sendform come tuo backend. Dopo aver creato un form nel dashboard Sendform, ottieni un URL endpoint unico. Quell'URL è tutto ciò di cui hai bisogno.

La funzione di invio qui sotto usa l'API FormData per costruire il payload, che Sendform accetta nativamente:

async function submitForm(data) {
  // Sostituisci questo URL con il tuo endpoint Sendform reale
  const SENDFORM_ENDPOINT = 'https://sendform.net/it/YOUR_FORM_ID';

  const formData = new FormData();
  formData.append('name', data.name);
  formData.append('email', data.email);
  formData.append('message', data.message);

  try {
    const response = await fetch(SENDFORM_ENDPOINT, {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      showFeedback('Grazie! Il tuo messaggio è stato inviato.', 'success');
      form.reset();
    } else {
      const errorData = await response.json().catch(() => ({}));
      const errorMsg = errorData.message || 'Qualcosa è andato storto. Per favore riprova.';
      showFeedback(errorMsg, 'error');
    }
  } catch (networkError) {
    showFeedback('Errore di rete. Controlla la tua connessione e riprova.', 'error');
  }
}

Decisioni chiave prese in questo codice:

• Nessun header Content-Type è impostato manualmente. Quando passi un oggetto FormData come body, il browser imposta automaticamente il boundary multipart/form-data corretto.
• Il controllo response.ok copre tutti i codici di stato HTTP 2xx, non solo 200. Questo è più robusto del confrontare response.status === 200.
• Il try/catch esterno cattura fallimenti a livello di rete (errori DNS, stato offline) che response.ok non vedrebbe mai.

Gestire la Risposta - Messaggi di Successo ed Errore

Inviare i dati è solo metà del lavoro. Gli utenti hanno bisogno di feedback immediato e chiaro. La funzione helper showFeedback() referenziata sopra scrive un messaggio nel div feedback che hai aggiunto all'HTML:

function showFeedback(message, type) {
  const feedbackEl = document.getElementById('form-feedback');
  feedbackEl.textContent = message;
  feedbackEl.className = type === 'success' ? 'feedback-success' : 'feedback-error';
}

Questo è intenzionalmente minimale. In un progetto reale potresti sostituire textContent con un componente animato o una libreria di notifiche toast, ma il pattern rimane lo stesso: aggiorna il DOM basandoti sull'esito della chiamata fetch().

Per scenari più avanzati, come reindirizzare a una pagina di ringraziamento personalizzata o attivare un'automazione downstream dopo l'invio, consulta il nostro articolo su come automatizzare i flussi di lavoro dei form con webhook, Zapier e API.

Migliori Pratiche e Suggerimenti

Far funzionare il codice è una cosa. Spedirlo in un modo che regge in produzione è un'altra. Ecco i suggerimenti più importanti da tenere a mente:

• Disabilita il pulsante di invio durante la richiesta. Imposta button.disabled = true prima di chiamare fetch() e riabilitalo in un blocco finally. Questo previene invii duplicati se l'utente clicca più volte.
• Mostra uno stato di caricamento. Cambia il testo del pulsante in "Invio in corso..." o aggiungi una classe spinner mentre la richiesta è in corso. Gli utenti che non vedono feedback spesso presumono che nulla sia successo e cliccano di nuovo.
• Valida anche lato server. La validazione lato client è per l'esperienza utente. Sendform e qualsiasi servizio backend dovrebbero trattare tutti i dati in arrivo come non fidati.
• Usa HTTPS ovunque. Inviare dati form su HTTP semplice espone l'input dell'utente in transito. Gli endpoint Sendform sono HTTPS per default, ma assicurati che anche la tua pagina sia servita su HTTPS.
• Aggiungi protezione spam. Un campo honeypot o un'integrazione CAPTCHA riduce significativamente le sottomissioni spazzatura. Per uno sguardo più approfondito su questo argomento, vedi la nostra guida sulle migliori pratiche di protezione spam per i form.
• Testa deliberatamente il percorso di errore. Cambia temporaneamente l'URL dell'endpoint in qualcosa di non valido e conferma che appaia il tuo messaggio di errore. La maggior parte degli sviluppatori testa solo il percorso felice.
• Mantieni l'URL dell'endpoint fuori dal controllo versione. Se il tuo progetto è open source, memorizza l'endpoint Sendform in una variabile d'ambiente o un file di configurazione che è elencato in .gitignore.

Conclusione

Sostituire un invio form predefinito con una chiamata fetch() è uno dei miglioramenti ad alto impatto che puoi fare a qualsiasi form di contatto o cattura lead. Il risultato è un'esperienza più veloce e professionale che mantiene gli utenti sulla tua pagina e ti dà il controllo completo sui messaggi di feedback. Abbina questo con un endpoint Sendform ed elimini completamente il bisogno di qualsiasi codice lato server. Il tuo form è live, le tue sottomissioni raggiungono la tua casella email, e i tuoi utenti non vedono mai una ricarica pagina fastidiosa. Crea il tuo endpoint Sendform gratuito oggi e ricevi la tua prima sottomissione consegnata in minuti.

Domande Frequenti