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é.
intégrations · site builder
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
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.
<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
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.
<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
Une boîte par projet. Nommez-la comme le site Framer pour obtenir immédiatement point de réception et adresse.
Dans Framer, insérez un Embed, choisissez HTML et collez l’extrait avec votre identifiant. Redimensionnez pour afficher tout le formulaire.
Ajoutez Discord, Slack, email ou webhook. Les messages livrés vous alertent dans vos outils.
pourquoi mailcontact
Les formulaires natifs sont payants au moment de la rédaction. Votre HTML dans un Embed envoie directement à mailcontact depuis tout site Framer publié.
Framer publie vos pages sans serveur à vous derrière. Le formulaire envoie à mailcontact. CORS ouvert permet framer.website et les domaines personnalisés.
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
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.
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.
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.
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
Formulaires et vraie adresse email, ensemble, avec des notifications dans vos outils. Commencez gratuitement.
Créer mon formulaireAucune carte bancaire requise. Free comprend un projet et 50 messages de formulaire par mois.