Premium

Contact Form (Component + HTTP)

By FrontendAtlas Team · Updated Jan 30, 2026

Build a contact form using a React component with controlled inputs and basic validation. You will only work in src/App.tsx – the HTML shell and CSS are already set up. On submit, validate the input and send the form data with a POST request to…

Work only inside src/App.tsx (the CSS in App.css and public/index.html are already…
Render a Contact Us form with fields for name, email, and message.

What you’ll build / What this tests

This premium react coding focuses on Contact Form (Component + HTTP). You’ll apply react and forms thinking with intermediate level constraints. The prompt emphasizes Build a contact form using a React component with controlled inputs and basic validation. You will….

Learning goals

Translate the prompt into a clear react API signature and return shape.
Apply react, forms, http techniques to implement contact form (component + http).
Handle intermediate edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in react.

Key decisions to discuss

Define the exact input/output contract before coding.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Work only inside src/App.tsx (the CSS in App.css and public/index.html are already wired up to the expected classes).
Render a Contact Us form with fields for name, email, and message.
Make all fields required; validate the email with a basic email check.
Disable the submit button while the form is invalid or while a request is in progress.
On a valid submit, send a POST request with the form body to https://jsonplaceholder.typicode.com/posts using fetch.
If the request succeeds, show the success text: "Your message has been sent. Thank you!".
If the request fails, show the error text: "Something went wrong. Please try again.".
Track an isSubmitting flag so the user cannot trigger multiple requests at the same time.
Initially, the submit button is disabled until all required fields are filled and the email looks valid.
If the user submits invalid data, all fields are marked as touched and inline validation error messages are…

Mini snippet (usage only)

// Example usage
const input = /* contact form (component + http) input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.