diff --git a/site/src/pages/TemplateBuilder/TemplateBuilderPage.tsx b/site/src/pages/TemplateBuilder/TemplateBuilderPage.tsx
index e1a443b6580..e67d9fef927 100644
--- a/site/src/pages/TemplateBuilder/TemplateBuilderPage.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateBuilderPage.tsx
@@ -17,7 +17,11 @@ import type {
 	SelectedBaseMeta,
 	TemplateBuilderWizardState,
 } from "./wizardState";
-import { toCreateTemplateRequest, toSelectedBaseMeta } from "./wizardState";
+import {
+	type CustomizationsFormValues,
+	toCreateTemplateRequest,
+	toSelectedBaseMeta,
+} from "./wizardState";
 
 const TemplateBuilderPage: FC = () => {
 	const navigate = useNavigate();
@@ -109,8 +113,11 @@ const TemplateBuilderPage: FC = () => {
 		return <Navigate to="/templates/new" replace />;
 	}
 
-	const handleCreate = (state: TemplateBuilderWizardState) => {
-		const req = toCreateTemplateRequest(state);
+	const handleCreate = (
+		state: TemplateBuilderWizardState,
+		customizations: CustomizationsFormValues,
+	) => {
+		const req = toCreateTemplateRequest(state, customizations);
 		const durationSeconds = (Date.now() - state.enteredAt) / 1000;
 
 		createMutation.mutate(req, {
diff --git a/site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx b/site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx
index 53fbacfb471..db5ceb74276 100644
--- a/site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx
@@ -46,8 +46,12 @@ import {
 	WIZARD_STEPS,
 } from "./steps";
 import { TemplateAlternatives } from "./TemplateAlternatives";
-import { TemplateCustomizationsStep } from "./TemplateCustomizationsStep";
 import {
+	TEMPLATE_CUSTOMIZATIONS_FORM_ID,
+	TemplateCustomizationsStep,
+} from "./TemplateCustomizationsStep";
+import {
+	type CustomizationsFormValues,
 	initWizardState,
 	type SelectedBaseMeta,
 	type TemplateBuilderWizardState,
@@ -59,7 +63,10 @@ interface TemplateBuilderPageViewProps {
 	error: unknown;
 	basesData: TemplateBuilderBasesResponse | undefined;
 	preselectedBase?: SelectedBaseMeta;
-	onCreateTemplate: (state: TemplateBuilderWizardState) => void;
+	onCreateTemplate: (
+		state: TemplateBuilderWizardState,
+		customizations: CustomizationsFormValues,
+	) => void;
 	createError: Error | null;
 	isCreating: boolean;
 	onClearCreateError?: () => void;
@@ -154,13 +161,16 @@ export const TemplateBuilderPageView: FC<TemplateBuilderPageViewProps> = ({
 	};
 
 	const handleNext = () => {
-		if (isLastStep) {
-			onCreateTemplate(state);
-			return;
-		}
 		navigateToStep(nextIndex);
 	};
 
+	const handleCreate = useCallback(
+		(values: CustomizationsFormValues) => {
+			onCreateTemplate(state, values);
+		},
+		[onCreateTemplate, state],
+	);
+
 	const handleProvisionerStatusChange = useCallback(
 		(value: boolean | undefined) => {
 			dispatch({ type: "SET_HAS_PROVISIONERS", value });
@@ -278,6 +288,7 @@ export const TemplateBuilderPageView: FC<TemplateBuilderPageViewProps> = ({
 							handleProvisionerStatusChange,
 							handleDeselectModule,
 							registerModuleRef,
+							handleCreate,
 						)}
 					</div>
 
@@ -290,9 +301,19 @@ export const TemplateBuilderPageView: FC<TemplateBuilderPageViewProps> = ({
 								Back
 							</Button>
 						)}
-						<Button onClick={handleNext} disabled={!canContinue}>
-							{isLastStep ? "Create Template" : "Continue"}
-						</Button>
+						{isLastStep ? (
+							<Button
+								type="submit"
+								form={TEMPLATE_CUSTOMIZATIONS_FORM_ID}
+								disabled={state.hasProvisioners === false}
+							>
+								Create Template
+							</Button>
+						) : (
+							<Button onClick={handleNext} disabled={!canContinue}>
+								Continue
+							</Button>
+						)}
 					</div>
 
 					{currentStep.id === "base-infra" && <TemplateAlternatives />}
@@ -332,6 +353,7 @@ function renderStepContent(
 	onProvisionerStatusChange: (value: boolean | undefined) => void,
 	onRemoveModule: (moduleId: string) => void,
 	registerModuleRef: (moduleId: string, node: HTMLDivElement | null) => void,
+	onCreate: (values: CustomizationsFormValues) => void,
 ): ReactNode {
 	switch (stepId) {
 		case "base-infra":
@@ -387,13 +409,7 @@ function renderStepContent(
 					{createError != null && <ErrorAlert error={createError} />}
 					<TemplateCustomizationsStep
 						state={state}
-						onChangeField={(field, value) =>
-							dispatch({
-								type: "SET_CUSTOMIZATION",
-								field,
-								value,
-							})
-						}
+						onCreate={onCreate}
 						onProvisionerStatusChange={onProvisionerStatusChange}
 					/>
 				</>
@@ -426,7 +442,7 @@ function computeCanContinue(
 				moduleVarMap,
 			);
 		case "customizations":
-			return state.name.trim() !== "" && state.hasProvisioners !== false;
+			return state.hasProvisioners !== false;
 		default:
 			return true;
 	}
diff --git a/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.stories.tsx b/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.stories.tsx
new file mode 100644
index 00000000000..be9d3711a81
--- /dev/null
+++ b/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.stories.tsx
@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
+import {
+	getProvisionerDaemonsKey,
+	permittedOrganizations,
+} from "#/api/queries/organizations";
+import { Button } from "#/components/Button/Button";
+import {
+	MockDefaultOrganization,
+	MockOrganization,
+	MockOrganization2,
+	MockProvisioner,
+} from "#/testHelpers/entities";
+import {
+	TEMPLATE_CUSTOMIZATIONS_FORM_ID,
+	TemplateCustomizationsStep,
+} from "./TemplateCustomizationsStep";
+import {
+	initialWizardState,
+	type TemplateBuilderWizardState,
+} from "./wizardState";
+
+const baseState: TemplateBuilderWizardState = {
+	...initialWizardState,
+	baseTemplateId: "docker",
+	selectedBase: {
+		id: "docker",
+		name: "Docker Containers",
+		iconUrl: "/icon/docker.svg",
+		hasParameters: false,
+		hasPrerequisites: false,
+	},
+	name: "docker",
+	displayName: "Docker Containers",
+	description: "Run workspaces as Docker containers",
+	icon: "/icon/docker.svg",
+};
+
+const permittedOrgsKey = permittedOrganizations({
+	object: { resource_type: "template" },
+	action: "create",
+}).queryKey;
+
+const provisionersKey = (organizationId: string) =>
+	getProvisionerDaemonsKey(organizationId);
+
+const meta: Meta<typeof TemplateCustomizationsStep> = {
+	title: "pages/TemplateBuilder/TemplateCustomizationsStep",
+	component: TemplateCustomizationsStep,
+	args: {
+		state: baseState,
+		onCreate: fn(),
+		onProvisionerStatusChange: fn(),
+	},
+	parameters: {
+		queries: [
+			{ key: permittedOrgsKey, data: [MockOrganization, MockOrganization2] },
+		],
+	},
+	// The "Create Template" submit button lives in the wizard's shared nav bar,
+	// outside this component. It is associated with the form via the `form`
+	// attribute, so the stories render an equivalent button to exercise submit.
+	decorators: [
+		(Story) => (
+			<div className="flex flex-col gap-6">
+				<Story />
+				<Button type="submit" form={TEMPLATE_CUSTOMIZATIONS_FORM_ID}>
+					Create Template
+				</Button>
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateCustomizationsStep>;
+
+export const MultipleOrganizations: Story = {};
+
+// Submitting without choosing an organization surfaces an aggregated error at
+// the top of the step instead of an inline field error, and does not call
+// onCreate.
+export const MissingOrganizationError: Story = {
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByTestId("organization-autocomplete");
+		await userEvent.click(
+			canvas.getByRole("button", { name: "Create Template" }),
+		);
+		await canvas.findByText("Select an organization to continue.");
+		await expect(args.onCreate).not.toHaveBeenCalled();
+	},
+};
+
+// A single permitted organization is auto-selected, so a valid form submits and
+// forwards the selected organization id to onCreate.
+export const SingleOrganizationSubmits: Story = {
+	parameters: {
+		queries: [
+			{ key: permittedOrgsKey, data: [MockDefaultOrganization] },
+			{
+				key: provisionersKey(MockDefaultOrganization.id),
+				data: [MockProvisioner],
+			},
+		],
+	},
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+		// Wait for the auto-selected org to render in the autocomplete.
+		await canvas.findByText(MockDefaultOrganization.display_name);
+		await userEvent.click(
+			canvas.getByRole("button", { name: "Create Template" }),
+		);
+		await expect(args.onCreate).toHaveBeenCalledWith(
+			expect.objectContaining({
+				organization_id: MockDefaultOrganization.id,
+				name: "docker",
+			}),
+		);
+	},
+};
+
+// A missing template ID surfaces the name validation message at the top of the
+// step and blocks submission.
+export const MissingNameError: Story = {
+	args: {
+		state: { ...baseState, name: "" },
+	},
+	parameters: {
+		queries: [
+			{ key: permittedOrgsKey, data: [MockDefaultOrganization] },
+			{
+				key: provisionersKey(MockDefaultOrganization.id),
+				data: [MockProvisioner],
+			},
+		],
+	},
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText(MockDefaultOrganization.display_name);
+		await userEvent.click(
+			canvas.getByRole("button", { name: "Create Template" }),
+		);
+		await canvas.findByText("Please enter a template id.");
+		await expect(args.onCreate).not.toHaveBeenCalled();
+	},
+};
diff --git a/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx b/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
index 22885bef390..0fc68bd9b61 100644
--- a/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
@@ -1,5 +1,7 @@
+import { useFormik } from "formik";
 import { type FC, useEffect, useState } from "react";
 import { useQuery } from "react-query";
+import * as Yup from "yup";
 import {
 	permittedOrganizations,
 	provisionerDaemons,
@@ -18,23 +20,44 @@ import {
 	TemplateBuilderTitle,
 } from "#/pages/TemplateBuilder/TemplateBuilderHeader";
 import { docs } from "#/utils/docs";
+import {
+	displayNameValidator,
+	iconValidator,
+	nameValidator,
+} from "#/utils/formUtils";
 import type {
+	CustomizationsFormValues,
 	SelectedBaseMeta,
 	TemplateBuilderWizardState,
 } from "./wizardState";
 
+export const TEMPLATE_CUSTOMIZATIONS_FORM_ID = "template-customizations-form";
+
+const MAX_DESCRIPTION_CHAR_LIMIT = 128;
+
+const validationSchema = Yup.object({
+	name: nameValidator("Template ID"),
+	display_name: displayNameValidator("Display name"),
+	description: Yup.string().max(
+		MAX_DESCRIPTION_CHAR_LIMIT,
+		"Please enter a description that is less than or equal to 128 characters.",
+	),
+	icon: iconValidator,
+	// An organization is always required: the page is gated on the create-
+	// template permission, so there is always at least one permitted org, and
+	// it is auto-selected when only one is available.
+	organization_id: Yup.string().required("Select an organization to continue."),
+});
+
 interface TemplateCustomizationsStepProps {
 	state: TemplateBuilderWizardState;
-	onChangeField: (
-		field: "organizationId" | "name" | "displayName" | "description" | "icon",
-		value: string,
-	) => void;
+	onCreate: (values: CustomizationsFormValues) => void;
 	onProvisionerStatusChange: (hasProvisioners: boolean | undefined) => void;
 }
 
 export const TemplateCustomizationsStep: FC<
 	TemplateCustomizationsStepProps
-> = ({ state, onChangeField, onProvisionerStatusChange }) => {
+> = ({ state, onCreate, onProvisionerStatusChange }) => {
 	const permittedOrgsQuery = useQuery(
 		permittedOrganizations({
 			object: { resource_type: "template" },
@@ -43,6 +66,19 @@ export const TemplateCustomizationsStep: FC<
 	);
 	const orgOptions = permittedOrgsQuery.data ?? [];
 
+	const form = useFormik<CustomizationsFormValues>({
+		initialValues: {
+			organization_id: "",
+			name: state.name,
+			display_name: state.displayName,
+			description: state.description,
+			icon: state.icon,
+		},
+		validationSchema,
+		onSubmit: (values) => onCreate(values),
+	});
+
+	// Display object for the autocomplete; the Formik field only stores the id.
 	const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
 
 	const { data: provisioners } = useQuery({
@@ -59,25 +95,52 @@ export const TemplateCustomizationsStep: FC<
 	}, [hasProvisioners, onProvisionerStatusChange]);
 
 	// Auto-select when exactly one org is available.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: form.setFieldValue is stable
 	useEffect(() => {
 		if (orgOptions.length === 1 && !selectedOrg) {
 			setSelectedOrg(orgOptions[0]);
-			onChangeField("organizationId", orgOptions[0].id);
+			void form.setFieldValue("organization_id", orgOptions[0].id);
 		}
-	}, [orgOptions, selectedOrg, onChangeField]);
+	}, [orgOptions, selectedOrg]);
 
 	const handleOrgChange = (org: Organization | null) => {
 		setSelectedOrg(org);
-		onChangeField("organizationId", org?.id ?? "");
+		void form.setFieldValue("organization_id", org?.id ?? "");
 	};
 
+	// Aggregate validation messages and show them at the top of the step so the
+	// horizontal two-column layout is not disturbed by inline field errors.
+	const errorMessages = Object.values(form.errors).filter(
+		(message): message is string => Boolean(message),
+	);
+	const showErrorSummary = form.submitCount > 0 && errorMessages.length > 0;
+
 	return (
-		<div className="min-w-[654px]">
+		<form
+			id={TEMPLATE_CUSTOMIZATIONS_FORM_ID}
+			onSubmit={form.handleSubmit}
+			noValidate
+			className="min-w-[654px]"
+		>
 			<TemplateBuilderTitle>Customizations</TemplateBuilderTitle>
 			<TemplateBuilderSubtitle>
 				Add additional configurations.
 			</TemplateBuilderSubtitle>
 
+			{showErrorSummary && (
+				<Alert severity="error" className="my-4">
+					{errorMessages.length === 1 ? (
+						errorMessages[0]
+					) : (
+						<ul className="m-0 pl-4 list-disc">
+							{errorMessages.map((message) => (
+								<li key={message}>{message}</li>
+							))}
+						</ul>
+					)}
+				</Alert>
+			)}
+
 			{showProvisionerWarning && <ProvisionerWarning />}
 
 			<div className="flex gap-8">
@@ -90,10 +153,10 @@ export const TemplateCustomizationsStep: FC<
 					<div className="flex flex-col gap-2">
 						<Label htmlFor="template-display-name">Display name</Label>
 						<Input
+							{...form.getFieldProps("display_name")}
 							id="template-display-name"
-							value={state.displayName}
-							onChange={(e) => onChangeField("displayName", e.target.value)}
 							placeholder="My Template"
+							aria-invalid={Boolean(form.errors.display_name)}
 						/>
 					</div>
 
@@ -120,23 +183,25 @@ export const TemplateCustomizationsStep: FC<
 					<div className="flex flex-col gap-2">
 						<Label htmlFor="template-description">Description</Label>
 						<Textarea
+							{...form.getFieldProps("description")}
 							id="template-description"
-							value={state.description}
-							onChange={(e) => onChangeField("description", e.target.value)}
 							placeholder="Describe what this template is for"
 							rows={3}
+							aria-invalid={Boolean(form.errors.description)}
 						/>
 						<p className="text-xs text-content-secondary">
 							Used by both humans and Agents to identify templates.
 						</p>
 
 						<IconField
-							value={state.icon}
+							value={form.values.icon}
 							onChange={(e) => {
 								const target = e.target as HTMLInputElement;
-								onChangeField("icon", target.value);
+								void form.setFieldValue("icon", target.value);
+							}}
+							onPickEmoji={(value) => {
+								void form.setFieldValue("icon", value);
 							}}
-							onPickEmoji={(value) => onChangeField("icon", value)}
 						/>
 					</div>
 
@@ -149,11 +214,11 @@ export const TemplateCustomizationsStep: FC<
 							</span>
 						</Label>
 						<Input
+							{...form.getFieldProps("name")}
 							id="template-name"
-							value={state.name}
-							onChange={(e) => onChangeField("name", e.target.value)}
 							placeholder="my-template"
 							aria-required
+							aria-invalid={Boolean(form.errors.name)}
 						/>
 						<p className="text-xs text-content-secondary">
 							Used to identify the template in URLs and the API.
@@ -161,7 +226,7 @@ export const TemplateCustomizationsStep: FC<
 					</div>
 				</div>
 			</div>
-		</div>
+		</form>
 	);
 };
 
diff --git a/site/src/pages/TemplateBuilder/wizardState.test.ts b/site/src/pages/TemplateBuilder/wizardState.test.ts
index 562f7cba16d..3c380a449a3 100644
--- a/site/src/pages/TemplateBuilder/wizardState.test.ts
+++ b/site/src/pages/TemplateBuilder/wizardState.test.ts
@@ -347,20 +347,14 @@ describe("wizardReducer", () => {
 					field: "description",
 					value: "A test template",
 				},
-				{
-					type: "SET_CUSTOMIZATION",
-					field: "organizationId",
-					value: "org-123",
-				},
 			]);
 			expect(state.displayName).toBe("My Template");
 			expect(state.description).toBe("A test template");
-			expect(state.organizationId).toBe("org-123");
 		});
 	});
 
 	describe("RESET_CUSTOMIZATIONS", () => {
-		it("clears org and provisioner state but keeps base-derived fields", () => {
+		it("clears provisioner state but keeps base-derived fields", () => {
 			const state = reduce([
 				{
 					type: "SET_BASE",
@@ -373,15 +367,9 @@ describe("wizardReducer", () => {
 						hasPrerequisites: false,
 					},
 				},
-				{
-					type: "SET_CUSTOMIZATION",
-					field: "organizationId",
-					value: "org-123",
-				},
 				{ type: "SET_HAS_PROVISIONERS", value: true },
 				{ type: "RESET_CUSTOMIZATIONS" },
 			]);
-			expect(state.organizationId).toBeUndefined();
 			expect(state.hasProvisioners).toBeUndefined();
 			// Base-derived fields survive so re-entering the step stays filled.
 			expect(state.name).toBe("docker");
@@ -524,14 +512,19 @@ describe("toCreateTemplateRequest", () => {
 		const state: TemplateBuilderWizardState = {
 			...initialWizardState,
 			baseTemplateId: "docker",
-			organizationId: "org-123",
 			name: "my-template",
 			displayName: "My Template",
 			description: "A test template",
 			icon: "/icon/docker.svg",
 			modules: [{ id: "code-server" }],
 		};
-		const request = toCreateTemplateRequest(state);
+		const request = toCreateTemplateRequest(state, {
+			organization_id: "org-123",
+			name: "my-template",
+			display_name: "My Template",
+			description: "A test template",
+			icon: "/icon/docker.svg",
+		});
 		expect(request.base_template_id).toBe("docker");
 		expect(request.organization_id).toBe("org-123");
 		expect(request.name).toBe("my-template");
@@ -547,7 +540,13 @@ describe("toCreateTemplateRequest", () => {
 			baseTemplateId: "docker",
 			name: "my-template",
 		};
-		const request = toCreateTemplateRequest(state);
+		const request = toCreateTemplateRequest(state, {
+			organization_id: "",
+			name: "my-template",
+			display_name: "",
+			description: "",
+			icon: "",
+		});
 		expect(request.display_name).toBeUndefined();
 		expect(request.description).toBeUndefined();
 		expect(request.icon).toBeUndefined();
diff --git a/site/src/pages/TemplateBuilder/wizardState.ts b/site/src/pages/TemplateBuilder/wizardState.ts
index 185851e2241..55727124b07 100644
--- a/site/src/pages/TemplateBuilder/wizardState.ts
+++ b/site/src/pages/TemplateBuilder/wizardState.ts
@@ -71,7 +71,6 @@ export type TemplateBuilderWizardState = {
 	baseTemplateId: string | null;
 	baseVariableValues: Record<string, string>;
 	modules: TemplateBuilderComposeModule[];
-	organizationId?: string;
 	hasProvisioners: boolean | undefined;
 	name: string;
 	displayName: string;
@@ -144,7 +143,7 @@ export type WizardAction =
 	  }
 	| {
 			type: "SET_CUSTOMIZATION";
-			field: "organizationId" | "name" | "displayName" | "description" | "icon";
+			field: "name" | "displayName" | "description" | "icon";
 			value: string;
 	  }
 	| { type: "SET_HAS_PROVISIONERS"; value: boolean | undefined }
@@ -211,12 +210,12 @@ export function wizardReducer(
 				hasProvisioners: action.value,
 			};
 		case "RESET_CUSTOMIZATIONS":
-			// Reset only organization and provisioner detection so re-entering the
-			// step re-runs org auto-select cleanly. The base-derived fields are
-			// left intact (they are re-seeded by SET_BASE when the base changes).
+			// Reset provisioner detection so re-entering the step re-detects
+			// provisioners. The organization lives in the step's form and is
+			// re-selected on remount; base-derived fields are left intact (they
+			// are re-seeded by SET_BASE when the base changes).
 			return {
 				...state,
-				organizationId: undefined,
 				hasProvisioners: undefined,
 			};
 		case "RESET":
@@ -253,18 +252,31 @@ export const toComposeRequest = (
 };
 
 /**
- * Project wizard state into the API request shape for the
- * create-template endpoint.
+ * Values owned by the Formik-backed customizations step. Kept separate from
+ * the reducer state, which only seeds their initial (base-derived) defaults.
+ */
+export type CustomizationsFormValues = {
+	organization_id: string;
+	name: string;
+	display_name: string;
+	description: string;
+	icon: string;
+};
+
+/**
+ * Project wizard state and the submitted customization values into the API
+ * request shape for the create-template endpoint.
  */
 export const toCreateTemplateRequest = (
 	state: TemplateBuilderWizardState,
+	customizations: CustomizationsFormValues,
 ): TemplateBuilderCreateTemplateRequest => {
 	return {
 		...toComposeRequest(state),
-		organization_id: state.organizationId ?? "",
-		name: state.name,
-		display_name: state.displayName || undefined,
-		description: state.description || undefined,
-		icon: state.icon || undefined,
+		organization_id: customizations.organization_id,
+		name: customizations.name,
+		display_name: customizations.display_name || undefined,
+		description: customizations.description || undefined,
+		icon: customizations.icon || undefined,
 	};
 };