Static Forms Pages Plugin は、data-static-form-name 属性が設定されたすべてのフォーム送信を傍受します。これにより、送信内容を KV に保存するなど、フォーム送信に対して処理を実行できます。
npm i @cloudflare/pages-plugin-static-formsyarn add @cloudflare/pages-plugin-static-formspnpm add @cloudflare/pages-plugin-static-formsbun add @cloudflare/pages-plugin-static-formsimport 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>この Plugin は、respondWith プロパティを持つオブジェクトを 1 つ受け取ります。この関数は、formData プロパティ（FormData ↗ インスタンス）と name プロパティ（data-static-form-name 属性の名前）を持つオブジェクトを受け取ります。Response、または Response の Promise を返す必要があります。この respondWith 関数内で、formData をシリアライズして KV 名前空間に保存するなどの処理を実行できます。
HTML フォームの method と action 属性は設定する必要はありません。Plugin が自動で上書きし、送信を傍受できるようにします。