Nessun runtime server da aggiungere
Hugo produce file statici e si ferma: nessun runtime riceve POST. Un endpoint esterno evita di aggiungere funzioni serverless alla build solo per un modulo.
integrazioni · static site generator
Hugo has no server runtime: it compiles your whole site to static HTML at build time, so there's nothing running to receive a form submission. Point a plain <form> at your mailcontact endpoint instead and submissions land in your project's inbox, with a notification in Discord, Slack, email, or a webhook. No serverless function, no mail service, no Hugo module.
I template Hugo producono HTML: il modulo vive in un partial (layouts/partials/contact-form.html) richiamabile da pagine, layout o shortcode con {{ partial "contact-form.html" . }}. Scrivilo una volta, riusalo ovunque.
Il sito compilato è fatto di file: si pubblica su qualunque hosting statico e il modulo funziona su GitHub Pages, Cloudflare Pages, Netlify o S3 dietro CDN.
configurazione consigliata
Aggiungi questo HTML al sito oppure usa generatore di moduli. Sostituisci il link del modulo con il tuo. Lo script ospitato inserisce il controllo nascosto, gestisce invio e verifica automatica e conserva la bozza in caso di errore. Tu controlli HTML e CSS. I moduli Free mostrano un link visibile “Processed by mailcontact.app”; Pro e Plus no. I messaggi seguono la lingua del browser; imposta data-mailcontact-language="fr" sul modulo per impostare il francese.
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="it" data-mailcontact-language="it">
<input type="hidden" name="_language" value="it" />
<fieldset>
<legend>Contattaci</legend>
<label>
Nome (facoltativo)
<input name="name" type="text" autocomplete="name" maxlength="200" />
</label>
<label>
Email
<input name="email" type="email" autocomplete="email" maxlength="320" required />
</label>
<label>
Messaggio
<textarea name="message" rows="5" maxlength="5000" required></textarea>
</label>
<noscript>
<div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
<label>Sito web
<input name="company_website" type="text" tabindex="-1" autocomplete="off" />
</label>
</div>
</noscript>
<button type="submit">Invia messaggio</button>
</fieldset>
<p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Per un componente con un proprio gestore di invio, carica lo stesso script e usa MailContact.prepare(form) e MailContact.send() al posto del marcatore automatico. Consulta riferimento per interfacce personalizzate per caricamento, messaggi e attribuzione Free.
lo snippet
Questo esempio invia direttamente all’API. Mantieni il campo obbligatorio company_website presente e vuoto. Gli invii nativi aprono JSON in caso di successo o una pagina di verifica se serve. Gli script personalizzati senza supporto alla verifica inviano i messaggi sospetti in Spam per revisione; anche lo spam evidente resta lì senza notifiche né consumo di quota. Una risposta di successo conferma la ricezione, anche per revisione, oppure lo scarto silenzioso di un controllo compilato. Vedi protezione antispam per il comportamento completo.
{{/* layouts/partials/contact-form.html */}}
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" />
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
<input name="company_website" type="text" tabindex="-1" autocomplete="off"
style="position:absolute;left:-10000px" aria-hidden="true" />
</form>come funziona
Una casella per progetto. Chiamala come il sito e ottieni subito endpoint modulo ed email di progetto.
Salva lo snippet in layouts/partials/contact-form.html, poi usa {{ partial "contact-form.html" . }} nella pagina contatti o layout. Il markup è tuo: stilizzalo con il CSS del tema.
Aggiungi Discord, Slack, email o webhook. I messaggi consegnati ti avvisano dove sei già.
perché mailcontact
Hugo produce file statici e si ferma: nessun runtime riceve POST. Un endpoint esterno evita di aggiungere funzioni serverless alla build solo per un modulo.
Definisci contact-form.html una volta e richiamalo in pagine singole, template elenco o shortcode con {{ partial }}. Modificalo in un posto e si aggiornano tutte le pagine.
Il modulo fa parte dell’output statico e viaggia col sito verso GitHub Pages, Cloudflare Pages, Netlify o S3. Nessuna funzione specifica dell’hosting.
FAQ
No. Hugo genera solo HTML statico: il modulo invia all’endpoint mailcontact, che salva il messaggio e invia notifiche. Nulla viene eseguito sul tuo lato.
Sì. L’endpoint accetta POST da qualsiasi origine: funziona ovunque sia servito Hugo, anche su GitHub Pages o semplici bucket S3 senza gestione moduli.
Completamente. mailcontact riceve solo il POST. Il markup del partial è tuo, quindi si applica il CSS del tema. Aggiungi classi, sposta i campi o inseriscilo nel tuo layout.
Usa lo script MailContact ospitato o MailContact.send() per invio, verifica e messaggi in linea (l’endpoint restituisce JSON come {"ok": true}). Il reindirizzamento configurabile per invii nativi non è attualmente disponibile.
correlati
Moduli e un vero indirizzo email insieme, con notifiche dove lavori. Inizia con un account gratuito.
Crea un modulo gratisNon serve la carta di credito. Free include un progetto e 50 messaggi dal modulo al mese.