← Cloudflare Pages / pages / tutorials

Добавьте React-форму с помощью Formspree

Почти каждому сайту на React нужна форма для сбора пользовательских данных. Formspree ↗ это бэкенд-сервис для обработки и хранения данных форм, позволяющий разработчикам добавлять формы на сайт без написания серверного кода или функций.

В этом руководстве вы создадите <form> компонент на React и добавьте его в одностраничное приложение, созданное с помощью create-react-app. Хотя вы используете create-react-app (CRA). Однако описанные принципы применимы к любому фреймворку на основе React, включая Next.js, Gatsby и другие. Для сбора отправленных данных и рассылки уведомлений по электронной почте при поступлении новых заявок вы будете использовать Formspree, без необходимости писать код на стороне сервера.

Вы развернёте сайт в Cloudflare Pages. См. Руководство по началу работы чтобы ознакомиться с платформой.

Для начала создайте новый проект React на локальной машине с помощью create-react-app. Затем создайте новый репозиторий GitHub ↗, и добавьте расположение GitHub в качестве удалённого назначения:

# create new project with create-react-app
npx create-react-app new-app
# enter new directory
cd new-app
# attach git remote
git remote add origin [email protected]:<username>/<repo>.git
# change default branch name
git branch -M main

Теперь можно изменить приложение React в new-app директорию, которую вы создали.

Отправная точка для create-react-app включает простой сайт Hello World. Вы добавите форму Contact Us, принимающую имя, адрес электронной почты и сообщение. Код формы адаптирован из руководства HTML Forms. Более подробное объяснение работы HTML-форм и дополнительные учебные материалы можно найти в руководство по HTML Forms.

Сначала создайте новый компонент react с именем ContactForm.js и поместите его в src папка рядом с App.js.

project-root/
├─ package.json
└─ src/
   ├─ ContactForm.js
   ├─ App.js
   └─ ...

Далее вы создадите компонент формы с помощью вспомогательной библиотеки Formspree, @formspree/react ↗. Эта библиотека содержит useForm хук для упрощения обработки событий отправки формы и управления состоянием формы.

Установите его с помощью:

npm i @formspree/react

Затем вставьте следующий фрагмент кода в ContactForm.js файле:

import { useForm, ValidationError } from "@formspree/react";

export default function ContactForm() {
	const [state, handleSubmit] = useForm("YOUR_FORM_ID");

	if (state.succeeded) {
		return <p>Thanks for your submission!</p>;
	}

	return (
		<form method="POST" onSubmit={handleSubmit}>
			<label htmlFor="name">Full Name</label>
			<input id="name" type="text" name="name" required />
			<ValidationError prefix="Name" field="name" errors={state.errors} />

			<label htmlFor="email">Email Address</label>
			<input id="email" type="email" name="email" required />
			<ValidationError prefix="Email" field="email" errors={state.errors} />

			<label htmlFor="message">Message</label>
			<textarea id="message" name="message" required></textarea>
			<ValidationError prefix="Message" field="message" errors={state.errors} />

			<button type="submit" disabled={state.submitting}>
				Submit
			</button>
			<ValidationError errors={state.errors} />
		</form>
	);
}

В настоящее время форма содержит заполнитель YOUR_FORM_ID. Далее в этом руководстве вы замените это на собственный эндпоинт формы.

useForm хук возвращает state объект и handleSubmit функция, которую вы передаете в onSubmit атрибут формы. Вместе они дают возможность отправлять данные формы через AJAX и обновлять состояние формы в зависимости от полученного ответа.

