integraciones · AI builder
Open the Agent pane in Cursor with Cmd+I, paste the prompt below with your mailcontact form link, and the Agent edits the contact form in your project so that it posts to your inbox, in whatever stack you are using, without adding an API route or an email provider.
Cursor differs from Lovable or Bolt in one way that matters here: the files are on your machine and you deploy them yourself. The mailcontact script fits that workflow because it is a single deferred script tag plus two attributes on the form. There is no secret to put in an env file, nothing to run on the server and nothing that breaks when you push to Vercel, Netlify or GitHub Pages. You can review the diff line by line before you accept it.
Free covers one form and 50 messages a month with email alerts. Pro (€9/month) adds a [email protected] address for the footer, replies from that address, and Slack or Discord notifications. A freelancer with several client repositories open in Cursor keeps one inbox per site and shares each with its client only.
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. Cursor 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 Cursor 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 mailcontact project for the site and copy its form link from the inbox settings. Keep it in the prompt, not in an env file: it is a public endpoint, like a mailto address, and the spam checks happen on our side.
Press Cmd+I to open Agent, paste the prompt with your link, and send. For a precise edit, select the form markup first and press Cmd+L: the Agent opens with those lines referenced. Review the diff, reject anything you do not want, or click Restore Checkpoint to undo.
Start your dev server from the integrated terminal and submit the form with your own email, or let the Agent open the page in Cursor's browser pane and do it. Once the message is in your inbox, commit and deploy the way you already do.
por qué mailcontact
Ask the Agent for a contact form with no further detail and it writes an API route, installs an email SDK and asks you for a key in .env.local. That is a backend to deploy and keep alive. The prompt steers it to the mailcontact script instead, which posts from the visitor's browser to your link: a static site stays static and a framework site gains no route.
The change is small enough to review: one script tag, data-mailcontact-form and an action on the form, a status element for feedback. Nothing is hidden behind a dependency, which also means no package to update and no bundle size to pay for.
Cursor opens whatever repository you give it: Next.js today, Astro next month, a plain index.html for a quick landing. The prompt is the same in all of them and so is the form link, so the inbox does not change when the stack does.
preguntas frecuentes
In the Agent pane, which opens with Cmd+I (Ctrl+I on Windows and Linux). Paste the prompt as one message with your form link in place of the placeholder and send it. Leave the mode on Agent: Shift+Tab cycles to Plan mode, which only drafts a plan for you to approve first. If the Agent cannot find the form, mention the file with @, for example @src/components/ContactForm.tsx, or select the form markup in the editor and press Cmd+L to send those lines along with the prompt.
Of course: it is your editor. Add one script tag with defer to the page or layout, give the form the data-mailcontact-form attribute and set its action to your form link with method POST, then add an element with data-contact-status for feedback. The form builder on this site generates that markup for you to paste. The Agent route is only faster when the form is spread across components, because it tracks down where the markup lives.
Run your dev server in the integrated terminal and open the page, or ask the Agent to open it in Cursor's browser pane: the Agent can navigate, fill in fields, click and read console output, and browser tools ask for your approval by default. Submit the form with your own email and a short message, then check your mailcontact inbox. Localhost is fine: CORS is open on the endpoint, so you do not need to deploy to test.
Yes. Put the prompt in an AGENTS.md at the project root, or create a project rule under .cursor/rules as a .mdc file (Customize, Rules, Add Rule, or type /create-rule in the Agent chat). Set it to Apply Intelligently with a description such as contact forms, and the Agent pulls it in whenever a form comes up. Keep the form link out of the rule if the rule is shared across projects, since each site has its own link.
No. The result is standard HTML: a form element, a script tag and a couple of data attributes. It works in a Next.js or Astro component, in a SvelteKit page and in a plain index.html alike, and it keeps working if you later open the project in another editor. The only piece that is specific to your site is the form link.
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.