integrations · 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
the prompt
Replace the placeholder with your mailcontact form link and send the whole text as one message. Cursor 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 Cursor 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 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.
why 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.
faq
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.
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.