Для наглядности в этой форме нет никакого оформления, но в проекте на GitHub (https://github.com/formspree/formspree-example-cloudflare-react ↗) вы можете посмотреть пример применения стилей к форме.

Чтобы добавить эту форму на сайт, импортируйте компонент:

import ContactForm from "./ContactForm";

Затем вставьте форму на страницу как компонент React:

<ContactForm />

Например, вы можете обновить свой src/App.js файл, чтобы добавить форму:

import ContactForm from "./ContactForm"; // <-- import the form component
import logo from "./logo.svg";
import "./App.css";

function App() {
	return (
		<div className="App">
			<header className="App-header">
				<img src={logo} className="App-logo" alt="logo" />
				<p>
					Edit <code>src/App.js</code> and save to reload.
				</p>
				<a
					className="App-link"
					href="https://reactjs.org"
					target="_blank"
					rel="noopener noreferrer"
				>
					Learn React
				</a>

				{/* your contact form component goes here */}
				<ContactForm />
			</header>
		</div>
	);
}

export default App;

Теперь у вас есть одностраничное приложение с формой обратной связи, содержащей несколько полей для заполнения пользователем. Однако вы ещё не настроили отправку формы на корректный эндпоинт. Это вы сделаете в следующий раздел.

React-форма готова, однако при её отправке пользователь получит Form not found ошибку. Чтобы её исправить, создайте новую форму Formspree и скопируйте её уникальный ID в useForm вызов.

Чтобы создать форму Formspree, зарегистрируйтесь на аккаунт на Formspree ↗. Затем создайте новую форму с + Новая форма кнопку. Назовите новую форму Contact-us form и обновите email получателя на адрес, на который должны приходить отправленные формы. И наконец, выберите Создайте форму.

Появятся инструкции о том, как интегрировать новую форму. Скопируйте у формы hashid (последние 8 буквенно-цифровых символов из URL) и вставьте его в useForm функция в ContactForm компонент, созданный выше.

Теперь в компоненте должна быть строка вида:

const [state, handleSubmit] = useForm("mqldaqwx");

/* replace the random-like string above with your own form's ID */

Теперь при отправке формы должно появиться сообщение с благодарностью. Данные формы будут отправлены в ваш аккаунт на Formspree.io ↗.

Отсюда можно изменить логику обработки формы, чтобы обновить адрес электронной почты для уведомлений ↗, или добавить такие плагины, как Google Sheets ↗, Slack ↗, и многое другое.

Дополнительную помощь по настройке Formspree см. в следующих ресурсах:

• Общую справку по Formspree см. в Сайт справки Formspree ↗.
• Дополнительную помощь по созданию форм в React см. в документация formspree-react ↗
• Советы по интеграции Formspree с популярными платформами, такими как Next.js, Gatsby и Eleventy, см. в Руководства по Formspree ↗.

Теперь можно развернуть проект.

Если вы еще этого не сделали, сохраните прогресс в git и затем отправьте коммит (или несколько коммитов) в репозиторий GitHub:

# Add all files
git add -A
# Commit w/ message
git commit -m "working example"
# Push commit(s) to remote
git push -u origin main

Теперь ваш код находится в репозитории GitHub, а значит, Pages тоже имеет к нему доступ.

Если это ваш первый проект Cloudflare Pages, ознакомьтесь с Руководство по началу работы для полного пошагового руководства. После выбора нужного репозитория GitHub необходимо настроить проект со следующими параметрами сборки:

• Название проекта : На ваш выбор
• Продакшен-ветка, main
• Framework preset : Create React App
• Команда сборки, npm run build
• Каталог вывода сборки, build

После выбора Save and Deploy, начнется первое развертывание вашего проекта Pages. В случае успеха вы увидите уникальный *.pages.dev поддомен и ссылку на демонстрацию вашего проекта.

Иногда удобно создать две формы: одну для разработки, другую для продакшена. Так вы сможете разрабатывать и тестировать форму, не повреждая рабочий набор данных и не отправляя тестовые уведомления клиентам.

Чтобы настроить формы для продакшена и разработки, сначала создайте вторую форму в Formspree. Назовите её Contact Us Testing и запомните её hashid ↗.

Затем измените useForm хук в вашем ContactForm.js файл так, чтобы он инициализировался переменной окружения, а не строкой:

const [state, handleSubmit] = useForm(process.env.REACT_APP_FORM_ID);

В настройках проекта Cloudflare Pages добавьте REACT_APP_FORM_ID переменную окружения в оба окружения, Production и Preview. Используйте исходный hashid для Production, а также для новой тестовой формы hashid для окружения Preview:

Теперь при коммите и отправке изменений в ветку git репозитория будет создано новое предварительное приложение с формой, отправляющей данные на тестовый URL-адрес формы. При этом продакшен-сайт по-прежнему будет отправлять данные на исходный URL-адрес формы.

В этом руководстве вы создали и развернули сайт с помощью Cloudflare Pages и Formspree для обработки отправки форм. Вы создали приложение React с формой, которая взаимодействует с Formspree для обработки и хранения запросов на отправку и отправки уведомлений.

Если вы хотите просмотреть полный исходный код этого приложения, вы можете найти его на GitHub ↗.

• Добавьте HTML-форму с помощью Formspree
• HTML Forms