integrazioni · static site generator

Un modulo di contatto per Jekyll: senza plugin o server, compatibile con GitHub Pages.

Jekyll genera HTML statico, senza server per i POST; GitHub Pages, dove vive gran parte dei siti Jekyll, non lo esegue. La soluzione standard è un endpoint: punta l’HTML a mailcontact e ricevi nella casella con avvisi Discord, Slack, email o webhook.

Niente modifiche Gemfile, plugin da far passare nella lista GitHub Pages o JavaScript obbligatorio. Salva il modulo come include e inserisci {% include contact-form.html %} in pagine o layout.

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 Jekyll.

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.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

Tre passaggi dall’inizio alla fine.

Crea una casella

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

Aggiungi l’include

Salva lo snippet in _includes/contact-form.html e includilo nella pagina contatti, layout o piè di pagina. Il markup è tuo e il tema lo stilizza.

Ricevi notifiche

Aggiungi un canale Discord, Slack, email o webhook. I messaggi ti avvisano dove sei già, senza controllare dashboard.

perché mailcontact

Pensato per funzionare con Jekyll.

Compatibile con GitHub Pages

GitHub Pages esegue Jekyll con plugin autorizzati e nessun codice server. Un endpoint esterno evita entrambi i limiti: nulla da installare o compilare.

Un include per ogni pagina

Con gli include Jekyll scrivi il modulo una volta in _includes/ e lo riusi in pagine e layout. Cambia endpoint in un file e tutte le pagine seguono.

Una casella per sito

Blog, documentazione o landing page: ogni sito Jekyll ha una casella e un indirizzo propri invece di far arrivare tutto nella posta personale.

FAQ

Jekyll + mailcontact: le risposte

Jekyll può gestire da solo gli invii dei moduli?

No. Jekyll genera HTML statico durante la build. Non c’è un processo server per ricevere POST. Serve un endpoint esterno come mailcontact per accettare e salvare gli invii.

Funziona su GitHub Pages?

Sì. GitHub Pages non esegue codice server e consente solo plugin autorizzati, ma questo modulo non richiede nessuno dei due: invia dal browser ai server mailcontact.

Come mostro un ringraziamento dopo l’invio?

Usa lo script MailContact ospitato per messaggi in linea e verifica automatica o chiama MailContact.send() nel tuo gestore. Il reindirizzamento configurabile per invii nativi non è attualmente disponibile.

Posso adattare il modulo al mio tema Jekyll?

Sì. Lo snippet è HTML semplice nell’include: Minima, Chirpy o temi personalizzati lo stilizzano come il resto del sito. Aggiungi classi e CSS come al solito.

correlati

Funziona anche con

Una casella per ogni progetto Jekyll 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.