intégrations · site builder

Un formulaire pour votre site Framer, avec un Embed.

Ajoutez un Embed de code, collez du HTML et indiquez mailcontact dans action : les envois arrivent dans la boîte avec alertes Discord, Slack ou email.

Les formulaires natifs Framer sont payants au moment de la rédaction. Un Embed est différent : votre HTML envoie à une URL externe, sans utiliser les fonctions natives, sur tout site Framer.

Chaque boîte a aussi une vraie adresse ([email protected]) immédiatement active. Pratique pour une landing page avant de configurer le mail du domaine.

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

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.

Insert → Embed → 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 can we help with?" 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>
<style>
  form { display: grid; gap: 8px; font-family: system-ui, sans-serif; }
  input, textarea, button { padding: 10px 12px; border: 1px solid #d4d4d4; border-radius: 8px; font: inherit; }
  textarea { min-height: 96px; resize: vertical; }
  button { background: #111; color: #fff; border: none; cursor: pointer; }
</style>

fonctionnement

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

01

Créer une boîte

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

02

Collez dans un Embed

Dans Framer, insérez un Embed, choisissez HTML et collez l’extrait avec votre identifiant. Redimensionnez pour afficher tout le formulaire.

03

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

Pas de changement d’offre pour un formulaire

Les formulaires natifs sont payants au moment de la rédaction. Votre HTML dans un Embed envoie directement à mailcontact depuis tout site Framer publié.

Rien à héberger derrière le site

Framer publie vos pages sans serveur à vous derrière. Le formulaire envoie à mailcontact. CORS ouvert permet framer.website et les domaines personnalisés.

Une adresse email dans la même boîte

Une landing page Framer a souvent besoin d’une adresse. [email protected] fonctionne immédiatement sans DNS et rejoint les formulaires dans la même boîte.

FAQ

Framer + mailcontact : vos questions

Faut-il une offre Framer payante pour ajouter un formulaire ?

Pas avec cette méthode. Les formulaires natifs Framer sont payants au moment de la rédaction, mais cet exemple est du HTML dans un Embed qui envoie à mailcontact. Il n’utilise pas les fonctions de formulaire Framer.

Comment afficher une confirmation après l’envoi ?

Le point de réception renvoie un petit JSON : un envoi natif affiche cette réponse brute. Utilisez le script MailContact hébergé dans l’Embed pour l’envoi, la vérification et les retours sur place. La redirection native configurable n’est pas disponible actuellement.

Puis-je adapter le formulaire à mon design Framer ?

Oui, vous contrôlez le HTML. L’Embed n’hérite pas des styles Framer : ajoutez un bloc style, comme l’exemple, avec les mêmes polices et couleurs.

Cela fonctionne-t-il depuis un sous-domaine gratuit framer.website ?

Oui. Le point de réception accepte toute origine : sous-domaines gratuits et domaines personnalisés fonctionnent. Limites généreuses pour un contact : 20 requêtes par minute et par IP.

voir aussi

Fonctionne aussi avec

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