Why Remix forms work without JavaScript - See It in Action

Why Remix Forms Work Without JavaScript

📖 Scenario: You are building a simple contact form on a website using Remix. You want the form to work even if the user has JavaScript turned off in their browser.

🎯 Goal: Build a Remix form that submits data to the server and displays a thank you message without relying on JavaScript.

📋 What You'll Learn

Create a form using Remix's Form component

Add input fields for name and email

Handle form submission on the server with an action function

Display a thank you message after successful submission without JavaScript

💡 Why This Matters

🌍 Real World

Forms are essential on websites for collecting user input like contact info or feedback. Remix forms work even if users disable JavaScript, ensuring accessibility and reliability.

💼 Career

Understanding how Remix handles forms without JavaScript is important for building robust web applications that work for all users and improve SEO and accessibility.

1

Set up the initial Remix form

Create a Remix Form component with method="post". Inside the form, add two input fields: one with name="name" and placeholder "Your Name", and another with name="email" and placeholder "Your Email". Also add a submit button with the text "Send".

Remix

  {/* Your code here */}

Hint

Use the Form component from @remix-run/react with method post. Add two inputs and a submit button inside.

2

Add server-side action to handle form data

Create an action function that receives the form data. Use request.formData() to get the name and email values. Return a JSON response with a message property set to `Thank you, ${name}!`.

Remix

import { json } from "@remix-run/node";

export async function action({ request }) {
  // Your code here
}

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

export default function ContactForm() {
  return (
    
      
      
      Send
    
  );
}

Hint

Use request.formData() to get form values and return a JSON response with a thank you message.

3

Display the thank you message after submission

Use the useActionData hook to get the data returned from the action function. If data exists, display the data.message inside a <p> tag above the form.

Remix

export default function ContactForm() {
  const data = useActionData();
  // Your code here
  return (
    
      
      
      Send
    
  );
}

Hint

Use useActionData() to get the server response and conditionally render the message above the form.

4

Explain why the form works without JavaScript

Add a comment at the top of the file explaining that Remix forms work without JavaScript because the form submits directly to the server and the server returns a new HTML response that updates the page.

Remix

// Your explanation here
import { json } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";

export async function action({ request }) {
  const formData = await request.formData();
  const name = formData.get("name");
  const email = formData.get("email");
  return json({ message: `Thank you, ${name}!` });
}

export default function ContactForm() {
  const data = useActionData();
  return (
    
      {data && {data.message}}
      
        
        
        Send
      
    
  );
}

Hint

Add a comment at the top explaining the server handles the form submission and returns new HTML, so JavaScript is not required.