integraciones · 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
el prompt
Sustituye el marcador por el enlace de tu formulario mailcontact y envía todo el texto en un solo mensaje. Lovable conserva el diseño de tu formulario, carga el script alojado y conecta el formulario con tu bandeja. Los formularios Free mantienen un enlace visible «Processed by mailcontact.app»; Pro y Plus no lo necesitan.
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.¿Prefieres pegar el HTML tú mismo? El fragmento de abajo es lo que el prompt pide a Lovable que genere. Sustituye el enlace del formulario por el tuyo.
configuración recomendada
Añade este HTML a tu sitio o utiliza el generador de formularios. Sustituye el enlace por el de tu formulario. El script alojado inserta la comprobación oculta, gestiona el envío y la verificación automática y conserva el borrador si hay errores. Tú controlas el HTML y el CSS. Los formularios Free muestran un enlace visible «Processed by mailcontact.app»; Pro y Plus no. Los avisos siguen el idioma del navegador; configura data-mailcontact-language="fr" en el formulario para forzar el francés.
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="es" data-mailcontact-language="es">
<input type="hidden" name="_language" value="es" />
<fieldset>
<legend>Contáctanos</legend>
<label>
Nombre (opcional)
<input name="name" type="text" autocomplete="name" maxlength="200" />
</label>
<label>
Correo electrónico
<input name="email" type="email" autocomplete="email" maxlength="320" required />
</label>
<label>
Mensaje
<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>Sitio web
<input name="company_website" type="text" tabindex="-1" autocomplete="off" />
</label>
</div>
</noscript>
<button type="submit">Enviar mensaje</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>Para un componente con su propio controlador de envío, carga el mismo script y utiliza MailContact.prepare(form) y MailContact.send() en lugar del marcador automático. Consulta la referencia de interfaces personalizadas para carga, avisos y atribución de Free.
cómo funciona
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.
por qué 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.
preguntas frecuentes
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.
relacionado
Formularios y una dirección de email real, juntos, con avisos en tus herramientas. Empieza con una cuenta gratuita.
Crear formulario gratisSin tarjeta de crédito. Free incluye un proyecto y 50 mensajes de formulario al mes.