intégrations · framework

Un formulaire Vue, sans serveur derrière.

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

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

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.

src/components/ContactForm.vue
<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

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

01

Créer une boîte

Une boîte par projet. URL et adresse disponibles avant d’écrire un composant.

02

Ajoutez le composant

Collez le bloc et remplacez l’identifiant. new FormData(event.target) lit les attributs name, sans v-model ni objet réactif à synchroniser.

03

Recevoir des alertes

Ajoutez Discord, Slack, email ou webhook. Les messages vous atteignent sans consulter une base de données.

pourquoi mailcontact

Conçu pour fonctionner avec Vue.

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.

Fonctionne dans une SPA Vite simple

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.

Votre boîte n’est pas votre base de données

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

Vue + mailcontact : vos questions

Une application Vue peut-elle envoyer un email sans backend ?

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.

Ai-je vraiment besoin de @submit.prevent ?

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.

Comment afficher les erreurs de validation ?

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.

Cela fonctionne-t-il avec Options API ou Vue 2 ?

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

Fonctionne aussi avec

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