React contact form without a backend

The component sends the form data to Mailiy as JSON and shows the answer. It uses only fetch() and useState, so there's nothing to install.

How to set it up

1. Create a free account, add your website and copy the form's key.
2. Create the file below and replace YOUR_ACCESS_KEY.
3. Render <ContactForm /> where the form should appear.
4. Add labels and fields as you need. Every field with a name arrives in the email.

src/ContactForm.jsx

import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("");
  const onSubmit = async (event) => {
    event.preventDefault();
    const data = Object.fromEntries(new FormData(event.currentTarget));
    const res = await fetch("https://mailiy.com/api/submit", {
      method: "POST",
      headers: { "content-type": "application/json", accept: "application/json" },
      body: JSON.stringify({ ...data, access_key: "YOUR_ACCESS_KEY" }),
    });
    const result = await res.json();
    setStatus(result.success ? "Thanks!" : result.message);
  };
  return (
    <form onSubmit={onSubmit}>
      <input type="email" name="email" required />
      <textarea name="message" required />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} />
      <button>Send</button>
      <p role="status">{status}</p>
    </form>
  );
}

What to know about React

• The key may sit in your frontend code. It only allows sending to this form. Set the allowed domains in the dashboard.
• result.success tells you whether the submission arrived; otherwise result.message holds the reason.

Fields Mailiy understands

Every named field appears in the email and in the dashboard. Mailiy reads a few names itself and uses them to shape the mail and what happens after sending:

Sending files

With a file input, your React form accepts attachments too, up to five files with 10 MB in total. PDF, images, text and office files are allowed. Mailiy checks that each file's content matches its extension and refuses anything else.

The component above sends JSON, which has no room for files. For uploads, pass the FormData object to fetch() as the body and leave out the Content-Type header; the browser sets it itself.

If no email arrives

Mailiy answers every submission with a message. Usually it comes down to one of these:

• Wrong key. The answer says “Invalid access key”. Copy the key from the dashboard again, without spaces before or after it.
• Domain not allowed. If you listed allowed domains in the dashboard, Mailiy only accepts submissions from them. Subdomains count too. To test on a preview address, add it for the time being.
• Field without a name. The browser leaves out any input without a name attribute. It is then missing from the email, and no error shows up.
• Too many tests in a row. Mailiy accepts five submissions a minute per form and visitor. After that you get “Too many submissions”, and after a short wait it works again.
• Mail in the spam folder. Check the spam folder first and mark the first mail as not spam. If the submission shows up in the dashboard, Mailiy received it.
• New recipient gets nothing. Additional recipients only get mail once they confirm their address with the link in the confirmation email.

After sending

Every submission lands in the dashboard, where you can search them and export them to CSV. In the form settings you can also set up an automatic reply that goes to the address in the email field, such as “Thanks, we'll get back to you within two days”.

If your team should see messages in chat too, Mailiy also posts them to Slack, Discord or Telegram. For your own workflows, webhooks send each submission as JSON to an address you choose.

Spam and privacy

The invisible botcheck field is a trap for bots. If they tick it, Mailiy drops the submission without storing or sending it. You can add more filters and a captcha in the dashboard.

Mailiy runs on servers in Germany and sets no trackers. What else a GDPR compliant form needs is covered in the GDPR checklist.

Frequently asked questions

Does this work with Vite, Remix or Gatsby?

Yes. The component only needs React and the browser. It runs anywhere React renders in the browser, whatever the build tool.

Do I need my own server for a contact form in React?

No. The form posts to Mailiy, and Mailiy sends the email. You need no PHP, no SMTP credentials and no server code.

Is it fine for the key to appear in the page source?

Yes. It only allows sending submissions to this one form and gives no access to your account. In the dashboard you choose which domains submissions are accepted from.

What does it cost?

The free plan includes 100 submissions a month for one website. Paid plans start at €9 a month.

Other platforms

• WordPress contact form without a plugin
• Receive Webflow forms by email
• Add a contact form to Framer
• HTML contact form without PHP
• Next.js contact form without an API route
• Astro contact form without a server
• Vue and Nuxt contact form without a backend

Start for free