integrazioni · AI builder

Add a contact form to your site in Cursor, with one prompt and no backend.

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

il prompt

Incolla questo prompt in Cursor.

Sostituisci il segnaposto con il link del tuo modulo mailcontact e invia tutto il testo in un solo messaggio. Cursor 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.

Prompt for Cursor
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 Cursor di produrre. Sostituisci il link del modulo con il tuo.

configurazione consigliata

Usa lo script MailContact con il tuo design.

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.

contact.html
<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

Tre passaggi dall’inizio alla fine.

01

Copy the form link

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.

02

Hand the prompt to the Agent

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.

03

Run it locally, then deploy

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.

perché mailcontact

Pensato per funzionare con Cursor.

No API route to write

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.

A diff you can read

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.

Same inbox from any stack

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.

FAQ

Cursor + mailcontact: le risposte

Where do I paste the prompt in Cursor?

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.

Can I make the change by hand instead of using the Agent?

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.

How do I test the form from Cursor?

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.

I build a lot of sites in Cursor. Can I save the instructions as a rule?

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.

Does the generated code depend on Cursor or on a framework?

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.

correlati

Funziona anche con

Una casella per ogni progetto Cursor che pubblichi.

Moduli e un vero indirizzo email insieme, con notifiche dove lavori. Inizia con un account gratuito.

Crea un modulo gratis

Non serve la carta di credito. Free include un progetto e 50 messaggi dal modulo al mese.