integrations · 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
the prompt
Replace the placeholder with your mailcontact form link and send the whole text as one message. Lovable keeps the design of your form, loads the hosted script and points the form at your inbox. Free forms keep a visible “Processed by mailcontact.app” link; Pro and Plus do not need it.
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.Prefer to paste the HTML yourself? The snippet below is what the prompt asks Lovable to produce. Replace the form link with yours.
recommended setup
Add this HTML to your site, or use the form builder. Replace the form link with yours. The hosted script injects the hidden check, handles sending and automatic verification, and preserves the draft on errors. You control the HTML and CSS. Free forms display a visible “Processed by mailcontact.app” link; Pro and Plus do not. Feedback follows the browser’s language; set data-mailcontact-language="fr" on the form to force French.
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="en" data-mailcontact-language="en">
<input type="hidden" name="_language" value="en" />
<fieldset>
<legend>Contact us</legend>
<label>
Name (optional)
<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>Website
<input name="company_website" type="text" tabindex="-1" autocomplete="off" />
</label>
</div>
</noscript>
<button type="submit">Send 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>For a component with its own submit handler, load the same script and use MailContact.prepare(form) and MailContact.send() instead of the automatic marker. See the custom interface reference for loading, feedback and Free attribution.
how it works
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.
why 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.
related
Forms and a real email address, together, with notifications where you live. Start with a free account.
Create your free formNo credit card needed. Free includes one project and 50 form messages per month.