React contact form

Drop this component into any React app. It reads the form with FormData, posts it to Formclick and shows the result, with no API route or server code.

Get your free access key Jump to the code

Set it up in 3 steps

1
Get your access key
Create a free Formclick account and copy the access key for your form from the dashboard. Submissions sent with that key are delivered to your inbox.
2
Add the component
Copy ContactForm into your project and replace YOUR_ACCESS_KEY_HERE. In Next.js App Router, add "use client" at the top since it uses state.
3
Render it and test
Render <ContactForm /> on any page, submit a test message and check your inbox.

The code

Replace YOUR_ACCESS_KEY_HERE with the key from your dashboard.

ContactForm.jsx

import { useState } from 'react';

export default function ContactForm() {
  const [result, setResult] = useState('');

  async function onSubmit(e) {
    e.preventDefault();
    setResult('Sending...');

    const formData = new FormData(e.target);
    formData.append('access_key', 'YOUR_ACCESS_KEY_HERE');

    const response = await fetch(
      'https://api.formclick.io/submit',
      { method: 'POST', body: formData }
    );
    const data = await response.json();
    setResult(data.message);
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text"  name="name"    required />
      <input type="email" name="email"   required />
      <textarea           name="message" required />
      <button type="submit">Submit</button>
      <p>{result}</p>
    </form>
  );
}

Tips

Keep the access key in an environment variable such as NEXT_PUBLIC_FORMCLICK_KEY or VITE_FORMCLICK_KEY if you prefer not to hard-code it.
Call e.target.reset() after a successful submit to clear the fields.
Works with form libraries like React Hook Form. Post the values from your submit handler.

React contact form FAQ

Does it work with Next.js server components?

The form uses state, so it must be a client component. Add "use client" at the top of the file and render it from any server component.

Is it safe to ship my access key in client code?

Yes. The access key only allows submissions to be sent to your account. It cannot read your data, open your dashboard or change your settings, and you can restrict it to specific domains.

Do I need my own server or backend?

No. Formclick receives the submission, filters spam, stores it in your dashboard and emails it to you. Your app only makes one POST request.

How much does it cost?

Core features are free forever. Paid plans add higher submission limits and extras like file uploads. See the pricing page for details.

Other stacks

HTML JavaScript React Native Ionic Flutter Expo More examples →

Your React form, live in minutes

Free forever on core features. No credit card required.

Create your form