integrazioni · static site generator

Un modulo di contatto per Eleventy, senza creare un backend.

Eleventy compiles templates to plain HTML, so a contact form is one include away: point a standard <form> at your mailcontact endpoint 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 plugin.

Essendo HTML semplice, lo snippet funziona invariato in Nunjucks, Liquid, WebC, markdown e ogni template 11ty. Mettilo una volta in _includes e richiamalo dalle pagine.

Crea un account Leggi la documentazione

configurazione consigliata

Usa lo script MailContact con il tuo design.

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.

contact.html

<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

Alternativa: integrazione diretta per Eleventy.

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.

_includes/contact-form.njk

<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

Tre passaggi dall’inizio alla fine.

Crea una casella

Una casella per progetto. Chiamala come il sito e ottieni subito endpoint modulo ed email di progetto.

Aggiungi l’include

Salva lo snippet come _includes/contact-form.njk, poi usa {% include "contact-form.njk" %} nella pagina contatti. Il markup è tuo: stilizzalo col CSS del sito.

Ricevi notifiche

Aggiungi Discord, Slack, email o webhook. I messaggi consegnati ti avvisano dove sei già.

perché mailcontact

Pensato per funzionare con Eleventy.

Resta un sito statico

Niente Netlify Functions, collegamenti serverless o eleventy-plugin. L’output resta HTML semplice pubblicabile su ogni hosting statico.

Uno snippet per qualsiasi linguaggio di template

Nunjucks, Liquid, WebC, markdown: 11ty lascia invariato l’HTML, quindi lo stesso include funziona con ogni motore del progetto.

Una casella per ogni progetto 11ty

Eleventy facilita piccoli siti. Dai a ciascuno casella e indirizzo propri anziché convogliare tutto nella posta personale.

FAQ

Eleventy + mailcontact: le risposte

Un modulo di contatto Eleventy richiede un backend o una funzione serverless?

No. Il modulo invia direttamente all’endpoint mailcontact, che salva il messaggio e invia notifiche. La build 11ty resta interamente statica.

Funziona con qualsiasi hosting (GitHub Pages, Netlify, Cloudflare Pages)?

Sì. L’endpoint accetta POST da qualsiasi origine: funziona ovunque sia servito Eleventy, anche su hosting senza gestione moduli come GitHub Pages.

Posso adattare il modulo al mio sito?

Completamente. mailcontact riceve solo il POST. Il markup sopra è tuo, quindi si applica il foglio di stile esistente. Aggiungi classi, sposta i campi o inseriscilo nel tuo layout.

Come mostro una conferma dopo l’invio?

Usa lo script MailContact ospitato o MailContact.send() per invio, verifica e messaggi in linea (l’endpoint restituisce JSON). Il reindirizzamento configurabile per invii nativi non è attualmente disponibile.

correlati

Funziona anche con

Una casella per ogni progetto Eleventy che pubblichi.

Moduli e un vero indirizzo email insieme, con notifiche dove lavori. Inizia con un account gratuito.

Crea un modulo gratis

Non serve la carta di credito. Free include un progetto e 50 messaggi dal modulo al mese.