← Cloudflare Workers / workers / tutorials

Обработка отправки форм с помощью Airtable

В этом руководстве вы будете использовать Cloudflare Workers и Airtable ↗ чтобы сохранять данные форм, отправленных из клиентского пользовательского интерфейса. Airtable представляет собой бесплатное табличное решение, предоставляющее удобный API для разработчиков. Worker будет обрабатывать входящие отправки форм и использовать API Airtable REST API ↗ чтобы асинхронно сохранить данные в базе Airtable (так в Airtable называется таблица) для последующего использования.

GIF-анимация полной интеграции Airtable и бессерверной функции

Прежде чем начать

Во всех руководствах предполагается, что вы уже выполнили Руководство по началу работы, который поможет вам настроить аккаунт Cloudflare Workers, C3 ↗, а также Wrangler.

1. Создайте форму

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

Ознакомьтесь с упрощённым примером формы, используемой в этом руководстве. Обратите внимание, что action параметр <form> тег должен указывать на развернутое приложение Workers, которое вы создадите в этом руководстве.

Ваш фронтенд-код

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

2. Создание проекта Worker

Чтобы обработать отправку формы, создайте и разверните Worker, который разбирает входящие данные формы и подготавливает их для отправки в Airtable.

Создайте новый airtable-form-handler проект Worker:

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

Для настройки выберите следующие параметры:

Для С чего вы хотите начать?, выберите Hello World example.
Для Какой шаблон вы хотите использовать?, выберите Worker only.
Для Какой язык вы хотите использовать?, выберите JavaScript.
Для Хотите использовать git для контроля версий?, выберите Yes.
Для Хотите развернуть приложение?, выберите No (мы внесём некоторые изменения перед развёртыванием).

Затем перейдите в только что созданный каталог:

cd airtable-form-handler

3. Настройка базы Airtable

Когда Worker будет готов, он отправит данные в базу Airtable через REST API Airtable.

Если у вас нет аккаунта Airtable, создайте его (для выполнения этого руководства достаточно бесплатного плана). В дашборде Airtable создайте новую базу, выбрав Начало с нуля.

После создания новой базы настройте её для использования с формой на фронтенде. Удалите существующие столбцы и создайте шесть столбцов со следующими типами полей:

Название поля	тип поля Airtable
Имя	«Single line text»
Фамилия	«Single line text»
Электронная почта	«Email»
Номер телефона	«Phone number»
Тема	«Single line text»
Сообщение	«Long text»

Обратите внимание, что имена полей чувствительны к регистру. Если вы измените имена полей, их нужно будет точно так же указать в запросе API к Airtable, который вы сделаете позже в этом руководстве. Также по желанию можно переименовать таблицу: по умолчанию она называется Table 1. В коде ниже мы предполагаем, что таблица переименована во что-то более описательное, например Form Submissions.

Затем перейдите в страница API Airtable ↗ и выберите свою новую базу. Обратите внимание, что для просмотра информации о базе нужно быть авторизованным в Airtable. На странице документации API найдите свой ID базы Airtable.

Вам также нужно будет создать Персональный токен доступа который вы будете использовать для доступа к базе Airtable. Это можно сделать, перейдя в Персональные токены доступа ↗ странице на сайте Airtable и создав новый токен. Обязательно настройте токен следующим образом:

Область действия: data.records:write scope должен быть установлен для токена
Доступ: доступ должен быть предоставлен к базе, с которой вы работали в этом руководстве

Токен доступа к результатам теперь должен быть установлен в вашем приложении. Чтобы сделать токен доступным в коде, используйте wrangler secret команду. secret команда шифрует и сохраняет переменные окружения для использования в вашей функции, не раскрывая их пользователям.

Запустите wrangler secret put, передав AIRTABLE_ACCESS_TOKEN в качестве имени вашего секрета:

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.

Прежде чем продолжить, проверьте ключи, которые вы должны были получить от Airtable:

