← Cloudflare Pages / pages / tutorials

Přidání formuláře React pomocí Formspree

Téměř každý web v Reactu 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> komponentu pomocí React a přidejte ji do jednostránkové aplikace vytvořené pomocí create-react-app. Přestože používáte create-react-app (CRA), tyto principy platí pro jakýkoli framework React, včetně Next.js, Gatsby a dalších. K shromažďování odeslaných dat a odesílání e-mailových oznámení o nových odpovědích použijete Formspree, bez nutnosti programování na straně serveru.

Svůj web nasadíte na Cloudflare Pages. Přečtěte si Úvodní návod a seznamte se s platformou.

Nejprve vytvořte nový projekt React na svém počítači pomocí create-react-app. Poté vytvořte nový repozitář GitHub ↗, a připojte umístění na GitHubu jako vzdálený cíl:

# 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

Nyní můžete upravit aplikaci React v new-app adresář, který jste vytvořili.

Výchozí bod pro create-react-app obsahuje jednoduchý web Hello World. Přidáte do něj formulář Contact Us, který přijímá jméno, e-mailovou adresu a zprávu. Kód formuláře vychází z návodu HTML Forms tutorial. Podrobnější vysvětlení fungování formulářů HTML a další studijní materiály najdete v návod na HTML formuláře.

Nejprve vytvořte novou komponentu React s názvem ContactForm.js a umístěte jej do src složku vedle App.js.

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

Dále vytvoříte komponentu formuláře pomocí pomocné knihovny od Formspree, @formspree/react ↗. Tato knihovna obsahuje useForm hook, který zjednodušuje zpracování událostí odeslání formuláře a správu stavu formuláře.

Nainstalujte to pomocí:

npm i @formspree/react

Poté vložte následující úryvek kódu do ContactForm.js soubor:

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>
	);
}

V současné době formulář obsahuje zástupný text YOUR_FORM_ID. Toto později v tomto návodu nahradíte vlastním koncovým bodem formuláře.

useForm hook vrací state objekt a handleSubmit funkce, kterou předáte do onSubmit atribut formuláře. Společně umožňují odesílat data formuláře přes AJAX a aktualizovat stav formuláře podle přijaté odpovědi.

Pro přehlednost tento formulář neobsahuje žádné styly, ale v projektu na GitHubu (https://github.com/formspree/formspree-example-cloudflare-react ↗) si můžete prohlédnout příklad, jak na formulář použít styly.

Chcete-li tento formulář přidat na svůj web, importujte komponentu:

import ContactForm from "./ContactForm";

Poté vložte formulář na stránku jako komponentu React:

<ContactForm />

Můžete si například aktualizovat src/App.js soubor a přidejte formulář:

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;

Nyní máte jednostránkovou aplikaci obsahující formulář Kontaktujte nás s několika poli, která uživatel vyplní. Formulář ale zatím nemáte nastavený tak, aby se odesílal na platný koncový bod. To provedete v další část.

Formulář React je hotový, po jeho odeslání ale uživatel obdrží Form not found chybu. Pro nápravu vytvořte nový formulář Formspree a zkopírujte jeho jedinečné ID do useForm volání.

Chcete-li vytvořit formulář Formspree, zaregistrujte se do účet na Formspree ↗. Poté vytvořte nový formulář s + New form tlačítko. Pojmenujte nový formulář Contact-us form a aktualizujte e-mail příjemce na e-mail, na který chcete dostávat odeslané formuláře. Nakonec vyberte Vytvořte formulář.

Zobrazí se vám pokyny, jak nový formulář integrovat. Zkopírujte hashid (posledních 8 alfanumerických znaků z adresy URL) a vložte je do useForm funkce v ContactForm komponentu, kterou jste vytvořili výše.

Vaše komponenta by nyní měla obsahovat řádek podobný tomuto:

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

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

Po odeslání formuláře byste nyní měli vidět zprávu s poděkováním. Data formuláře se odešlou do vašeho účtu na Formspree.io ↗.

Odtud můžete upravit logiku zpracování formuláře a aktualizovat 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:

• Obecnou nápovědu k Formspree najdete v Web nápovědy Formspree ↗.
• Další nápovědu k vytváření formulářů v Reactu najdete v dokumentace k formspree-react ↗
• Tipy pro integraci Formspree s oblíbenými platformami, jako jsou Next.js, Gatsby a Eleventy, najdete v Průvodci Formspree ↗.

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 Úvodní návod s kompletním postupem. Po výběru příslušného repozitáře GitHub musíte projekt nakonfigurovat s následujícím nastavením sestavení:

• Název projektu : Podle vlastního výběru
• Produkční větev, main
• Přednastavení frameworku : Create React App
• Příkaz sestavení, npm run build
• Výstupní adresář sestavení, build

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.

Někdy se hodí vytvořit dva formuláře, jeden pro vývoj a jeden pro produkci. Díky tomu můžete formulář vyvíjet a testovat, aniž byste poškodili produkční data nebo odeslali testovací notifikace klientům.

Chcete-li nastavit produkční a vývojový formulář, nejprve vytvořte ve Formspree druhý formulář. Pojmenujte jej Contact Us Testing a poznamenejte si jeho hashid ↗.

Poté změňte useForm hook ve vašem ContactForm.js soubor tak, aby se inicializoval proměnnou prostředí místo řetězce:

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

V nastavení projektu Cloudflare Pages přidejte REACT_APP_FORM_ID proměnnou prostředí do prostředí Production i Preview. V původním formuláři použijte hashid pro Production a nového testovacího formuláře hashid pro prostředí Preview:

Když nyní commitnete a pushnete změny do větve svého git repozitáře, vytvoří se nová náhledová aplikace s formulářem, který odesílá data na testovací URL formuláře. Vaše produkční webové stránky ale budou i nadále odesílat data na původní URL formuláře.

V tomto tutoriálu jste vytvořili a nasadili web pomocí Cloudflare Pages a Formspree pro zpracování odeslaných formulářů. Vytvořili jste aplikaci React 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 ↗.

• Přidejte HTML formulář pomocí Formspree
• HTML formuláře