intégrations · site builder

Les formulaires Webflow, sans limites liées à l’offre.

Les formulaires Webflow natifs fonctionnent mais leur quota dépend de l’offre. Un Embed avec votre HTML vers mailcontact évite cette gestion et place les envois en boîte avec alertes Discord, Slack, email ou webhook.

Gardez votre design Webflow : réutilisez w-input et w-button pour les styles existants. Les visiteurs ne voient pas de différence.

Chaque boîte mailcontact ayant aussi une adresse ([email protected]), messages Webflow et autres projets sont réunis au lieu d’un panneau Forms par site.

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

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.

Élément Embed (Webflow Designer → panneau Add)

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input class="w-input" type="text" name="name" placeholder="Your name" />
  <input class="w-input" type="email" name="email" placeholder="[email protected]" required />
  <textarea class="w-input" name="message" placeholder="How can we help?" required></textarea>
  <button class="w-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 site. Nommez-la comme le projet pour obtenir URL et adresse sans DNS ni code head.

Collez un élément Embed

Dans Designer, glissez un Embed, collez le code et publiez. w-input et w-button reprennent vos styles de formulaire.

Recevoir des alertes

Ajoutez Discord, Slack, email ou webhook : inutile d’ouvrir le tableau du site pour vérifier.

pourquoi mailcontact

Conçu pour fonctionner avec Webflow.

Ne compte pas dans votre quota

Webflow compte les envois natifs selon l’offre. Un Embed appelle mailcontact directement : Webflow ne les compte ni ne les limite.

Aux couleurs de votre site

L’Embed est votre HTML. w-input et w-button reprennent les styles existants, ou utilisez vos classes et du CSS personnalisé.

Une boîte pour les sites clients

Plusieurs sites Webflow ou technologies mixtes ? Chaque projet a sa boîte et son adresse, gérées ensemble plutôt qu’un panneau Forms par site.

FAQ

Webflow + mailcontact : vos questions

Combien d’envois Webflow autorise-t-il ?

Les formulaires Webflow natifs ont un quota mensuel lié à l’offre du site au moment de la rédaction (vérifiez les tarifs actuels). Un formulaire HTML personnel envoyé à mailcontact contourne cette gestion : ces limites ne s’y appliquent donc pas.

Faut-il une offre Webflow payante pour utiliser un élément Embed ?

Webflow réserve le code personnalisé (dont Embed) aux offres payantes au moment de la rédaction : vérifiez votre offre. Si les intégrations sont permises, le formulaire ne coûte rien de plus et ne consomme pas le quota natif.

Le formulaire intégré s’adaptera-t-il au design Webflow ?

Oui, si vous le définissez. Ajoutez w-input aux champs et w-button au bouton pour reprendre Webflow, ou vos classes et du CSS personnalisé.

Comment afficher une confirmation après un envoi ?

Le point de réception répond en JSON sans redirection. Utilisez le script MailContact hébergé dans l’Embed pour l’envoi, la vérification et les retours sur place. CORS ouvert permet les domaines webflow.io et personnalisés. La redirection native configurable n’est pas disponible actuellement.

voir aussi

Fonctionne aussi avec

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