React

React contact form

In React, a contact form is a single component that intercepts onSubmit, sends the fields with fetch, and reflects the result in state — no API route and no server. Append your access_key to a FormData object, POST it to TruForms, and read success from the JSON response to show a confirmation.

Keep the form uncontrolled — let the DOM hold the values and read them with FormData — so you skip a useState call per input and keep re-renders minimal. The one footgun is React nulling e.currentTarget after the first await; capture the element into a local variable before awaiting, then call reset() once the request resolves.

Create your form — it's free All quickstart snippets

Copy-paste snippet

ContactForm.tsx

import { FormEvent, useState } from 'react';

export function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    setStatus('sending');
    const body = new FormData(form);
    body.append('access_key', 'YOUR_ACCESS_KEY');
    const res = await fetch('https://forms.truenotech.com/api/submit', { method: 'POST', body });
    const result = await res.json();
    setStatus(result.success ? 'sent' : 'error');
    if (result.success) form.reset();
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <input name="botcheck" type="text" style={{ display: 'none' }} />
      <button disabled={status === 'sending'}>
        {status === 'sent' ? 'Thanks!' : 'Send'}
      </button>
    </form>
  );
}

Replace YOUR_ACCESS_KEY with your form's access key from the dashboard. The access key is public — it only identifies the form.

How it works

1
Create a form in the TruForms dashboard and copy its access key.
2
Drop the component in and replace YOUR_ACCESS_KEY.
3
Capture the form ref before the await, then call form.reset() on success.

Notes for React

Capture the form element before the first `await` (`const form = e.currentTarget`). React sets `e.currentTarget` to null after an await, so a later `form.reset()` would throw.
Check `result.success` (not just `res.ok`) before showing a confirmation — TruForms returns a JSON body either way.
The access key is public and only identifies the form; never put session cookies or secret keys in client code.

Other frameworks

HTML Next.js Astro Vue