integrations · AI builder
Type the prompt below into the Bolt chatbox with your mailcontact form link, and Bolt edits the form it generated so that submissions reach your inbox, whether the project is a Vite and React app, a Vue or Svelte one, or plain HTML, CSS and JavaScript.
Bolt runs your whole project in a browser container, so the usual fix for a dead contact form (a Node server or a serverless function) is awkward to test and gone the moment you export. The mailcontact script needs neither: it posts from the visitor's browser to your form link, handles spam verification and shows a confirmation. Bolt only has to add two attributes and one script tag.
Free covers one form and 50 messages a month with email alerts, enough for a prototype on a .bolt.host domain. Pro (€9/month) adds a [email protected] address for the footer, replies from that address, and Slack or Discord notifications. Publish to bolt.host or Netlify and the form keeps working, because nothing about it depends on where the site is hosted.
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. Bolt 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 Bolt 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
Sign up for mailcontact, create a project named after the Bolt app and copy its form link. It goes into the chatbox with the prompt, not into a .env file in the project.
Paste the prompt in the chatbox, swap the placeholder for your link and send it. To keep Bolt from touching anything else, open Code view with the <> icon, right-click the file that contains the form and choose Target file first. Bolt rebuilds and the preview reloads.
In Preview, fill in the form with your own email and check the mailcontact inbox. Then click Publish: Bolt hosting on a .bolt.host domain is the default on Free and Pro, with Netlify available under Domains & Hosting in the project settings.
why mailcontact
A form that needs an Express route or an email provider SDK only works while Bolt's container is running, and it breaks on export. The mailcontact script talks to your form link directly, so the form works in Preview, on bolt.host and on any static host you move to.
Once connected, the form never needs another prompt. If you want to tweak the markup later, Code view edits are free of tokens: open the file, change it, press Cmd+S, and Bolt rebuilds. Prompting Bolt to publish costs tokens; clicking Publish does not.
Duplicating a Bolt project for a second client copies the form link with it, so both sites would feed one inbox. Create a new mailcontact project for the copy and run the prompt again with its link. On Pro, each project also gets its own email address.
faq
In the chatbox at the bottom of the chat panel, the same place you typed your first prompt. Paste the whole text as a single message, replace the bracketed placeholder with your form link and send it. Make sure the Plan button in the bottom-right corner of the chatbox is not active (it turns blue when it is), otherwise Bolt only writes a plan and you have to click Implement this plan afterwards. If you want Bolt to improve the wording for your specific project, the plus icon in the bottom-left corner offers Enhance prompt.
Bolt supports projects without a framework. If your site is an index.html with a style.css, the prompt makes Bolt add the data-mailcontact-form attribute and the action to your existing form element, plus one deferred script tag in the head. You can verify the result in Code view: click the <> icon at the top center, open index.html in the Files list and look for the script tag. In a Vite and React project the same change lands in a component file such as src/components/Contact.tsx.
Yes, and it costs no tokens. Open Code view, select the file in the Files list, paste the form from the mailcontact form builder where the old one was, then click Save or press Cmd+S. Bolt rebuilds the project and you switch back to Preview to see it. Code view is read-only in Safari and on mobile, so use a desktop browser such as Chrome for this.
Use Target file. In Code view, right-click the file holding the form and choose Target file: Bolt then limits its edits to that file for the next prompt. Lock file does the opposite and protects a file from being changed. Both are right-click options in the Files list. Copy relative path, from the same menu, gives you a path like src/App.tsx to mention in the prompt.
Yes. The form posts from the browser to your mailcontact link, so it does not depend on Bolt's container, on bolt.host or on Netlify. Download the project, push it to GitHub or deploy it to Vercel: as long as the script tag and the form attributes are in the HTML, submissions keep arriving in the same inbox. CORS is open on the endpoint, so a new domain needs no configuration on the mailcontact side.
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.