Skip to content

Static Forms

Last updated View as Markdown Agent setup

The Static Forms Pages Plugin intercepts all form submissions made which have the data-static-form-name attribute set. This allows you to take action on these form submissions by, for example, saving the submission to KV.

Installation

npm i @cloudflare/pages-plugin-static-forms

Usage

import staticFormsPlugin from "@cloudflare/pages-plugin-static-forms";

export const onRequest: PagesFunction = staticFormsPlugin({
	respondWith: ({ formData, name }) => {
		const email = formData.get("email");
		return new Response(
			`Hello, ${email}! Thank you for submitting the ${name} form.`,
		);
	},
});
<body>
	<h1>Sales enquiry</h1>
	<form data-static-form-name="sales">
		<label>Email address <input type="email" name="email" /></label>
		<label>Message <textarea name="message"></textarea></label>
		<button type="submit">Submit</button>
	</form>
</body>

The Plugin takes a single argument, an object with a respondWith property. This function takes an object with a formData property (the FormData ↗ instance) and name property (the name value of your data-static-form-name attribute). It should return a Response or Promise of a Response. It is in this respondWith function that you can take action such as serializing the formData and saving it to a KV namespace.

The method and action attributes of the HTML form do not need to be set. The Plugin will automatically override them to allow it to intercept the submission.

Was this helpful?