Integrationen · 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
der Prompt
Ersetze den Platzhalter durch den Link deines mailcontact-Formulars und sende den gesamten Text als eine Nachricht. Lovable behält das Design deines Formulars bei, lädt das gehostete Skript und verbindet das Formular mit deinem Postfach. Free-Formulare behalten einen sichtbaren Link „Processed by mailcontact.app“; Pro und Plus brauchen ihn nicht.
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.Möchtest du das HTML lieber selbst einfügen? Der Ausschnitt unten ist das, was der Prompt Lovable erzeugen lassen soll. Ersetze den Formular-Link durch deinen.
empfohlene Einrichtung
Füge dieses HTML auf deiner Website ein oder verwende den Formulargenerator. Ersetze den Formularlink durch deinen. Das gehostete Skript fügt die verborgene Prüfung ein, übernimmt Versand und Verifizierung und bewahrt Entwürfe bei Fehlern. Du bestimmst HTML und CSS. Free-Formulare zeigen einen sichtbaren Link „Processed by mailcontact.app“, Pro und Plus nicht. Die Rückmeldung folgt der Browsersprache. Setze data-mailcontact-language="fr" am Formular, um Französisch festzulegen.
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="de" data-mailcontact-language="de">
<input type="hidden" name="_language" value="de" />
<fieldset>
<legend>Kontaktiere uns</legend>
<label>
Name (optional)
<input name="name" type="text" autocomplete="name" maxlength="200" />
</label>
<label>
E-Mail
<input name="email" type="email" autocomplete="email" maxlength="320" required />
</label>
<label>
Nachricht
<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>Website
<input name="company_website" type="text" tabindex="-1" autocomplete="off" />
</label>
</div>
</noscript>
<button type="submit">Nachricht senden</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>Für Komponenten mit eigenem Submit-Handler lade dasselbe Skript und nutze MailContact.prepare(form) und MailContact.send() statt der automatischen Markierung. Siehe die Referenz für eigene Oberflächen für Laden, Rückmeldungen und Quellenhinweis bei Free.
so funktioniert es
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.
warum 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.
verwandt
Formulare und echte E-Mail-Adresse vereint, mit Benachrichtigungen in deinen Tools. Starte mit einem kostenlosen Konto.
Kostenloses Formular erstellenKeine Kreditkarte nötig. Free umfasst ein Projekt und 50 Formularnachrichten pro Monat.