integrazioni · 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
il prompt
Sostituisci il segnaposto con il link del tuo modulo mailcontact e invia tutto il testo in un solo messaggio. Lovable mantiene il design del modulo, carica lo script ospitato e collega il modulo alla tua casella. I moduli Free mantengono un link visibile «Processed by mailcontact.app»; Pro e Plus non ne hanno bisogno.
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.Preferisci incollare l’HTML da solo? Lo snippet qui sotto è ciò che il prompt chiede a Lovable di produrre. Sostituisci il link del modulo con il tuo.
configurazione consigliata
Aggiungi questo HTML al sito oppure usa generatore di moduli. Sostituisci il link del modulo con il tuo. Lo script ospitato inserisce il controllo nascosto, gestisce invio e verifica automatica e conserva la bozza in caso di errore. Tu controlli HTML e CSS. I moduli Free mostrano un link visibile “Processed by mailcontact.app”; Pro e Plus no. I messaggi seguono la lingua del browser; imposta data-mailcontact-language="fr" sul modulo per impostare il francese.
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="it" data-mailcontact-language="it">
<input type="hidden" name="_language" value="it" />
<fieldset>
<legend>Contattaci</legend>
<label>
Nome (facoltativo)
<input name="name" type="text" autocomplete="name" maxlength="200" />
</label>
<label>
Email
<input name="email" type="email" autocomplete="email" maxlength="320" required />
</label>
<label>
Messaggio
<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>Sito web
<input name="company_website" type="text" tabindex="-1" autocomplete="off" />
</label>
</div>
</noscript>
<button type="submit">Invia messaggio</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>Per un componente con un proprio gestore di invio, carica lo stesso script e usa MailContact.prepare(form) e MailContact.send() al posto del marcatore automatico. Consulta riferimento per interfacce personalizzate per caricamento, messaggi e attribuzione Free.
come funziona
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.
perché 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.
correlati
Moduli e un vero indirizzo email insieme, con notifiche dove lavori. Inizia con un account gratuito.
Crea un modulo gratisNon serve la carta di credito. Free include un progetto e 50 messaggi dal modulo al mese.