Come creare un modulo di contatto senza server SMTP — Guida completa | Lugatu
Scopri come ricevere i messaggi dei visitatori in totale sicurezza senza memorizzare credenziali SMTP nel codice, senza server di posta e senza problemi di recapito.
1. I limiti dei tradizionali moduli SMTP
Le connessioni SMTP su porte come 25 o 587 vengono spesso bloccate su piattaforme Jamstack e serverless. Inoltre, credenziali scadute provocano la perdita inconsapevole di contatti.
Non memorizzare mai credenziali SMTP nei repository Git o nel codice del client. Usa endpoint protetti di acquisizione HTTPS.
2. Passo 1: Il modulo HTML con protezione honeypot
Crea il tuo modulo in HTML semantico. Includi un campo honeypot nascosto che i visitatori reali lasciano vuoto ma i bot compilano in automatico.
<!-- Vanilla HTML Form with Lugatu Form Endpoint -->
<form id="inquiry-form">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required />
<label for="email">Work Email</label>
<input type="email" id="email" name="email" required />
<label for="message">Project Details</label>
<textarea id="message" name="message" rows="4" required></textarea>
<!-- Built-in Honeypot Bot Trap -->
<input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />
<button type="submit">Send Inquiry</button>
</form>
<script>
document.getElementById('inquiry-form').addEventListener('submit', async (e) => {
e.preventDefault();
const form = e.target;
const data = new FormData(form);
const payload = {
fields: {
name: data.get('name'),
email: data.get('email'),
message: data.get('message')
},
honeypot: data.get('_gotcha') || ''
};
const res = await fetch('https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
body: JSON.stringify(payload)
});
if (res.ok) {
alert('Inquiry sent successfully!');
form.reset();
}
});
</script>3. Passo 2: Invio sicuro tramite Fetch API
Intercetta l’invio con JavaScript e trasmetti i campi in formato JSON all’API di Lugatu, ricevendo subito una conferma visiva per l’utente.
4. Modalità di notifica flessibili e conservazione duratura
Anche se vengono raggiunte le quote di posta elettronica in uscita, tutti gli invii rimangono conservati nella casella di posta dell'area di lavoro. Puoi scegliere Avvisi istantanei, Riepiloghi giornalieri o Riepiloghi esecutivi settimanali per modulo.
Invariante di sicurezza e autenticazione
Regola antispam: Utilizza sempre campi honeypot negli endpoint pubblici. Le chiavi API private non devono mai comparire nel codice sorgente del browser.
Risoluzione dei problemi ed errori comuni di importazione
Lugatu autorizza richieste JSON da qualsiasi origine su /api/v1/public/forms/.... Controlla che l’URL sia esattamente identico.
Domande frequenti
Questa procedura è valida anche su GitHub Pages o Netlify?
Sì, assolutamente. Dal momento che Lugatu si fa carico della logica backend, il modulo opera allo stesso modo su qualunque hosting statico.
Pronto per creare l'endpoint del modulo?
Inizia gratuitamente in pochi secondi. Nessuna carta di credito richiesta.