WordPress как на ладони
Очень Удобный и Быстрый Хостинг для сайтов на WordPress. Пользуюсь сам и вам рекомендую!
campusboy и Kama2.5 лет назад4

Сохранение формы CF7 в таблицу Notion

Contact Form 7

Этот простой пример для тех, кто хочет интегрировать форму CF7 с таблицей (базой данных) notion.so, но не знает с чего начать.

Оглавление:

Код в статье специально упрощён для более простого ознакомления с процессом, но работоспособен. Его цель: упростить вам процесс решения задачи, подсказать с чего начать. В дальнейшем, доработайте и улучшите его в соответствии с задачей.

Работа на уровне notion.so

Получение токена

Зарегистрируйтесь/авторизуйтесь в notion.so.

Создайте новую интеграцию или используйте уже созданную, главное получить токен.

Настройте новую интеграцию:

  • Укажите название, чтобы потом отличать интеграции друг от друга в списке. Потом можно будет изменить.
  • Укажите по желанию лого. Потом можно будет изменить.
  • Укажите к какому пространству принадлежит интеграция. К примеру, если указать пространство WP Plus, то в пространстве Campusboy использовать интеграцию будет нельзя. Будьте аккуратны, после создания интеграции этот параметр изменить нельзя, придётся создавать новую интеграцию.

Скопируйте токен, который будем использовать в коде ниже.

Создание таблицы

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

Создайте страницу.

Укажите заголовок страницы и выберете в секции Database вариант table.

Обратите внимание на url страницы, так как в нём содержится ID таблицы, он нам понадобиться. К примеру у меня ссылка на страницу в виде таблицы получилась https://www.notion.so/wpplus/52945299d88a4ccfa2b4bcf6ab503f95?v=2ec5b9acb42d47e2aa13d376f87fa769, где 52945299d88a4ccfa2b4bcf6ab503f95 есть ID таблицы.

Расшарьте страницу, нажав на кнопку Share.

Нажмите invate, чтобы открыть список с кем поделиться страницей (открыть доступ).

В появившемся списке выберите созданную заранее интеграцию (или несколько) и подтвердите выбор повторным кликом по кнопке invate.

Теперь кликнете правой кнопкой мыши по дефолтному заголовку столбца "Name" и измените на своё, к примеру "Заголовок статьи". Измените дефолтное название "Tags" на "Ссылка на статью" и смените его дефолтный тип Multi-select на URL.

Таблица готова, переходим к настройке формы CF7.

Работа на уровне WordPress

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

Создайте форму со следующим шаблоном

[text* title-article placeholder "Заголовок статьи"]
[url* url-article placeholder "Ссылка на статью"]
[submit]

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

Код интеграции

Итак, мы получили токен, знаем ID таблицы, а также знаем названия столбцов таблицы и имена полей формы CF7. Ознакомившись с API Notion пишем интеграцию:

// Это хук, который срабатывает при успешной отправке письма
add_action( 'wpcf7_mail_sent', 'add_article_link_to_notion_table' );

function add_article_link_to_notion_table() {
	$token    = 'secret_3quBvEE8IGdCtfZ4YBmcAxd7zOWfCgx7TlIvEccETVO';
	$table_id = '52945299d88a4ccfa2b4bcf6ab503f95';

	$submission  = WPCF7_Submission::get_instance();
	$posted_data = $submission->get_posted_data();

	$title_article = $posted_data['title-article'];
	$url_article   = $posted_data['url-article'];

	// По сути мы создаем страницы в таблице
	wp_remote_post( 'https://api.notion.com/v1/pages', [
		'headers' => [
			'Notion-Version' => '2021-05-13',
			'Authorization'  => "Bearer $token",
			'Content-Type'   => 'application/json',
		],
		'body'    => wp_json_encode( [
			// Куда сохраняем (у нас таблица)
			'parent'     => [
				'database_id' => $table_id,
			],
			// Заполняемые колонки таблицы
			'properties' => [
				'Заголовок статьи' => [
					'title' => [
						[
							'text' => [
								'content' => $title_article,
							],
						],
					],
				],
				'Ссылка на статью' => [
					'url' => $url_article,
				],
			],
		] ),
	] );

}

Заметьте, что мы в таблице Notion используем дефолтное поле "Name" (переименовали в "Заголовок статьи", но сути не меняет), которое в рамках таблицы имеет особое значение и потому его конфигурация отличается от обычного поля типа Text.

При работе с API Notion не забывайте про обработку ошибок и лимиты сервиса.

В результате заполнения формы CF7 и её отправки, мы получим сохранённые данные в таблице Notion:

4 комментария
    Войти