FormData plutôt que v-model ici
Pas besoin de réactivité à chaque frappe. Lire le formulaire à l’envoi évite refs et logique de réinitialisation, tout en conservant required natif.
intégrations · framework
Un formulaire a trois champs et un usage ponctuel. Pourtant, on conseille souvent une route Express ou fonction serverless simplement pour lire trois chaînes et les transmettre à une API email.
Utilisez plutôt mailcontact, sans JavaScript ou avec @submit.prevent et FormData pour rester sur place avec votre confirmation. Aucun serveur dans le projet.
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.
<script setup>
import { ref } from "vue";
const sent = ref(false);
const sending = ref(false);
async function submit(event) {
sending.value = true;
await fetch("https://mailcontact.app/api/forms/your-form-id", {
method: "POST",
body: new FormData(event.target),
});
sending.value = false;
sent.value = true;
}
</script>
<template>
<p v-if="sent">Thanks. We'll be in touch.</p>
<form v-else @submit.prevent="submit">
<input name="name" placeholder="Your name" required />
<input name="email" type="email" placeholder="[email protected]" required />
<textarea name="message" placeholder="What's on your mind?" required />
<input name="company_website" type="text" tabindex="-1" autocomplete="off"
style="position:absolute;left:-10000px" aria-hidden="true" />
<button :disabled="sending">{{ sending ? "Sending..." : "Send" }}</button>
</form>
</template>fonctionnement
Une boîte par projet. URL et adresse disponibles avant d’écrire un composant.
Collez le bloc et remplacez l’identifiant. new FormData(event.target) lit les attributs name, sans v-model ni objet réactif à synchroniser.
Ajoutez Discord, Slack, email ou webhook. Les messages vous atteignent sans consulter une base de données.
pourquoi mailcontact
Pas besoin de réactivité à chaque frappe. Lire le formulaire à l’envoi évite refs et logique de réinitialisation, tout en conservant required natif.
Ni SSR, Nitro ou adaptateur. Le même code fonctionne sur Vite, Vue CLI ou un îlot Vue : seule dépendance d’exécution, fetch.
Une solution maison exige de choisir un stockage et créer un écran de lecture. La boîte par projet fournit cet écran et reçoit aussi [email protected].
FAQ
Pas seule. Les navigateurs ne parlent pas SMTP, et toute clé API mail dans un composant Vue est envoyée au navigateur, où chacun peut la lire et l’utiliser. Le formulaire doit envoyer à un serveur ; la question est seulement de savoir si vous devez le maintenir. Avec un point de réception, non.
Non. Retirez le bloc script et donnez au formulaire un attribut action vers votre point de réception : il fonctionne sans JavaScript, idéal pour une page surtout statique. Utilisez @submit.prevent pour rester sur la page et afficher votre confirmation.
Gardez celle du navigateur. required, type="email" et pattern s’appliquent toujours car il s’agit d’un vrai formulaire. Pour des messages personnalisés, vérifiez event.target.checkValidity() avant fetch et affichez votre texte en conséquence.
Oui. Rien ne dépend de script setup ou Composition API : un gestionnaire appelle fetch avec FormData. Déplacez submit dans methods et sent dans data pour Options API, y compris Vue 2 avec le même événement DOM.
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.