integrations · hosting platform

A contact form for your Netlify site that isn't tied to Netlify.

Netlify Forms is the obvious first option on Netlify: add data-netlify="true" to your form and submissions appear in the Netlify dashboard, free for around 100 submissions a month at the time of writing, paid after that. People look for alternatives for three reasons: the form is tied to the host and stops working the day you migrate, notifications live in a dashboard you don't check, and each site's messages are siloed in that site's project.

mailcontact is the host-independent version. Your form posts to a plain HTTPS endpoint (no build-time detection, no data-netlify attribute, no hidden form-name field), so the exact same markup works on Netlify today and on Vercel, Cloudflare Pages, or a VPS tomorrow. Each project also gets a real inbound email address like [email protected] that works immediately, with no DNS setup, and every message pings Discord, Slack, email, or a webhook.

It's deliberately lightweight: one inbox per project with notifications, not a helpdesk. No tickets, no SLAs, and nothing to reconfigure when your hosting changes.

Create an account Read the docs

recommended setup

Use the MailContact script with your own design.

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.

contact.html

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form>
  <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.

the snippet

Alternative: a direct integration for Netlify.

This example posts directly to the API. Keep the required company_website field present and empty. Native posts open JSON on success or a verification page when needed. Custom scripts without verification support send suspicious messages to Spam for review; strong spam is also held there without notifications or quota usage. A success response confirms reception, including review, or a silent discard of a filled check. See spam protection for the full behavior.

contact.html

<!-- No data-netlify attribute, no hidden form-name field -->
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="How can we help?" required></textarea>
  <button type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>

how it works

Three steps, start to finish.

Create an inbox

One inbox per project. Name it after your site and you get a form endpoint and a project email address immediately.

Point your form at it

Swap data-netlify="true" for the action URL above and deploy like any other change. No build plugin, no form detection step, no dashboard toggle.

Get notified

Add a Discord, Slack, email, or webhook channel. Delivered messages ping you where you already are, instead of waiting in a dashboard.

why mailcontact

Built to pair well with Netlify.

Zero lock-in when you move hosts

Netlify Forms depends on Netlify's build-time form detection, so migrating means rebuilding your form handling. A mailcontact form is a plain URL: move to Vercel or Cloudflare Pages and change nothing.

A real email address, not just a form

Netlify Forms only catches form posts. mailcontact also gives each project an inbound address like [email protected]. Form submissions and emails land in the same inbox.

One inbox across every host

Some projects on Netlify, others on Vercel or GitHub Pages? Each gets its own inbox in one place, instead of per-site submission lists scattered across hosting dashboards.

faq

Netlify + mailcontact, answered

Is Netlify Forms free?

Netlify Forms has a free tier of around 100 submissions per month at the time of writing, then moves to a paid add-on. If your site lives on Netlify long-term and volume is low, it's a reasonable choice. The trade-off is that your form handling is tied to your host.

What happens to my contact form if I leave Netlify?

With Netlify Forms, submissions stop the moment your site is served elsewhere, because the handling depends on Netlify's build pipeline. A mailcontact form posts to an external endpoint, so redeploying the same markup on any host keeps working unchanged.

Do I need a data-netlify attribute or hidden form-name field?

No. mailcontact identifies your form by its endpoint URL. Email and message are required content fields (name and subject are optional); the company_website check must also be present and empty, and CORS is open, so the form also works from branch deploys and deploy previews without extra setup.

How do I show a success message after submitting?

Use the hosted MailContact script, or call MailContact.send() in your own handler, to keep visitors on the page and show an inline success state. A configurable redirect for native form posts is not currently available.

One inbox for every Netlify project you ship.

Forms and a real email address, together, with notifications where you live. Start with a free account.

Create your free form

No credit card needed. Free includes one project and 50 form messages per month.