自作のお問い合わせフォームをNotion APIと連携した話

フリーランスでWeb制作をしている矢野です。

自分のポートフォリオサイト（yanoworks.com）のお問い合わせフォームは、以前書いた通りプラグインを使わない自作フォームです。

今回は、このフォームの送信内容を、メール通知に加えてNotionのデータベースにも自動で追加されるようにした話を書きます。

なぜNotion連携をしたかったか

問い合わせが増えてくると、メールの受信箱だけでは「対応済みかどうか」の管理がだんだんしづらくなってきます。

もともと他の作業でNotionを使っていたので、問い合わせも同じ場所で一覧管理できたら楽だと思い、連携することにしました。

Notionの「インテグレーション」を発行してデータベースに接続する

NotionのAPIを外部から使うには、まずNotion側で「インテグレーション」というものを作成して、アクセストークンを発行します。

ここで見落としがちなのが、トークンを発行しただけではAPIから何も見えないという点です。

問い合わせを溜めたいデータベースのページを開き、「接続を追加」から作成したインテグレーションを明示的に接続しておく必要があります。

フォーム送信時にNotion APIへページを追加する

送信処理自体は、以前書いた通りadmin-post.phpのフックで受け止めています。

今回はその処理の中に、Notion APIへリクエストを送る関数を1つ追加しました。

function yano_works_send_to_notion( $fields ) {
	$properties = array(
		'名前'           => array( 'title' => array( array( 'text' => array( 'content' => $fields['name'] ) ) ) ),
		'受付日時'       => array( 'date' => array( 'start' => gmdate( 'c' ) ) ),
		'ご依頼の種類'   => array( 'rich_text' => array( array( 'text' => array( 'content' => $fields['type'] ) ) ) ),
		'メールアドレス' => array( 'email' => $fields['email'] ),
		'お問い合わせ内容' => array( 'rich_text' => array( array( 'text' => array( 'content' => $fields['message'] ) ) ) ),
	);

	wp_remote_post(
		'https://api.notion.com/v1/pages',
		array(
			'headers' => array(
				'Authorization'  => 'Bearer ' . YANO_WORKS_NOTION_TOKEN,
				'Content-Type'   => 'application/json',
				'Notion-Version' => '2022-06-28',
			),
			'body'    => wp_json_encode(
				array(
					'parent'     => array( 'database_id' => YANO_WORKS_NOTION_DATABASE_ID ),
					'properties' => $properties,
				)
			),
			'timeout' => 8,
		)
	);
}

ポイントは、wp_remote_post()でNotionのページ作成エンドポイントに、JSON形式でpropertiesを送っているだけというシンプルさです。

propertiesの中のキー（「名前」「受付日時」など）は、そのままNotionデータベースの列名と対応させる必要があります。

// メール送信の前に、Notionへの追加も呼び出す
yano_works_send_to_notion(
	array(
		'name'    => $name,
		'email'   => $email,
		'type'    => $type,
		'message' => $message,
	)
);

$sent = wp_mail( $to, $subject, $body, $headers );

プロパティ名の1文字違いで、静かに失敗していた話

実装して最初にテスト送信したとき、フォームは「送信完了」の画面になり、メールもちゃんと届いていたのに、Notion側には何も追加されていませんでした。

原因を調べてみると、Notionのデータベースで作った列名が「受付日時」だったのに対して、コード側では「受信日時」と1文字違いで書いてしまっていたことが分かりました。

NotionのAPIは、propertiesの中のキーが1つでもデータベースの実際のプロパティ名と一致しないと、そのプロパティだけでなくリクエスト全体をエラーとして扱います。

しかも今回は、Notionへの送信をwp_remote_post()で「投げっぱなし」にしていて、失敗してもerror_logにしか記録していなかったので、フォーム自体は成功したように見えてしまう、気づきにくい失敗のしかたでした。

直し方自体はコード側のキー名を合わせるだけの単純な修正でしたが、「外部APIに送るプロパティ名は、見た目が似ていても機械的に完全一致させる」という当たり前のことを、身をもって再確認した出来事でした。

まとめ

今回は、自作のお問い合わせフォームに、Notion API連携を追加した話を書きました。

メール通知はそのまま残しつつ、Notion側でも一覧管理できるようになったので、対応漏れに気づきやすくなったのが実感としていちばん大きい変化です。

同じようにWordPressの自作フォームから外部サービスと連携したい方の参考になればうれしいです。