Nessuna cartella api/ necessaria
La ricetta classica Vercel è funzione serverless, SDK email e chiave API nelle variabili d’ambiente. Un’action sostituisce tutto. Nulla da scrivere, pubblicare o ruotare.
integrazioni · hosting platform
Un modulo di contatto su Vercel senza funzione serverless.
Vercel non offre moduli nativi: il consiglio comune è scrivere una funzione serverless e collegarla a un’API email. Puoi evitarlo: punta l’HTML a mailcontact e ricevi nella casella con avvisi Discord, Slack, email o webhook.
Essendo action di un modulo, funziona con Next.js, Astro, SvelteKit o HTML statico su Vercel. Le pagine restano statiche o ISR, senza invocare funzioni all’invio né creare account email.
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 Vercel.
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
<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.
01
Crea una casella
Una casella per progetto. Chiamala come il deploy e ottieni subito endpoint modulo ed email.
02
Aggiungi il modulo
Incolla il modulo in ciò che pubblichi su Vercel: pagina statica, componente Next.js o template Astro. Fai push e Vercel lo pubblica come ogni modifica.
03
Ricevi notifiche
Aggiungi Discord, Slack, email o webhook. I messaggi consegnati ti avvisano dove sei già.
perché mailcontact
Pensato per funzionare con Vercel.
Nessuna esecuzione all’invio
Gli invii vanno ai server mailcontact, non al tuo deploy. Il traffico contatti non consuma invocazioni e non ci sono avvii a freddo tra visitatore e messaggio.
Funziona anche nelle anteprime di pubblicazione
L’endpoint accetta POST da ogni origine: il modulo funziona su anteprime *.vercel.app e dominio di produzione. Niente configurazioni o variabili per ambiente.
FAQ
Vercel + mailcontact: le risposte
Vercel ha un gestore di moduli integrato?
No. Al momento della scrittura Vercel non offre un prodotto moduli: la soluzione comune è una funzione serverless più API email. Con mailcontact il modulo invia direttamente alla casella di progetto e il sito resta statico.
I moduli funzionano nelle anteprime di Vercel?
Sì. L’endpoint accetta POST da qualsiasi URL: lo stesso snippet funziona su anteprime, dominio di produzione e localhost durante lo sviluppo.
Come mostro un messaggio di successo senza lasciare la pagina?
Usa lo script MailContact ospitato o chiama MailContact.send() nel tuo gestore e mostra un ringraziamento nella pagina. Il reindirizzamento configurabile per invii nativi non è attualmente disponibile.
Quali limiti agli invii devo conoscere?
L’endpoint limita a 20 richieste al minuto per IP con corpo massimo di 64KB, generoso per un modulo, e protegge la casella dagli attacchi più semplici di invii in massa.
correlati
Funziona anche con
Una casella per ogni progetto Vercel che pubblichi.
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.