← Cloudflare Workers / workers / tutorials

Zpracování odeslaných formulářů pomocí Airtable

V tomto tutoriálu použijete Cloudflare Workers a Airtable ↗ k ukládání odeslaných formulářů z uživatelského rozhraní na frontendu. Airtable je bezplatné tabulkové řešení s přívětivým API pro vývojáře. Workers zpracují příchozí odeslání formulářů a pomocí REST API ↗ pro asynchronní uložení dat do Airtable base (Airtable termín pro tabulku) pro pozdější potřebu.

Všechny návody předpokládají, že jste již dokončili Úvodní návod, který vás provede nastavením účtu Cloudflare Workers, C3 ↗, a Wrangler.

V tomto tutoriálu vytvoříte funkci Workers, která zpracovává vstup z kontaktního formuláře. Formulář, na který se tento tutoriál odkazuje, bude sbírat jméno, příjmení, e-mailovou adresu, telefonní číslo, předmět zprávy a samotnou zprávu.

Prohlédněte si zjednodušený příklad formuláře použitého v tomto tutoriálu. Všimněte si, že action parametru <form> tag by měl odkazovat na nasazenou aplikaci Workers, kterou v tomto tutoriálu vytvoříte.

<form action="https://workers-airtable-form.signalnerve.workers.dev/submit" method="POST">
  <div>
    <label for="first_name">First name</label>
    <input type="text" name="first_name" id="first_name" autocomplete="given-name" placeholder="Ellen" required />
  </div>

  <div>
    <label for="last_name">Last name</label>
    <input type="text" name="last_name" id="last_name" autocomplete="family-name" placeholder="Ripley" required />
  </div>

  <div>
    <label for="email">Email</label>
      <input id="email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required />
    </div>
  </div>

  <div>
    <label for="phone">
      Phone
      <span>Optional</span>
    </label>
    <input type="text" name="phone" id="phone" autocomplete="tel" placeholder="+1 (123) 456-7890" />
  </div>

  <div>
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" placeholder="Your example subject" required />
  </div>

  <div>
    <label for="message">
      Message
      <span>Max 500 characters</span>
    </label>
    <textarea id="message" name="message" rows="4" placeholder="Tenetur quaerat expedita vero et illo. Tenetur explicabo dolor voluptatem eveniet. Commodi est beatae id voluptatum porro laudantium. Quam placeat accusamus vel officiis vel. Et perferendis dicta ut perspiciatis quos iste. Tempore autem molestias voluptates in sapiente enim doloremque." required></textarea>
  </div>

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

Chcete-li zpracovat odeslání formuláře, vytvořte a nasaďte Worker, který analyzuje příchozí data formuláře a připraví je k odeslání do Airtable.

Vytvořte nový airtable-form-handler projekt Workeru:

npm create cloudflare@latest -- airtable-form-handler

Při nastavení vyberte následující možnosti:

• Pro S čím byste chtěli začít?, vyberte Hello World example.
• Pro Jakou šablonu chcete použít?, vyberte Worker only.
• Pro Jaký jazyk chcete použít?, vyberte JavaScript.
• Pro Chcete používat git pro správu verzí?, vyberte Yes.
• Pro Chcete nasadit svou aplikaci?, vyberte No (před nasazením provedeme ještě několik změn).

Poté přejděte do nově vytvořeného adresáře:

cd airtable-form-handler

Po dokončení bude váš Worker odesílat data do Airtable base přes REST API Airtable.

Pokud nemáte účet Airtable, vytvořte si ho (k dokončení tohoto návodu postačí plán Free). V dashboardu Airtable vytvořte novou bázi výběrem Začít od nuly.

Jakmile vytvoříte novou bázi, nastavte ji pro použití s formulářem na frontendu. Smažte existující sloupce a vytvořte šest nových s následujícími typy polí:

