integraciones · 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
el prompt
Sustituye el marcador por el enlace de tu formulario mailcontact y envía todo el texto en un solo mensaje. Bolt 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 Bolt 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
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.
por qué 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.
preguntas frecuentes
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.
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.