INTEGRITY Документация

← Cloudflare Pages / pages / tutorials

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

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

В этом руководстве вы создадите <form> с помощью обычных HTML и CSS и добавить ее на статический HTML-сайт, размещенный на Cloudflare Pages. Обратитесь к Руководство по началу работы чтобы ознакомиться с платформой. Вы будете использовать Formspree для сбора отправленных данных и рассылки уведомлений по электронной почте при поступлении новых заявок, без необходимости писать код на JavaScript или на стороне сервера.

Настройка

Для начала создайте новый репозиторий GitHub ↗. Затем создайте новый локальный каталог на своем компьютере, инициализируйте git и подключите расположение GitHub в качестве удаленного репозитория:

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

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

Разметка веб-сайта

В этом примере проекта используется только обычный HTML. На главной странице будет форма обратной связи, принимающая имя, адрес электронной почты и сообщение.

Код формы:

<form method="POST" action="/">
	<label for="name">Full Name</label>
	<input id="name" type="text" name="name" pattern="[A-Za-z]+" required />

	<label for="email">Email Address</label>
	<input id="email" type="email" name="email" required />

	<label for="message">Message</label>
	<textarea id="message" name="message" required></textarea>

	<button type="submit">Submit</button>
</form>

action атрибут определяет, куда отправляются данные формы. Позже вы измените это, чтобы отправлять данные формы в Formspree. Все <input> теги должны иметь уникальный name чтобы получить данные пользователя. for и id значения должны совпадать, чтобы связать <label> с соответствующим <input> для инструментов специальных возможностей, таких как программы чтения с экрана.

Чтобы добавить эту форму на сайт, сначала создайте public/index.html в каталоге вашего проекта. public директория должна содержать все ресурсы фронтенда, а index.html файл будет служить главной страницей сайта.

Скопируйте и вставьте следующее содержимое в public/index.html файл, который включает форму, показанную выше:

<html lang="en">
	<head>
		<meta charset="utf8" />
		<title>Form Demo</title>
		<meta name="viewport" content="width=device-width,initial-scale=1" />
	</head>
	<body>
		<!-- the form from above -->

		<form method="POST" action="/">
			<label for="name">Full Name</label>
			<input id="name" type="text" name="name" pattern="[A-Za-z]+" required />

			<label for="email">Email Address</label>
			<input id="email" type="email" name="email" required />

			<label for="message">Message</label>
			<textarea id="message" name="message" required></textarea>

			<button type="submit">Submit</button>
		</form>
	</body>
</html>

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

Бэкенд Formspree

HTML-форма готова, однако при её отправке данные будут отправлены в виде POST запрос к / URL. По этому URL не существует сервера для обработки данных, поэтому произойдёт ошибка. Чтобы это исправить, создайте новую форму Formspree и скопируйте её уникальный URL в action.

Чтобы создать форму Formspree, зарегистрируйтесь на аккаунт на Formspree ↗.

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

Создание формы Formspree

Затем появятся инструкции о том, как интегрировать новую форму.

Конечная точка Formspree

Скопируйте Form Endpoint URL и вставьте его в action атрибут формы, которую вы создали выше.

<form method="POST" action="https://formspree.io/f/mqldaqwx">
	<!-- replace with your own formspree endpoint -->
</form>

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

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

Дополнительную помощь по настройке 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 необходимо настроить проект со следующими параметрами сборки:

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

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

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