← Cloudflare Pages / pages / functions / plugins

Статические формы

Static Forms Pages Plugin перехватывает все отправки форм, содержащих data-static-form-name атрибут установлен. Это позволяет обрабатывать такие отправки формы, например сохраняя их в KV.

Установка

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

Использование

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>

Плагин принимает один аргумент: объект с respondWith свойство. Эта функция принимает объект с formData свойство (FormData ↗ экземпляр) и name свойство (значение name вашего data-static-form-name атрибут). Он должен возвращать Response или Promise для Response. Именно в этом respondWith функция, с помощью которой можно выполнять такие действия, как сериализация formData и сохранения его в пространстве имён KV.

method и action атрибуты HTML-формы задавать не нужно. Plugin автоматически переопределит их, чтобы иметь возможность перехватывать отправку.