← Cloudflare Pages / pages / functions / plugins

Statické formuláře

Static Forms Pages Plugin zachytává všechna odeslání formulářů, která obsahují data-static-form-name atribut nastaven. Díky tomu můžete s těmito odeslanými formuláři dále pracovat, například uložit odeslání do KV.

Instalace

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

Použití

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>

Plugin přijímá jediný argument, objekt s respondWith vlastnost. Tato funkce přijímá objekt s formData vlastnost (FormData ↗ instanci) a name vlastnost (hodnota name vašeho data-static-form-name atribut). Měla by vracet Response nebo Promise z Response. Právě v tomto respondWith funkce, díky které můžete provádět akce, jako je serializace formData a jeho uložení do jmenného prostoru KV.

method a action atributy formuláře HTML nemusíte nastavovat. Plugin je automaticky přepíše, aby mohl odeslání zachytit.