integrazioni · hosting platform

Un modulo di contatto per il sito Netlify indipendente da Netlify.

Netlify Forms è la prima opzione su Netlify: aggiungi data-netlify="true" e gli invii appaiono in dashboard, gratis per circa 100 al mese al momento della scrittura, poi a pagamento. Si cercano alternative perché il modulo smette di funzionare alla migrazione, le notifiche restano in una dashboard poco consultata e i messaggi sono separati per sito.

mailcontact è indipendente dall’hosting. Il modulo invia a un endpoint HTTPS, senza rilevamento in build, attributo data-netlify o campo form-name nascosto: lo stesso markup funziona oggi su Netlify e domani su Vercel, Cloudflare Pages o VPS. Ogni progetto ha anche una vera email come [email protected] subito attiva senza DNS, e ogni messaggio avvisa Discord, Slack, email o webhook.

È volutamente leggero: una casella per progetto con notifiche, senza helpdesk, ticket o SLA. Nulla da riconfigurare quando cambi hosting.

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

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.

contact.html

<!-- No data-netlify attribute, no hidden form-name field -->
<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="How can we help?" 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.

Indirizza il modulo verso l’endpoint

Sostituisci data-netlify="true" con l’URL action sopra e pubblica come ogni modifica. Niente plugin build, rilevamento modulo o opzioni dashboard.

Ricevi notifiche

Aggiungi un canale Discord, Slack, email o webhook. I messaggi ti avvisano dove sei già invece di attendere in dashboard.

perché mailcontact

Pensato per funzionare con Netlify.

Nessun vincolo quando cambi hosting

Netlify Forms dipende dal rilevamento in build: migrare richiede rifare la gestione moduli. Un modulo mailcontact è un URL: passa a Vercel o Cloudflare Pages senza cambiare nulla.

Un vero indirizzo email, oltre al modulo

Netlify Forms intercetta solo moduli. mailcontact dà anche un indirizzo in entrata come [email protected]. Moduli ed email arrivano nella stessa casella.

Una casella per qualsiasi hosting

Progetti su Netlify, Vercel o GitHub Pages? Ognuno ha una casella nello stesso posto anziché elenchi sparsi nelle dashboard degli hosting.

FAQ

Netlify + mailcontact: le risposte

Netlify Forms è gratuito?

Al momento della scrittura Netlify Forms offre circa 100 invii gratuiti al mese, poi passa a un componente a pagamento. Se il sito resta su Netlify e il volume è basso, è ragionevole. Il compromesso è legare la gestione moduli all’hosting.

Cosa succede al modulo se lascio Netlify?

Con Netlify Forms, gli invii si fermano quando sposti il sito perché dipendono dalla pipeline di build Netlify. Un modulo mailcontact invia a un endpoint esterno: ripubblicare lo stesso markup su qualsiasi hosting funziona senza modifiche.

Servono un attributo data-netlify o un campo nascosto form-name?

No. mailcontact identifica il modulo dall’URL endpoint. Email e message sono obbligatori (name e subject facoltativi); anche company_website deve essere presente e vuoto. CORS è aperto: funziona da deploy di branch e anteprime senza altre configurazioni.

Come mostro una conferma dopo l’invio del modulo?

Usa lo script MailContact ospitato o MailContact.send() nel tuo gestore per mantenere i visitatori sulla pagina e mostrare il successo in linea. Il reindirizzamento configurabile per invii nativi non è attualmente disponibile.

correlati

Funziona anche con

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