Add a Contact Form to Your Remix Site

Remix encourages form submissions through route actions, but for a contact form that sends to an external service, you can skip the action entirely. staticq handles the submission — no loader, no action function needed.

Code example

Create a route at app/routes/contact.tsx:

import type { MetaFunction } from '@remix-run/node';

export const meta: MetaFunction = () => {
  return [{ title: 'Contact Us' }];
};

export default function Contact() {
  return (
    <main>
      <h1>Contact Us</h1>

      <form action="https://api.staticq.app/q/your-form-slug" method="POST">
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" required />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" required />

        <label htmlFor="message">Message</label>
        <textarea id="message" name="message" required></textarea>

        <button type="submit">Send Message</button>
      </form>
    </main>
  );
}

Because the form action points to an external URL, Remix won’t intercept it. The browser submits directly to staticq.

Setup steps

1. Create a form in the staticq dashboard. Name it and set your notification email.
2. Copy the endpoint — it looks like https://api.staticq.app/q/your-form-slug.
3. Set the form action to your endpoint URL in the route component.
4. Run and test. Start your dev server with npm run dev, submit the form, and confirm the submission appears in your dashboard.

Get started

staticq is free to start with — no credit card required. Create your first form and have submissions flowing in minutes. See pricing for plan details.