integrazioni · hosting platform

Un modulo di contatto su GitHub Pages, senza lasciare GitHub Pages.

GitHub Pages serve solo file statici, senza funzioni, route API o codice server: non può gestire il modulo. Basta inviare a un endpoint esterno: punta l’HTML all’URL modulo mailcontact e ricevi nella casella con avvisi Discord, Slack o email.

Nulla da installare o compilare. Lo snippet funziona in index.html scritto a mano, layout o include Jekyll e siti statici pubblicati su gh-pages. Commit, push, fatto.

Ottieni anche una vera email in entrata ([email protected]), utile per non pubblicare la tua personale in un repository pubblico.

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

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.

index.html

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="What's on your mind?" 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 repository e ottieni subito endpoint modulo ed email.

Salva il modulo nel repository

Incolla lo snippet in index.html, include Jekyll o sezione contatti. Pubblica sul branch Pages come sempre.

Ricevi notifiche

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

perché mailcontact

Pensato per funzionare con GitHub Pages.

Rispetta i limiti di Pages

GitHub Pages non eseguirà il backend e con mailcontact non serve. Il modulo invia ai server mailcontact; il repository resta al 100% statico.

Nessun indirizzo email nel repository pubblico

Un link mailto: espone l’indirizzo a chi analizza il sorgente. Endpoint modulo e [email protected] tengono l’email personale fuori dal repository.

Una casella per ogni repository che pubblichi

Documentazione, portfolio o pagina progetto: ogni sito GitHub Pages ha casella e indirizzo propri, senza accumulare tutto nella posta personale.

FAQ

GitHub Pages + mailcontact: le risposte

GitHub Pages può gestire da solo gli invii dei moduli?

No. GitHub Pages serve file statici senza codice server e non può elaborare POST. I moduli devono inviare a un endpoint esterno come mailcontact.

Funziona con Jekyll su GitHub Pages?

Sì. Lo snippet è HTML semplice e funziona in layout Jekyll, include o pagine Markdown con HTML. La build Jekyll di GitHub non lo modifica.

Come mostro una conferma dopo l’invio?

Usa lo script MailContact ospitato per messaggi in linea e verifica automatica o MailContact.send() nel tuo gestore. L’endpoint ha CORS aperto, quindi funziona da qualsiasi github.io o dominio personalizzato. Il reindirizzamento configurabile per invii nativi non è attualmente disponibile.

Posso adattare il modulo al mio sito?

Completamente. Il markup è tuo e mailcontact fornisce solo l’endpoint. Usa il CSS esistente, le classi del tema Jekyll o altro: nessun widget o iframe.

correlati

Funziona anche con

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