intégrations · hosting platform

Un formulaire sur Cloudflare Pages, sans écrire de Worker.

Cloudflare Pages sert votre site depuis plus de 300 villes sans recevoir un formulaire. Pas d’équivalent Netlify Forms : son guide renvoie à un tiers. Static Forms pour Pages Functions intercepte le POST puis le remet à une fonction à écrire et à un espace KV à provisionner.

Faire pointer action vers mailcontact retire toute cette couche : sans dossier Functions, binding KV, configuration wrangler ou Worker à maintenir. Les envois vont dans la boîte avec alertes Discord, Slack, email ou webhook.

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

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.

public/contact.html

<!-- No functions/ directory. No KV namespace. No wrangler.toml. -->

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="What's on your mind?" required></textarea>

  <!-- Bots fill this in. Humans never see it. -->
  <input type="text" name="company_website" type="text" tabindex="-1" autocomplete="off"
      style="position:absolute;left:-10000px" aria-hidden="true" />

  <button type="submit">Send</button>
</form>

fonctionnement

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

Créer une boîte

Une boîte par projet. Nommez-la comme le projet Pages pour obtenir immédiatement point de réception et adresse.

Collez le formulaire dans votre sortie

HTML simple, compilation Astro ou bundle React : le formulaire reste du HTML dans la page. La commande de compilation ne change pas.

Déployez comme d’habitude

git push ou wrangler pages deploy. Le formulaire fonctionne dès l’aperçu, sur les alias de branches et votre domaine, sans réglage par environnement.

pourquoi mailcontact

Conçu pour fonctionner avec Cloudflare Pages.

Static Forms n’est pas un backend de formulaires

Il analyse l’envoi et appelle votre gestionnaire. Persistance, notifications, antispam et erreurs restent à écrire : c’est le vrai travail, et le plugin ne le fait pas.

Aucun quota gratuit à surveiller

Workers facture les requêtes et le temps CPU, et un gestionnaire mail ajoute une API et une clé. Une URL externe n’a ni budget d’invocations à dépasser ni démarrage à déboguer à 2 heures du matin.

Résiste à la transition de Pages vers Workers

Cloudflare oriente les nouveaux projets complets vers Workers. Un formulaire vers une URL externe reste indépendant du produit d’hébergement : aucun lien à la plateforme à migrer.

FAQ

Cloudflare Pages + mailcontact : vos questions

Cloudflare Pages gère-t-il les formulaires nativement comme Netlify Forms ?

Non. Netlify détecte un attribut de formulaire au déploiement et conserve les envois ; Cloudflare ne le propose pas. Les solutions documentées sont Static Forms, qui nécessite d’écrire le gestionnaire et de connecter le stockage, ou un service externe. La plateforme n’a pas d’option sans code.

Et le plugin Static Forms de Pages Functions ?

C’est une brique technique, pas un produit. Le plugin intercepte le POST d’un formulaire marqué data-static-form-name et le transmet au gestionnaire respondWith à implémenter. Enregistrer, notifier et filtrer les spams restent à construire. Si vous voulez l’écrire, le plugin aide ; pour l’éviter, un point de réception est plus direct.

Puis-je continuer à utiliser Pages Functions pour autre chose ?

Oui. Aucun conflit : action envoie vers une autre origine, sans toucher au dossier functions/, middleware ou bindings. Cela remplace uniquement la partie contact que vous auriez écrite avec Functions.

Le formulaire fonctionne-t-il sur les prévisualisations et branches ?

Oui. Les envois de toute origine sont acceptés : aperçus *.pages.dev, alias de branche et domaine principal alimentent la même boîte, sans liste d’autorisation ni réglage par environnement.

voir aussi

Fonctionne aussi avec

Une boîte pour chaque projet Cloudflare Pages 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.