Mějte na paměti, že v názvech polí záleží na velikosti písmen. Pokud názvy polí změníte, budete je muset později v tutoriálu přesně použít i v API požadavku, který odešlete do Airtable. Nakonec můžete tabulku volitelně přejmenovat, ve výchozím stavu se bude jmenovat například Table 1. V níže uvedeném kódu předpokládáme, že tabulka byla přejmenována na výstižnější název, například Form Submissions.

Dále přejděte na stránka API Airtable ↗ a vyberte novou základnu (base). Mějte na paměti, že pro zobrazení informací o základně musíte být přihlášeni do Airtable. Na stránce dokumentace API najděte ID báze Airtable.

Také budete muset vytvořit Osobní přístupový token který použijete pro přístup ke své databázi Airtable. Můžete to udělat na Osobní přístupové tokeny ↗ stránku na webu Airtable a vytvořte nový token. Token nakonfigurujte tímto způsobem:

• Rozsah: data.records:write rozsah musí být u tokenu nastaven
• Přístup: přístup by měl být udělen k base, se kterou jste v tomto tutoriálu pracovali

Přístupový token pro výsledky by nyní měl být nastaven ve vaší aplikaci. Aby byl token dostupný ve vašem kódu, použijte wrangler secret příkaz. secret příkaz zašifruje a uloží proměnné prostředí pro použití ve vaší funkci, aniž by je odhalil uživatelům.

Spustit wrangler secret put, přičemž předáte AIRTABLE_ACCESS_TOKEN jako název vašeho secretu:

npx wrangler secret put AIRTABLE_ACCESS_TOKEN

Enter the secret text you would like assigned to the variable AIRTABLE_ACCESS_TOKEN on the script named airtable-form-handler:
******
🌀  Creating the secret for script name airtable-form-handler
✨  Success! Uploaded secret AIRTABLE_ACCESS_TOKEN.

Než budete pokračovat, zkontrolujte klíče, které byste měli mít z Airtable:

1. Airtable Table Name: Název vaší tabulky, například Form Submissions.
2. Airtable Base ID: Alfanumerické ID base, které najdete v horní části stránky API vaší base.
3. Airtable Access Token: Osobní přístupový token, který uživatel vytvoří pro přístup k informacím o vaší nové základně Airtable.

Jakmile máte nastavenou Airtable base a připravené klíče a ID potřebné pro komunikaci s API, nastavíte teď svůj Worker tak, aby ukládal data z formuláře do Airtable.

Ve svém Worker projektu v index.js soubor a nahraďte výchozí kód fetch handlerem Workers, který dokáže odpovídat na požadavky. Pokud má požadovaná URL cestu /submit, zpracujete nové odeslání formuláře, jinak vrátíte 404 Not Found odpověď.

export default {
	async fetch(request, env) {
		const url = new URL(request.url);
		if (url.pathname === "/submit") {
			await submitHandler(request, env);
		}
		return new Response("Not found", { status: 404 });
	},
};

submitHandler má dvě funkce. Nejprve zpracuje data formuláře přicházející z vašeho formuláře HTML5. Jakmile jsou data zpracována, použijte Airtable API k uložení nového řádku (nového odeslání formuláře) do vaší tabulky:

async function submitHandler(request, env) {
	if (request.method !== "POST") {
		return new Response("Method Not Allowed", {
			status: 405,
		});
	}
	const body = await request.formData();

	const { first_name, last_name, email, phone, subject, message } =
		Object.fromEntries(body);

	// The keys in "fields" are case-sensitive, and
	// should exactly match the field names you set up
	// in your Airtable table, such as "First Name".
	const reqBody = {
		fields: {
			"First Name": first_name,
			"Last Name": last_name,
			Email: email,
			"Phone Number": phone,
			Subject: subject,
			Message: message,
		},
	};
	await createAirtableRecord(env, reqBody);
}

// Existing code
// export default ...

Většina této funkce se sice týká parsování těla požadavku (dat odesílaných jako součást požadavku), je ale třeba upozornit na dvě důležité věci. Zaprvé, pokud HTTP metoda odeslaná do této funkce není POST, vrátíte novou odpověď se stavovým kódem 405 Method Not Allowed ↗.

