Integrationen · 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

der Prompt

Füge diesen Prompt in Bolt ein.

Ersetze den Platzhalter durch den Link deines mailcontact-Formulars und sende den gesamten Text als eine Nachricht. Bolt behält das Design deines Formulars bei, lädt das gehostete Skript und verbindet das Formular mit deinem Postfach. Free-Formulare behalten einen sichtbaren Link „Processed by mailcontact.app“; Pro und Plus brauchen ihn nicht.

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.

Möchtest du das HTML lieber selbst einfügen? Der Ausschnitt unten ist das, was der Prompt Bolt erzeugen lassen soll. Ersetze den Formular-Link durch deinen.

empfohlene Einrichtung

Nutze das MailContact-Skript mit deinem eigenen Design.

Füge dieses HTML auf deiner Website ein oder verwende den Formulargenerator. Ersetze den Formularlink durch deinen. Das gehostete Skript fügt die verborgene Prüfung ein, übernimmt Versand und Verifizierung und bewahrt Entwürfe bei Fehlern. Du bestimmst HTML und CSS. Free-Formulare zeigen einen sichtbaren Link „Processed by mailcontact.app“, Pro und Plus nicht. Die Rückmeldung folgt der Browsersprache. Setze data-mailcontact-language="fr" am Formular, um Französisch festzulegen.

contact.html
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="de" data-mailcontact-language="de">
  <input type="hidden" name="_language" value="de" />
  <fieldset>
    <legend>Kontaktiere uns</legend>
    <label>
      Name (optional)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      E-Mail
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Nachricht
      <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">Nachricht senden</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>

Für Komponenten mit eigenem Submit-Handler lade dasselbe Skript und nutze MailContact.prepare(form) und MailContact.send() statt der automatischen Markierung. Siehe die Referenz für eigene Oberflächen für Laden, Rückmeldungen und Quellenhinweis bei Free.

so funktioniert es

Drei Schritte, vom Start bis zum Ziel.

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.

warum Mailcontact

Passt gut zu 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, beantwortet

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.

verwandt

Funktioniert auch mit

Ein Postfach für jedes deiner Bolt-Projekte.

Formulare und echte E-Mail-Adresse vereint, mit Benachrichtigungen in deinen Tools. Starte mit einem kostenlosen Konto.

Kostenloses Formular erstellen

Keine Kreditkarte nötig. Free umfasst ein Projekt und 50 Formularnachrichten pro Monat.