INTEGRITY Dokumentace

← Cloudflare Pages / pages / tutorials

Přidejte HTML formulář pomocí Formspree

Téměř každý web, ať už jde o jednoduchou portfoliovou stránku v HTML nebo komplexní aplikaci v JavaScriptu, potřebuje formulář pro sběr uživatelských dat. Formspree ↗ je backendová služba, která zajišťuje zpracování a ukládání formulářů a umožňuje vývojářům přidávat na web formuláře bez psaní serverového kódu nebo funkcí.

V tomto tutoriálu vytvoříte <form> pomocí čistého HTML a CSS a přidejte ho na statický HTML web hostovaný na Cloudflare Pages. Více informací najdete v Úvodní návod a seznamte se s platformou. K shromažďování odeslaných dat a odesílání e-mailových upozornění na nové příspěvky použijete Formspree, aniž byste museli psát jakýkoli JavaScript nebo kód na backendu.

Nastavení

Nejprve vytvořte nový repozitář GitHub ↗. Poté na svém počítači vytvořte nový lokální adresář, inicializujte git a připojte umístění na GitHubu jako vzdálený cíl:

# 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

Nyní můžete začít pracovat v new-project adresář, který jste vytvořili.

Značkování webu

V tomto ukázkovém projektu použijete pouze čisté HTML. Domovská stránka bude obsahovat kontaktní formulář, který přijímá jméno, e-mailovou adresu a zprávu.

Kód formuláře:

<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 atribut určuje, kam se odešlou data formuláře. Tuto hodnotu později upravíte tak, aby se data formuláře odesílala do Formspree. Všechny <input> značky musí mít jedinečný name a zachytit tak data uživatele. for a id hodnoty se musí shodovat, aby došlo k propojení <label> s odpovídajícím <input> pro nástroje přístupnosti, jako jsou čtečky obrazovky.

Chcete-li tento formulář přidat na svůj web, nejprve vytvořte public/index.html v adresáři projektu. public adresář by měl obsahovat všechny soubory front-endu a index.html soubor bude sloužit jako domovská stránka webu.

Zkopírujte a vložte následující obsah do public/index.html soubor, který obsahuje výše uvedený formulář:

<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>

Nyní máte HTML dokument obsahující formulář Kontaktujte nás s několika poli, která uživatel vyplní. Zatím jste ale nenastavili action atribut na server, který dokáže zpracovat data formuláře. To provedete v další části tohoto tutoriálu.

Backend Formspree

Formulář HTML je hotový, při jeho odeslání ale budou data odeslána ve formátu POST požadavek na / URL. Na dané adrese neexistuje žádný server, který by zpracoval odeslaná data, a dojde tak k chybě. Pro opravu vytvořte nový formulář Formspree a zkopírujte jeho jedinečnou adresu URL do action.

Chcete-li vytvořit formulář Formspree, zaregistrujte se do účet na Formspree ↗.

Dále vytvořte nový formulář pomocí + New form tlačítko. Pojmenujte ho Contact-us form a aktualizujte e-mail příjemce na e-mail, na který chcete dostávat odeslané formuláře. Poté vyberte Vytvořte formulář.

Vytvoření formuláře Formspree

Poté se vám zobrazí pokyny, jak nový formulář integrovat.

Koncový bod Formspree

Zkopírujte Form Endpoint URL a vložte ji do action atribut formuláře, který jste vytvořili výše.

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

Po odeslání formuláře byste nyní měli být přesměrováni na stránku s poděkováním. Data formuláře se odešlou do vašeho účtu na Formspree.io ↗.

Nyní můžete upravit logiku zpracování formuláře a změnit přesměrovací stránka ↗, aktualizujte e-mailová adresa pro oznámení ↗, nebo přidejte pluginy jako Google Sheets ↗, Slack ↗ a další.

Další nápovědu k nastavení Formspree najdete v následujících zdrojích:

Nasazení

Nyní jste připraveni nasadit svůj projekt.

Pokud jste tak ještě neučinili, uložte si postup v git a poté odešlete commit (nebo commity) do repozitáře 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

Vaše práce se nyní nachází v repozitáři GitHub, což znamená, že k ní má přístup i Pages.

Pokud je toto váš první projekt Cloudflare Pages, přečtěte si Začínáme s kompletním návodem na nastavení. Po výběru příslušného repozitáře GitHub musíte projekt nakonfigurovat s následujícím nastavením sestavení:

Po výběru Save and Deploy, váš projekt Pages zahájí své první nasazení. Po úspěšném dokončení se vám zobrazí jedinečná *.pages.dev subdoména a odkaz na živou ukázku.

V tomto tutoriálu jste vytvořili a nasadili web pomocí Cloudflare Pages a Formspree pro zpracování odeslaných formulářů. Vytvořili jste statický HTML dokument s formulářem, který komunikuje s Formspree za účelem zpracování a uložení odeslaných požadavků a odesílání notifikací.

Pokud si chcete prohlédnout celý zdrojový kód této aplikace, najdete ho na GitHub ↗.