Airtable Table Name: Имя вашей таблицы, например Form Submissions.
Airtable Base ID: Буквенно-цифровой ID базы, указанный вверху страницы API вашей базы.
Airtable Access Token: Личный токен доступа, который пользователь создает для получения информации о вашей новой базе Airtable.

4. Отправьте данные в Airtable

Настроив базу Airtable и подготовив ключи и ID, необходимые для работы с API, вы настроите Worker для сохранения данных формы в Airtable.

В проекте Worker index.js файл, замените код по умолчанию обработчиком fetch для Workers, который может отвечать на запросы. Когда путь (pathname) запрашиваемого URL равен /submit, вы обрабатываете отправку новой формы, в противном случае возвращаете 404 Not Found ответ.

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 выполняет две функции. Во-первых, он разбирает данные формы, поступающие из вашей HTML5 формы. После разбора данных используйте Airtable API, чтобы сохранить новую строку (новую отправку формы) в вашей таблице:

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

Предотвратите возможные ошибки при обращении к request.body

Тело Запрос ↗ доступен только один раз. Если ранее вы использовали request.formData() в одном и том же запросе вы можете столкнуться с ошибкой TypeError при попытке обратиться к request.body.

Чтобы избежать ошибок, создайте копию объекта Request с помощью request.clone() при каждой последующей попытке обратиться к телу Request. Учтите, что в Workers действует лимит памяти 128 MB на один Worker и многократная загрузка особенно больших файлов в память Worker может достичь этого предела. Чтобы использование памяти не достигало этого предела, рассмотрите использование Streams.

Основная часть этой функции занимается разбором тела запроса (данных, отправляемых вместе с запросом), но стоит обратить внимание на два важных момента. Во-первых, если HTTP-метод, переданный в эту функцию, не POST, вы вернёте новый ответ с кодом состояния 405 Method Not Allowed ↗.

Переменная reqBody представляет собой набор полей, то есть пар «ключ-значение» для каждого столбца в вашей таблице Airtable. Отформатировав reqBody как объект с набором полей, вы создаёте новую запись в таблице со значением для каждого поля.

Затем вызовите createAirtableRecord (функция, которую вы определите далее). createAirtableRecord функция принимает body параметр, соответствующий формату, требуемому Airtable API: объект JavaScript, содержащий пары ключ-значение в fields, представляющий одну запись, которую нужно создать в вашей таблице:

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

Чтобы сделать аутентифицированный запрос к Airtable, нужно указать четыре константы с данными об учётной записи Airtable, базе и имени таблицы. Вы уже задали AIRTABLE_ACCESS_TOKEN с помощью wrangler secret, поскольку это значение, которое должно быть зашифровано. ID базы Airtable и имя таблицы, а также FORM_URL это значения, которые можно свободно публиковать, например на GitHub. Используйте команду Wrangler vars функцию для передачи публичных переменных окружения из файла Wrangler.

Добавьте vars таблицу в конце файла 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"

Отправив все эти поля, вы готовы развернуть свою serverless-функцию на Workers и подключить к ней форму. Сначала опубликуйте Worker:

Разверните ваш Worker

npx wrangler deploy

Ваш проект Worker будет развёрнут по уникальному URL, например https://workers-airtable-form.cloudflare.workers.dev. Это соответствует первой части формы вашего фронтенда: action атрибут: вторая часть это путь к обработчику формы, а именно /submit. В интерфейсе фронтенда настройте form тег, как показано ниже:

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

После развёртывания новой формы (см. HTML-формы руководству, если вам нужна помощь с созданием формы), вы сможете отправить новую форму и сразу же увидеть значение в Airtable:

Пример GIF-изображения с полной интеграцией Airtable и бессерверной функции

Заключение

Завершив этот туториал, вы создали Worker, который принимает данные формы и сохраняет их в Airtable. Вы научились разбирать данные формы, настраивать переменные окружения и использовать fetch API для отправки запросов к внешним сервисам за пределами вашего Worker.