diff --git a/frontend/src/app/AppRouter.tsx b/frontend/src/app/AppRouter.tsx
index f3ab640ef0..86e7930be4 100644
--- a/frontend/src/app/AppRouter.tsx
+++ b/frontend/src/app/AppRouter.tsx
@@ -6,7 +6,7 @@ import {
   ADMINFORM_ROUTE,
   ADMINFORM_SETTINGS_SUBROUTE,
   LOGIN_ROUTE,
-  PUBLIC_FORM_REGEX,
+  PUBLICFORM_ROUTE,
   ROOT_ROUTE,
 } from '~constants/routes'
 
@@ -37,7 +37,7 @@ export const AppRouter = (): JSX.Element => {
           element={<PublicElement strict element={<LoginPage />} />}
         />
         <Route
-          path={PUBLIC_FORM_REGEX}
+          path={PUBLICFORM_ROUTE}
           element={<PublicElement element={<PublicFormPage />} />}
         />
         <Route
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index 05a29ed599..952b73ccf6 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -3,11 +3,10 @@ export const LANDING_ROUTE = '/'
 export const ROOT_ROUTE = '/'
 export const LOGIN_ROUTE = '/login'
 
-const PUBLIC_FORM_PARAM = 'formId'
-/** Used for typing useParams in PublicFormPage. */
-export type PublicFormParam = { [PUBLIC_FORM_PARAM]: string }
-export const PUBLIC_FORM_REGEX =
-  `/:${PUBLIC_FORM_PARAM}([a-fA-F0-9]{24})` as const
+// Cannot use regex match in react-router@6, which means we need to validate
+// the regex in PublicFormPage.
+export const PUBLICFORM_ROUTE = '/:formId'
+export const PUBLICFORM_REGEX = /^([a-fA-F0-9]{24})$/
 
 export const ADMINFORM_ROUTE = '/admin/form'
 /** Build tab has no subroute, its the index admin form route. */
diff --git a/frontend/src/features/public-form/PublicFormPage.stories.tsx b/frontend/src/features/public-form/PublicFormPage.stories.tsx
index 3644e52d61..2c6800f17f 100644
--- a/frontend/src/features/public-form/PublicFormPage.stories.tsx
+++ b/frontend/src/features/public-form/PublicFormPage.stories.tsx
@@ -11,7 +11,7 @@ export default {
   component: PublicFormPage,
   decorators: [
     StoryRouter({
-      initialEntries: ['/12345'],
+      initialEntries: ['/61540ece3d4a6e50ac0cc6ff'],
       path: '/:formId',
     }),
   ],
diff --git a/frontend/src/features/public-form/PublicFormPage.tsx b/frontend/src/features/public-form/PublicFormPage.tsx
index dc9c9b0cbc..20e3a03836 100644
--- a/frontend/src/features/public-form/PublicFormPage.tsx
+++ b/frontend/src/features/public-form/PublicFormPage.tsx
@@ -1,5 +1,7 @@
+import { useParams } from 'react-router-dom'
 import { Flex } from '@chakra-ui/react'
 
+import { PUBLICFORM_REGEX } from '~constants/routes'
 import { HttpError } from '~services/ApiService'
 
 import FormFields from './components/FormFields'
@@ -8,9 +10,14 @@ import { PublicFormProvider } from './PublicFormContext'
 import { usePublicFormView } from './queries'
 
 export const PublicFormPage = (): JSX.Element => {
+  const { formId } = useParams()
   const { error } = usePublicFormView()
 
-  if (error instanceof HttpError && error.code === 404) {
+  if (
+    !formId ||
+    !PUBLICFORM_REGEX.test(formId) ||
+    (error instanceof HttpError && error.code === 404)
+  ) {
     return <div>404</div>
   }
 
diff --git a/frontend/src/features/public-form/components/FormStartPage/FormStartPage.stories.tsx b/frontend/src/features/public-form/components/FormStartPage/FormStartPage.stories.tsx
index 83caec1c2e..ca961fbd5d 100644
--- a/frontend/src/features/public-form/components/FormStartPage/FormStartPage.stories.tsx
+++ b/frontend/src/features/public-form/components/FormStartPage/FormStartPage.stories.tsx
@@ -24,7 +24,7 @@ export default {
   component: FormStartPage,
   decorators: [
     StoryRouter({
-      initialEntries: ['/12345'],
+      initialEntries: ['/61540ece3d4a6e50ac0cc6ff'],
       path: '/:formId',
     }),
     (storyFn) => <PublicFormProvider>{storyFn()}</PublicFormProvider>,
diff --git a/frontend/src/features/public-form/queries.ts b/frontend/src/features/public-form/queries.ts
index 2160a2423b..710f374808 100644
--- a/frontend/src/features/public-form/queries.ts
+++ b/frontend/src/features/public-form/queries.ts
@@ -5,6 +5,8 @@ import { PublicFormViewDto } from '~shared/types/form/form'
 
 import { ApiError } from '~typings/core'
 
+import { PUBLICFORM_REGEX } from '~constants/routes'
+
 import { getPublicFormView } from './PublicFormService'
 
 const publicFormKeys = {
@@ -21,8 +23,12 @@ export const usePublicFormView = (): UseQueryResult<
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
 
-  return useQuery<PublicFormViewDto, ApiError>(publicFormKeys.id(formId), () =>
-    getPublicFormView(formId),
+  return useQuery<PublicFormViewDto, ApiError>(
+    publicFormKeys.id(formId),
+    () => getPublicFormView(formId),
+    {
+      enabled: PUBLICFORM_REGEX.test(formId),
+    },
   )
 }