Proměnná reqBody představuje kolekci polí, což jsou dvojice klíč a hodnota pro každý sloupec vaší tabulky Airtable. Naformátováním reqBody jako objekt s kolekcí polí, vytváříte v tabulce nový záznam s hodnotou pro každé pole.

Poté zavoláte createAirtableRecord (funkce, kterou definujete v dalším kroku). createAirtableRecord funkce přijímá body parametru, který odpovídá formátu vyžadovanému Airtable API, tedy objektu JavaScriptu obsahujícímu páry klíč-hodnota pod fields, představující jeden záznam, který se má vytvořit ve vaší tabulce:

async function createAirtableRecord(env, body) {
	try {
		const result = fetch(
			`https://api.airtable.com/v0/${env.AIRTABLE_BASE_ID}/${encodeURIComponent(env.AIRTABLE_TABLE_NAME)}`,
			{
				method: "POST",
				body: JSON.stringify(body),
				headers: {
					Authorization: `Bearer ${env.AIRTABLE_ACCESS_TOKEN}`,
					"Content-Type": "application/json",
				},
			},
		);
		return result;
	} catch (error) {
		console.error(error);
	}
}

// Existing code
// async function submitHandler
// export default ...

Chcete-li provést autentizovaný požadavek na Airtable, musíte zadat čtyři konstanty, které reprezentují údaje o vašem účtu Airtable, base a názvu tabulky. Již jste nastavili AIRTABLE_ACCESS_TOKEN pomocí wrangler secret, protože jde o hodnotu, která by měla být šifrovaná. ID báze Airtable a název tabulky, a FORM_URL jsou hodnoty, které lze veřejně sdílet na místech, jako je GitHub. Použijte Wranglerův vars funkci pro předávání veřejných proměnných prostředí ze souboru Wrangler.

Přidejte vars tabulku na konec svého souboru Wrangler:

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "workers-airtable-form",
	"main": "src/index.js",
	// Set this to today's date
	"compatibility_date": "2026-08-28",
	"vars": {
		"AIRTABLE_BASE_ID": "exampleBaseId",
		"AIRTABLE_TABLE_NAME": "Form Submissions"
	}
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "workers-airtable-form"
main = "src/index.js"
# Set this to today's date
compatibility_date = "2026-08-28"

[vars]
AIRTABLE_BASE_ID = "exampleBaseId"
AIRTABLE_TABLE_NAME = "Form Submissions"

Jakmile odešlete všechna tato pole, je čas nasadit vaši serverless funkci Workers a propojit s ní formulář. Nejprve Worker publikujte:

npx wrangler deploy

Váš projekt Workeru se nasadí na unikátní URL, například https://workers-airtable-form.cloudflare.workers.dev. Toto představuje první část formuláře na frontendu, konkrétně jeho action atribut: druhá část je cesta k handleru formuláře, což je /submit. Ve svém frontendovém rozhraní nakonfigurujte form tag, jak je uvedeno níže:

<form
	action="https://workers-airtable-form.cloudflare.workers.dev/submit"
	method="POST"
	class="..."
>
	<!-- The rest of your HTML form -->
</form>

Jakmile nasadíte nový formulář (viz HTML formuláře tutoriálu, pokud potřebujete pomoc s vytvořením formuláře), měli byste být schopni odeslat nové vyplnění formuláře a vidět, jak se hodnota okamžitě objeví v Airtable:

Po dokončení tohoto tutoriálu máte vytvořený Worker, který umí přijímat odeslané formuláře a ukládat je do Airtable. Naučili jste se parsovat data formuláře, nastavit proměnné prostředí a používat fetch API k odesílání požadavků na externí služby mimo váš Worker.

• Vytvořte Slackbota
• Vytvořte aplikaci Jamstack se seznamem úkolů
• Vytvořte blog pomocí Nuxt.js a Sanity.io na Cloudflare Pages
• Video Jamese Quicka o vytvoření integrace Cloudflare Workers a Airtable ↗