intégrations · AI builder
Paste the prompt below into your Lovable project chat in Build mode, with your mailcontact form link in place of the placeholder, and Lovable rewrites your contact form so that it sends messages to your inbox without a backend, a Supabase edge function or an email API key.
Lovable generates a React, TypeScript and Vite app, which means the form it designed for you is a component, not a plain HTML file. That is fine: the prompt asks Lovable to keep its design, load the hosted mailcontact script and point the form at your link. You review the diff in the Changes tab, accept it, send a test message from the preview, and the message appears in your project inbox with an email alert.
Free covers one form and 50 messages a month, enough for a landing page on a lovable.app subdomain. Pro (€9/month) adds a [email protected] address to put in the app footer, replies from that address, and Slack or Discord notifications, with one inbox per Lovable project.
Step-by-step guide: add a contact form with a website builder
le prompt
Remplacez l’espace réservé par le lien de votre formulaire mailcontact et envoyez tout le texte en un seul message. Lovable conserve le design de votre formulaire, charge le script hébergé et relie le formulaire à votre boîte. Les formulaires Free gardent un lien « Processed by mailcontact.app » visible ; Pro et Plus n’en ont pas besoin.
Connect my website’s contact form to MailContact.
My MailContact form link: [PASTE YOUR FORM LINK]
Keep the form’s design and send its messages to this link without leaving the page.
Use MailContact’s hosted /forms/v1.js script from the form link’s origin, loaded once with defer. Add data-mailcontact-form to the form and use the link as its action with method POST, plus a data-contact-status element for feedback. The script injects the hidden check and handles sending and automatic spam verification.
Keep the visible, readable and clickable Processed by mailcontact.app link required on Free. Pro and Plus do not require attribution. For a custom submit handler, omit the automatic marker and use MailContact.prepare(form) before interaction, then MailContact.send() with your own feedback and attribution element.
Show a confirmation only when the message has been received. If sending fails, show an error and keep the visitor’s message so they can retry.
Use the script’s browser-language feedback. To force a supported language on an automatic form, set data-mailcontact-language, for example fr. In a custom handler, pass language to MailContact.send() and use MailContact.getMessages(language) for translated states; error codes stay unchanged.
Follow https://mailcontact.app/docs/form-endpoint for the connection details.Vous préférez coller le HTML vous-même ? L’extrait ci-dessous est ce que le prompt demande à Lovable de produire. Remplacez le lien du formulaire par le vôtre.
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.
fonctionnement
Create a free mailcontact account, name the project after your Lovable app and copy the form link from the inbox settings. A second Lovable app gets a second inbox, not a second account.
Open the Lovable project, make sure the chat is in Build mode (not Chat or Plan), paste the prompt and replace the placeholder with your link. Type @ to reference the component that holds your form if Lovable has trouble finding it. Lovable applies the change and shows a diff under Changes.
Send a message to yourself from the preview on the right. When it shows up in your mailcontact inbox, click Publish in the top-right corner. Visitors only see the version you published, so the connected form goes live with Publish changes, not with the accepted diff.
pourquoi mailcontact
Lovable can wire a form to Supabase or an email provider, but that means a database table, an edge function and a secret key to manage. The mailcontact script posts straight from the browser to your form link, with spam verification and confirmations included, so the generated app stays a frontend.
The Code tab is read-only on Lovable Free, which rules out pasting HTML by hand. The prompt goes through the project chat, which every plan has, so the form goes live without upgrading Lovable.
Remixing a Lovable project copies the form, including your form link, so a client's messages would land in your inbox. Create a new mailcontact project for the remix and prompt it with the new link. Invite the client to that inbox alone, without adding them to your Lovable workspace.
FAQ
In the project chat, the panel where you already describe changes to your app. Leave the mode on Build, which is the default and applies changes directly; Chat mode only discusses, and Plan mode writes a plan you have to approve first. Paste the whole prompt as one message, with your form link replacing the bracketed placeholder, and send it. If the form lives in a component Lovable does not pick up, type @ and select the file to attach it to the message.
On paid plans, yes. The Code tab in the project toolbar opens an editor where you click into a file such as src/components/ContactForm.tsx, make the change and save with Cmd+S; each save becomes a version. On the Free plan the editor is read-only and shows an Upgrade label, so the prompt is the way to go. Either route ends with the same result: a form element with your link as its action and the hosted mailcontact script loaded once.
Yes. The script looks for a form element with the data-mailcontact-form attribute once the page has loaded, and a React component renders a normal form element in the end. The prompt tells Lovable to keep the design it already made and to add the attribute, the action and the status element. If Lovable wrote its own submit handler with fetch, the prompt also covers that case with MailContact.prepare and MailContact.send.
Use the preview pane on the right of the editor: fill in the form with your own email and a short test message, then open your mailcontact inbox. Once the message arrives, click Publish (top right, next to Share). Later edits do not go live on their own: a dot on the Publish button means you still need to click Publish changes. Publishing from the dialog is free; asking Lovable to publish in the chat spends credits.
On Free, yes. If Lovable hides the Processed by mailcontact.app link to tidy the design, the script refuses to send. Ask Lovable to style it like the other footer links instead. On Pro and Plus the attribution is not required, so you can ask Lovable to remove it.
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.