Add a contact form to a React / Vite site without a backend

A React component can render a normal HTML form. Point the form's action at a Lamofel endpoint and the browser posts the form straight to Lamofel -- the example below has no server code and no API key in it.

1. Generate the form. Use the free contact form generator at lamofel.com/tools: pick the fields, and it gives you ready-to-paste HTML. No account is needed to generate a form.
2. Turn the HTML into JSX. React's JSX needs tags explicitly closed (<input> becomes <input />), and many attributes are camelCase: the label's for becomes htmlFor, tabindex becomes tabIndex, autocomplete becomes autoComplete. Put the result in a component, for example src/ContactForm.jsx. Example (the generator's name, email and message form, with the placeholder CLAIM_YOUR_ENDPOINT in the action until you claim an endpoint):

export default function ContactForm() {
  return (
    <form action="https://lamofel.com/f/CLAIM_YOUR_ENDPOINT" method="POST">
      <label htmlFor="field-name">Name</label>
      <input id="field-name" type="text" name="name" required />
      <label htmlFor="field-email">Email</label>
      <input id="field-email" type="email" name="email" required />
      <label htmlFor="field-message">Message</label>
      <textarea id="field-message" name="message" rows={5} required />
      <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" hidden />
      <button type="submit">Send message</button>
    </form>
  );
}

React's documentation says that when a URL is passed to a form's action, the form behaves like the HTML form component.

Keep the hidden _gotcha field: it is the spam trap. A filled-in _gotcha field marks the post as spam.

3. Claim your endpoint. On the generator's result page, enter the email address where submissions should arrive and press "Claim my endpoint". Your account, the form and the live endpoint are created right away; the claim result gives you the form HTML with your real endpoint in the form action -- put that endpoint in place of CLAIM_YOUR_ENDPOINT in your component. Delivery starts after you confirm that address from the email Lamofel sends you; submissions sent before you confirm are stored but not emailed. The confirmation link works for 7 days (see lamofel.com/privacy). Then set an allowed domain so only posts from your own site are accepted.
4. Render <ContactForm /> in your app and deploy your site the way you normally do. (Starting a new Vite project? Vite's getting-started guide scaffolds one with npm create vite@latest and lists react as a template.)
5. Send a test submission from the live page and check that it arrives in your confirmed inbox.

Limits

• Submissions are stored for 30 days, then deleted.
• The Free plan includes 100 messages a month and a "Powered by" footer on the thanks page.
• Paid plans (Starter and Pro) are available on lamofel.com/plans.
• Support is by email, with a reply within 2 business days (India time, Monday to Friday).

Generate a free form · See plans