Progressive forms
Forms work without javascript!
senior engineer at second spectrum
Remember the last time you submitted a form that did nothing?
We can fix that!
What does this look like?
Before React 19 and Waku server actions, a basic form might look like this:
'use client';
const ClientForm = () => {
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
await fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(Object.fromEntries(formData)),
});
};
return (
<form onSubmit={handleSubmit}>
<input name="email" type="email" required />
<input name="password" type="password" required />
<button type="submit">Submit</button>
</form>
);
};This is just fine, but if we want to run our form in an environment with no javascript. Or we just want to optimize the form to not need to render, we can upgrade to a new way.
Introducing progressive forms with Waku Server actions
The form works without Javascript, which is helpful for making your forms interactive quicker on load. In slow network conditions, a user could load the html of the form and submit it, all before the Javascript for the page loads.
async function submitForm(formData) {
'use server';
await fetch('https://api.example.com/submit', {
method: 'POST',
body: JSON.stringify(Object.fromEntries(formData)),
});
}
const ServerForm = () => {
return (
<form action={submitForm}>
<input name="email" type="email" required />
<input name="password" type="password" required />
<button type="submit">Submit</button>
</form>
);
};We can sprinkle in some Javascript where it can be helpful. Like for client-side validation, or for showing errors from the server. The key point though, is that the form will always submit and pair with your server action regardless of whether Javascript is running or not.