intégrations · hosting platform

Un formulaire sur Vercel, sans fonction serverless.

Vercel ne propose pas de formulaire intégré : on conseille souvent fonction serverless et API email. Évitez-les en pointant le HTML vers mailcontact : boîte de projet et alertes Discord, Slack, email ou webhook.

Une simple action fonctionne avec Next.js, Astro, SvelteKit ou HTML sur Vercel. Vos pages restent statiques ou ISR, sans fonction à appeler ni compte fournisseur email.

Créer un compte Lire la documentation

configuration recommandée

Utilisez le script MailContact avec votre design.

Ajoutez ce HTML à votre site, ou utilisez le générateur de formulaires. Remplacez le lien du formulaire par le vôtre. Le script hébergé injecte le contrôle caché, gère l’envoi et la vérification automatique, et conserve le brouillon en cas d’erreur. Vous contrôlez le HTML et le CSS. Les formulaires Free affichent un lien visible « Traité par mailcontact.app » ; Pro et Plus ne l’affichent pas. Les messages de retour suivent la langue du navigateur ; définissez data-mailcontact-language="fr" sur le formulaire pour imposer le français.

contact.html

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="fr" data-mailcontact-language="fr">
  <input type="hidden" name="_language" value="fr" />
  <fieldset>
    <legend>Contactez-nous</legend>
    <label>
      Nom (facultatif)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      Email
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Message
      <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>Site web
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Envoyer le message</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>

Pour un composant doté de son propre gestionnaire d’envoi, chargez le même script et utilisez MailContact.prepare(form) et MailContact.send() au lieu du marqueur automatique. Voir la référence des interfaces personnalisées pour le chargement, les messages de retour et l’attribution Free.

l’extrait

Alternative : une intégration directe pour Vercel.

Cet exemple appelle directement l’API. Gardez le champ requis company_website champ présent et vide. Les envois natifs ouvrent du JSON en cas de succès ou une page de vérification si nécessaire. Les scripts personnalisés sans vérification envoient les messages suspects dans les spams pour examen ; les spams manifestes y sont aussi retenus sans notification ni consommation du quota. Un succès confirme la réception, y compris pour examen, ou l’abandon silencieux d’un contrôle rempli. Voir protection antispam pour le comportement complet.

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>

fonctionnement

Trois étapes, du début à la fin.

Créer une boîte

Une boîte par projet. Nommez-la comme le déploiement pour obtenir immédiatement URL et adresse.

Ajoutez le formulaire

Collez dans page statique, composant Next.js ou template Astro. Un push suffit à déployer sur Vercel.

Recevoir des alertes

Ajoutez Discord, Slack, email ou webhook. Les messages livrés vous alertent dans vos outils.

pourquoi mailcontact

Conçu pour fonctionner avec Vercel.

Évitez entièrement le dossier api/

La recette Vercel ajoute fonction, SDK et clé d’environnement. Une action remplace le tout. Rien à écrire, déployer ni renouveler.

Aucune invocation à l’envoi

Les envois vont à mailcontact, pas au déploiement. Le trafic ne consomme pas vos invocations et n’attend aucun démarrage à froid.

Fonctionne aussi en prévisualisation

Toute origine est acceptée : aperçus *.vercel.app et domaine principal utilisent le même formulaire, sans configuration ni variables par environnement.

FAQ

Vercel + mailcontact : vos questions

Vercel dispose-t-il d’un gestionnaire de formulaire natif ?

Non. Au moment de la rédaction, Vercel n’a pas de produit de formulaires : la solution habituelle est une fonction serverless et une API email. Avec mailcontact, le formulaire envoie directement dans la boîte du projet et votre site reste statique.

Les formulaires fonctionnent-ils sur les déploiements de prévisualisation Vercel ?

Oui. Les envois de toute URL sont acceptés : le même code fonctionne en prévisualisation, en production et sur localhost.

Comment afficher une confirmation sans quitter la page ?

Utilisez le script MailContact hébergé ou MailContact.send() dans votre gestionnaire et affichez un remerciement sur place. La redirection native configurable n’est pas disponible actuellement.

Quelles limites d’envoi dois-je connaître ?

Le point de réception limite à 20 requêtes par minute et par IP avec 64 Ko maximum par corps, largement suffisant pour un formulaire, et protège contre les afflux rudimentaires.

voir aussi

Fonctionne aussi avec

Une boîte pour chaque projet Vercel lancé.

Formulaires et vraie adresse email, ensemble, avec des notifications dans vos outils. Commencez gratuitement.

Créer mon formulaire

Aucune carte bancaire requise. Free comprend un projet et 50 messages de formulaire par mois.