Cinque modi funzionanti per ricevere nella tua casella gli invii dei moduli del sito: mailto, un servizio di endpoint per moduli, Netlify Forms, una funzione serverless con un'API email e Google Apps Script. Con il codice JavaScript di invio e la protezione dallo spam.
Una pagina web non può inviare email da sola. Il modulo deve inviare i suoi dati a qualcosa che può farlo: un servizio di endpoint per moduli, la funzione moduli del tuo hosting, una funzione serverless che chiama un'API email, un Google Apps Script o il tuo server. Scegli in base a quanto controllo ti serve, poi invia con JavaScript così i visitatori restano sulla pagina.
I cinque metodi a confronto
Ogni metodo qui sotto ha il codice completo. Parti dal modulo e dal gestore di invio JavaScript, che funzionano con tutti i metodi, poi scegli un backend.
Solo con un'action mailto:, che apre l'app di posta del visitatore con i dettagli già compilati. Non funziona per chi non ha un'app di posta configurata, compresi molti utenti su computer condivisi o di lavoro, e non puoi né dare stile né validare il risultato. Per qualsiasi cosa importante usa uno degli altri metodi.
Di solito perché il messaggio dichiara di provenire dall'indirizzo del visitatore, oppure perché il tuo dominio non ha record SPF, DKIM e DMARC per il servizio che lo invia. Invia da un indirizzo del tuo dominio, imposta il visitatore come reply-to e aggiungi i record DNS che ti dà il tuo provider email.
Un campo nascosto alle persone ma visibile ai bot semplici. Gli esseri umani lo lasciano vuoto; i bot lo compilano. Il tuo backend scarta qualsiasi invio in cui ha un valore. Blocca molto spam di base senza disturbare i visitatori reali.
Non all'inizio. Parti da un honeypot e da controlli lato server, come rifiutare i messaggi pieni di link. Aggiungi una verifica solo se lo spam continua ad arrivare, e preferiscine una che non chieda alle persone di risolvere rompicapi.
Questo front end funziona con tutti i metodi. Lo script invia il modulo con fetch, mostra un messaggio di stato e conserva il testo se l'invio non riesce.
Le label racchiudono i loro input, il browser controlla i campi obbligatori e il formato dell'email, e la riga di stato viene annunciata agli screen reader.
Funziona con qualsiasi endpoint che accetti un normale invio di modulo. Se l'endpoint vuole JSON, invia invece JSON.stringify(Object.fromEntries(data)) con un content type JSON.
Apre l'app di posta del visitatore con i campi nel corpo del messaggio. Non serve un server, ma non viene inviato nulla se non ha un'app di posta.
Servizi come Formspree, Basin, Getform e Web3Forms ti danno un URL a cui inviare i dati e inoltrano ogni invio alla tua casella. Registrati, crea un modulo, incolla il suo URL nell'attributo action del modulo qui sopra e mantieni lo script fetch. Controlla gli attuali limiti gratuiti di ogni servizio e dove conserva i dati.
Netlify rileva il modulo al momento del deploy quando ha l'attributo data-netlify. Attiva le notifiche email nelle impostazioni dei moduli del sito. Per i moduli generati con JavaScript, tieni anche una copia HTML semplice nei file di build così Netlify può trovarla.
La funzione riceve il modulo, lo controlla e chiama un'API email con una chiave segreta conservata sul server. Questo esempio usa la REST API di Resend; SendGrid, Postmark e Amazon SES funzionano allo stesso modo con i propri endpoint.
Funziona sulle piattaforme che usano gli oggetti web Request e Response. Imposta RESEND_API_KEY nelle variabili d'ambiente del tuo hosting e verifica prima il tuo dominio di invio presso il provider email.
Uno script breve, pubblicato come web app da un account Google, invia via email ogni invio e può registrarlo in un foglio. Si applicano quote giornaliere di email, quindi è adatto a moduli a basso volume.
In un nuovo progetto Apps Script, incolla questo codice, poi pubblicalo come web app eseguita come te e accessibile a chiunque. Usa l'URL della web app come action del modulo.
Gli hosting condivisi spesso eseguono PHP. La funzione integrata mail() funziona su molti hosting, ma la consegna è migliore con una libreria SMTP come PHPMailer e una vera casella di posta sul tuo dominio.
Rifiuta le richieste non POST, ripulisce gli input, non accetta a capo nell'indirizzo di risposta (che permetterebbero agli attaccanti di aggiungere header) e reindirizza a una pagina di ringraziamento.
Inizia gratis · Nessuna carta di credito richiesta