integrazioni · AI builder

A working contact form in your Bolt.new project, no backend to build.

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

il prompt

Incolla questo prompt in Bolt.

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

Get a form link

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.

02

Prompt Bolt, or target the file

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.

03

Send a test, then Publish

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.

perché mailcontact

Pensato per funzionare con Bolt.

Nothing to run in the container

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.

Zero tokens to maintain

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.

An inbox per project, not per export

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

Bolt + mailcontact: le risposte

Where exactly do I put the prompt in Bolt?

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.

How does Bolt handle a plain HTML contact form?

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.

Can I paste the form code myself instead of prompting?

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.

Bolt keeps rewriting other files when I ask for a small change. How do I stop that?

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.

Will the form still work after I export the project or deploy it elsewhere?

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.

correlati

Funziona anche con

Una casella per ogni progetto Bolt 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.