React forms
Use controlled or native inputs and post to Formward without adding an API route or SDK. Browse 46 templates that generate clean React code pointing to your Formward endpoint.
Implementation notes
- Paste the component into your app
- Replace the endpoint placeholder
- Add success and error UI for your design system
A working React contact form
This server-rendered example is generated specifically for React. Replace the endpoint placeholder with your public Formward form ID; it is not a secret.
Best for
React applications that need component-level loading, success and validation states without maintaining a backend route.
Watch for
Avoid mixing controlled and uncontrolled inputs, and announce asynchronous submission results to assistive technology.
import { useState } from "react";
export function SimpleContactForm() {
const [sent, setSent] = useState(false);
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const form = e.currentTarget;
const res = await fetch("https://forms.formward.eu/f/your-form-id", {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(form),
});
if (res.ok) {
setSent(true);
form.reset();
}
}
if (sent) return <p>Thanks! Your message has been sent.</p>;
return (
<form onSubmit={onSubmit}>
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" required />
<label htmlFor="email">Email</label>
<input type="email" name="email" id="email" required />
<label htmlFor="message">Message</label>
<textarea name="message" id="message" required />
<input
type="text"
name="_gotcha"
tabIndex={-1}
autoComplete="off"
style={{ position: "absolute", left: "-9999px" }}
aria-hidden="true"
/>
<button type="submit">Send</button>
</form>
);
}
Application forms
6Simple job application
A short job application capturing the essentials.
View React code →Rental application
Collect applicant details for a rental property.
View React code →Job application
Standard job application with role and resume details.
View React code →Vendor application
Onboard a new vendor or supplier.
View React code →Employment application
Formal employment application with availability.
View React code →Tenant application
Screen prospective tenants for a unit.
View React code →Contact forms
6Simple contact
A minimal contact form with name, email and message.
View React code →Contact me
Personal contact form for freelancers and creators.
View React code →Contact us
General contact form for a company or team.
View React code →Inquiry
Capture a general inquiry or question.
View React code →Contact sales
Route qualified leads to your sales team.
View React code →Media inquiry
Press and media contact form with deadlines.
View React code →Donation forms
3Feedback forms
9Customer satisfaction survey
Measure customer satisfaction (CSAT).
View React code →Documentation feedback
Collect feedback on docs and help articles.
View React code →NPS survey
Net Promoter Score survey with a 0-10 rating.
View React code →Complaint form
Let customers file a formal complaint.
View React code →Client feedback form
Gather feedback from clients after a project.
View React code →Anonymous feedback
Collect candid feedback without identifying details.
View React code →Event feedback
Get attendee feedback after an event.
View React code →Course evaluation
Evaluate a course and its instructor.
View React code →Open house feedback
Capture visitor impressions after an open house.
View React code →Order forms
5Bakery order
Take custom bakery and cake orders.
View React code →Catering order
Request catering for an event.
View React code →T-shirt order
Order custom or branded t-shirts.
View React code →Change order
Request changes to an existing project or contract.
View React code →Product order
Generic product order form.
View React code →Registration forms
5Event registration
Register attendees for an event.
View React code →Course enrollment
Enroll students into a course.
View React code →Contest entry
Collect entries for a contest or giveaway.
View React code →Webinar registration
Sign up attendees for a webinar.
View React code →Warranty registration
Register a product for warranty coverage.
View React code →Request forms
9RMA request
Return merchandise authorization request.
View React code →Change request
Submit a change request for review.
View React code →Maintenance request
Report a maintenance or repair issue.
View React code →Purchase request
Request approval to purchase goods or services.
View React code →Creative request
Brief the creative team on a new request.
View React code →Refund request
Request a refund for an order.
View React code →Payment request
Request a payment or invoice settlement.
View React code →Shipping request
Request shipment of an order or item.
View React code →Support request
Open a support ticket.
View React code →