How to Handle Form Submission in Remix: Fix and Best Practices

In Remix, handle form submission by defining an action function in your route module that processes the request object and returns a response. Use the <Form> component from Remix to submit data, which automatically calls the action on the server side.

Why This Happens

Many beginners try to handle form submission in Remix by using client-side event handlers like onSubmit on a regular HTML form or React form, which does not trigger Remix's server-side action function. This causes the form data not to be processed on the server, leading to no state changes or errors.

jsx

import { Form } from '@remix-run/react';

export default function Contact() {
  function handleSubmit(event) {
    event.preventDefault();
    alert('Form submitted');
  }

  return (
    <form onSubmit={handleSubmit} method="post">
      <input type="text" name="name" />
      <button type="submit">Send</button>
    </form>
  );
}

Output

Form submits on client side only; Remix action is NOT called; no server processing happens.

The Fix

Use Remix's <Form> component instead of a plain HTML form and define an action export in your route module. The action receives the form data on the server and can process it, then return a response or redirect.

jsx

import { Form } from '@remix-run/react';
import { redirect } from '@remix-run/node';

export async function action({ request }) {
  const formData = await request.formData();
  const name = formData.get('name');
  // Process the data, e.g., save to database
  console.log('Received name:', name);
  return redirect('/thank-you');
}

export default function Contact() {
  return (
    <Form method="post">
      <input type="text" name="name" required />
      <button type="submit">Send</button>
    </Form>
  );
}

Output

Form submits to server; action logs data and redirects to /thank-you.

Prevention

Always use Remix's <Form> component for forms to ensure server-side action functions are triggered. Avoid client-only form handlers for data processing. Use method="post" or method="put" on the <Form> to match your action logic. Test your form submission by checking server logs or responses.

Enable linting rules that warn about unused event handlers or missing action exports in route files to catch mistakes early.

Related Errors

1. Form submission reloads page but action not called: Usually caused by using a plain <form> instead of Remix's <Form> component.

2. Form data missing in action: Check that the form fields have name attributes and the method matches the action expectations.

3. Redirect loops after submission: Ensure your action returns a proper redirect and the redirected route does not redirect back.

Key Takeaways

Use Remix's

component to trigger server-side action functions on form submission.

Define an async action function in your route to process form data from the request.

Avoid client-only form handlers for data processing in Remix apps.

Always include name attributes on form inputs for data to be sent.

Test form submission by checking server logs and responses to confirm action runs.