From ff1b5cc75b1719ef47ddcf53f1946426951521b9 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Wed, 20 May 2026 17:25:25 +0800
Subject: [PATCH 1/7] feat: default CreateFormModal to MRF with escape-hatch
 link to storage mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When mrf-cutover is on, the create-form details screen no longer offers
a response-mode choice — Multirespondent is the implicit default. An
"old version of FormSG" link composed from the user's beta flags
navigates to a new storage-mode-only screen (title + create + back).
Submitting routes through the existing storage-mode mutation.

Closes #9453.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../CreateFormModal.stories.tsx               |  54 ++++++++-
 .../CreateFormDetailsScreen.tsx               | 110 ++++++++++--------
 .../CreateFormModalContent.tsx                |   4 +
 .../CreateFormStorageModeScreen.tsx           | 107 +++++++++++++++++
 .../EscapeHatchLink.tsx                       |  26 +++++
 5 files changed, 252 insertions(+), 49 deletions(-)
 create mode 100644 apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
 create mode 100644 apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/EscapeHatchLink.tsx

diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModal.stories.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModal.stories.tsx
index 424830a7b7..0a1210989b 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModal.stories.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModal.stories.tsx
@@ -9,13 +9,15 @@ import {
   useClipboard,
   useDisclosure,
 } from '@chakra-ui/react'
+import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react'
 import { Meta, StoryFn } from '@storybook/react'
 
+import { featureFlags } from 'formsg-shared/constants'
 import { UserId } from 'formsg-shared/types'
 import { PublicFormViewDto } from 'formsg-shared/types/form'
 import { Workspace, WorkspaceId } from 'formsg-shared/types/workspace'
 
-import { userHandlers } from '~/mocks/msw/handlers/user'
+import { getUser, MOCK_USER, userHandlers } from '~/mocks/msw/handlers/user'
 
 import { ApiError } from '~typings/core'
 
@@ -81,6 +83,56 @@ const Template: StoryFn<CreateFormModalProps> = (args) => {
 }
 export const Default = Template.bind({})
 
+const mrfCutoverOn = new GrowthBook({
+  features: { [featureFlags.mrfCutover]: { defaultValue: true } },
+})
+
+export const MrfCutoverOn = Template.bind({})
+MrfCutoverOn.decorators = [
+  (Story) => (
+    <GrowthBookProvider growthbook={mrfCutoverOn}>
+      <Story />
+    </GrowthBookProvider>
+  ),
+]
+
+export const MrfCutoverOnChildrenBeta = Template.bind({})
+MrfCutoverOnChildrenBeta.decorators = [
+  (Story) => (
+    <GrowthBookProvider growthbook={mrfCutoverOn}>
+      <Story />
+    </GrowthBookProvider>
+  ),
+]
+MrfCutoverOnChildrenBeta.parameters = {
+  msw: [
+    getUser({
+      delay: 0,
+      mockUser: { ...MOCK_USER, betaFlags: { children: true } },
+    }),
+  ],
+}
+
+export const MrfCutoverOnWebhookV1Beta = Template.bind({})
+MrfCutoverOnWebhookV1Beta.decorators = [
+  (Story) => (
+    <GrowthBookProvider growthbook={mrfCutoverOn}>
+      <Story />
+    </GrowthBookProvider>
+  ),
+]
+MrfCutoverOnWebhookV1Beta.parameters = {
+  msw: [
+    getUser({
+      delay: 0,
+      mockUser: {
+        ...MOCK_USER,
+        betaFlags: { createStorageModeForV1Webhook: true },
+      },
+    }),
+  ],
+}
+
 export const StorageModeAckScreen = () => {
   const secretKey = 'mock-secret-key'
 
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx
index 7bd9c253a1..35ba7cd1fd 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx
@@ -29,6 +29,7 @@ import {
 } from '../CreateFormWizardContext'
 
 import { EmailFormRecipientsInput } from './EmailFormRecipientsInput'
+import { EscapeHatchLink } from './EscapeHatchLink'
 import { FormResponseOptions } from './FormResponseOptions'
 
 /** The length of form title to start showing warning text */
@@ -63,6 +64,8 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
     modalHeader,
     isSingpass,
     hasMyInfoChildren,
+    isMrfCutoverEnabled,
+    goToStorageModeDetails,
   } = useCreateFormWizard()
   const {
     register,
@@ -113,63 +116,74 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
               </FormFieldMessage>
             ) : null}
           </FormControl>
-          <FormControl isRequired isInvalid={!!errors.responseMode} mb="2.5rem">
-            <FormLabel
-              description={t(
-                'features.workspace.modals.forms.create.details.type.description',
-              )}
-            >
-              {t('features.workspace.modals.forms.create.details.type.label')}
-            </FormLabel>
-            <Skeleton isLoaded={!isFetching}>
-              <Controller
-                name="responseMode"
-                control={control}
-                render={({ field }) => (
-                  <FormResponseOptions
-                    {...field}
-                    hasMyInfoChildren={hasMyInfoChildren}
-                    handleEmailButtonPress={handleEmailButtonPress}
-                  />
-                )}
-                rules={{
-                  required: t(
-                    'features.workspace.modals.forms.create.errors.responseMode.required',
-                  ),
-                }}
-              />
-            </Skeleton>
-            <FormErrorMessage>{errors.responseMode?.message}</FormErrorMessage>
-            {hasMyInfoChildren && (
-              <InlineMessage mt="2rem">
-                {t(
-                  'features.workspace.modals.forms.create.errors.noMyInfoChildrenInMrf',
-                )}
-              </InlineMessage>
-            )}
-          </FormControl>
-          {(responseModeValue === FormResponseMode.Encrypt ||
-            responseModeValue === FormResponseMode.Email) && (
+          {isMrfCutoverEnabled ? (
+            <EscapeHatchLink onClick={goToStorageModeDetails} />
+          ) : (
             <FormControl
-              isRequired={responseModeValue === FormResponseMode.Email}
-              isInvalid={!!errors.emails}
-              mb="2.25rem"
+              isRequired
+              isInvalid={!!errors.responseMode}
+              mb="2.5rem"
             >
               <FormLabel
-                isRequired={responseModeValue === FormResponseMode.Email}
-                useMarkdownForDescription
                 description={t(
-                  'features.workspace.modals.forms.create.details.notifications.description',
-                  { GUIDE_PREVENT_EMAIL_BOUNCE },
+                  'features.workspace.modals.forms.create.details.type.description',
                 )}
               >
-                {t(
-                  'features.workspace.modals.forms.create.details.notifications.label',
-                )}
+                {t('features.workspace.modals.forms.create.details.type.label')}
               </FormLabel>
-              <EmailFormRecipientsInput />
+              <Skeleton isLoaded={!isFetching}>
+                <Controller
+                  name="responseMode"
+                  control={control}
+                  render={({ field }) => (
+                    <FormResponseOptions
+                      {...field}
+                      hasMyInfoChildren={hasMyInfoChildren}
+                      handleEmailButtonPress={handleEmailButtonPress}
+                    />
+                  )}
+                  rules={{
+                    required: t(
+                      'features.workspace.modals.forms.create.errors.responseMode.required',
+                    ),
+                  }}
+                />
+              </Skeleton>
+              <FormErrorMessage>
+                {errors.responseMode?.message}
+              </FormErrorMessage>
+              {hasMyInfoChildren && (
+                <InlineMessage mt="2rem">
+                  {t(
+                    'features.workspace.modals.forms.create.errors.noMyInfoChildrenInMrf',
+                  )}
+                </InlineMessage>
+              )}
             </FormControl>
           )}
+          {!isMrfCutoverEnabled &&
+            (responseModeValue === FormResponseMode.Encrypt ||
+              responseModeValue === FormResponseMode.Email) && (
+              <FormControl
+                isRequired={responseModeValue === FormResponseMode.Email}
+                isInvalid={!!errors.emails}
+                mb="2.25rem"
+              >
+                <FormLabel
+                  isRequired={responseModeValue === FormResponseMode.Email}
+                  useMarkdownForDescription
+                  description={t(
+                    'features.workspace.modals.forms.create.details.notifications.description',
+                    { GUIDE_PREVENT_EMAIL_BOUNCE },
+                  )}
+                >
+                  {t(
+                    'features.workspace.modals.forms.create.details.notifications.label',
+                  )}
+                </FormLabel>
+                <EmailFormRecipientsInput />
+              </FormControl>
+            )}
           <DataClassificationInfoBox />
           <Button
             rightIcon={<BiRightArrowAlt fontSize="1.5rem" />}
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormModalContent.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormModalContent.tsx
index 561047050e..1fabe284e2 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormModalContent.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormModalContent.tsx
@@ -8,6 +8,7 @@ import {
 } from '../CreateFormWizardContext'
 
 import { CreateFormDetailsScreen } from './CreateFormDetailsScreen'
+import { CreateFormStorageModeScreen } from './CreateFormStorageModeScreen'
 import {
   EmailModeCreationScreen,
   EmailModeFeedbackScreen,
@@ -28,6 +29,9 @@ export const CreateFormModalContent = () => {
         {currentStep === CreateFormFlowStates.Details && (
           <CreateFormDetailsScreen />
         )}
+        {currentStep === CreateFormFlowStates.StorageModeDetails && (
+          <CreateFormStorageModeScreen />
+        )}
         {currentStep === CreateFormFlowStates.Landing && (
           <SaveSecretKeyScreen />
         )}
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
new file mode 100644
index 0000000000..f741fc8383
--- /dev/null
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
@@ -0,0 +1,107 @@
+import { RegisterOptions } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { BiArrowBack, BiRightArrowAlt } from 'react-icons/bi'
+import {
+  Container,
+  Flex,
+  FormControl,
+  ModalBody,
+  ModalHeader,
+  Skeleton,
+  Text,
+} from '@chakra-ui/react'
+
+import { useFormTitleValidationRules } from '~utils/formValidation'
+import Button from '~components/Button'
+import FormErrorMessage from '~components/FormControl/FormErrorMessage'
+import FormFieldMessage from '~components/FormControl/FormFieldMessage'
+import FormLabel from '~components/FormControl/FormLabel'
+import IconButton from '~components/IconButton'
+import Input from '~components/Input'
+
+import {
+  CreateFormWizardInputProps,
+  useCreateFormWizard,
+} from '../CreateFormWizardContext'
+
+const FORM_TITLE_LENGTH_WARNING = 65
+
+export const CreateFormStorageModeScreen = (): JSX.Element => {
+  const { t } = useTranslation()
+  const {
+    formMethods,
+    handleCreateStorageModeOrMultirespondentForm,
+    isLoading,
+    isFetching,
+    goToMrfDetails,
+  } = useCreateFormWizard()
+  const {
+    register,
+    formState: { errors },
+    watch,
+  } = formMethods
+
+  const titleInputValue = watch('title')
+  const formTitleValidationRules = useFormTitleValidationRules()
+
+  return (
+    <>
+      <ModalHeader color="secondary.700">
+        <Container maxW="45rem" p={0}>
+          <Flex align="center">
+            <IconButton
+              variant="clear"
+              aria-label="Back"
+              icon={<BiArrowBack />}
+              onClick={goToMrfDetails}
+              mr="0.5rem"
+            />
+            {t('features.workspace.modals.forms.create.title.setup')}
+          </Flex>
+        </Container>
+      </ModalHeader>
+      <ModalBody whiteSpace="pre-wrap">
+        <Container maxW="45rem" p={0}>
+          <FormControl isRequired isInvalid={!!errors.title} mb="2.25rem">
+            <FormLabel useMarkdownForDescription>
+              {t('features.workspace.modals.forms.create.details.name.label')}
+            </FormLabel>
+            <Skeleton isLoaded={!isFetching}>
+              <Input
+                autoFocus
+                {...register(
+                  'title',
+                  formTitleValidationRules as RegisterOptions<
+                    CreateFormWizardInputProps,
+                    'title'
+                  >,
+                )}
+              />
+            </Skeleton>
+            <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
+            {titleInputValue?.length > FORM_TITLE_LENGTH_WARNING ? (
+              <FormFieldMessage>
+                {t(
+                  'features.workspace.modals.forms.create.details.name.message',
+                )}
+              </FormFieldMessage>
+            ) : null}
+          </FormControl>
+          <Button
+            rightIcon={<BiRightArrowAlt fontSize="1.5rem" />}
+            type="submit"
+            isLoading={isLoading}
+            isDisabled={isFetching}
+            onClick={handleCreateStorageModeOrMultirespondentForm}
+            isFullWidth
+            data-dd-action-name="dashboard.create.create_encrypt"
+          >
+            <Text lineHeight="1.5rem">
+              {t('features.workspace.modals.forms.create.details.create')}
+            </Text>
+          </Button>
+        </Container>
+      </ModalBody>
+    </>
+  )
+}
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/EscapeHatchLink.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/EscapeHatchLink.tsx
new file mode 100644
index 0000000000..f357ee6a7e
--- /dev/null
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/EscapeHatchLink.tsx
@@ -0,0 +1,26 @@
+import { Text } from '@chakra-ui/react'
+
+import { composeEscapeHatchCopy } from '~utils/escapeHatchCopy'
+import Link from '~components/Link'
+
+import { useUser } from '~features/user/queries'
+
+interface EscapeHatchLinkProps {
+  onClick: () => void
+}
+
+export const EscapeHatchLink = ({
+  onClick,
+}: EscapeHatchLinkProps): JSX.Element => {
+  const { user } = useUser()
+  const { prefix, linkText, suffix } = composeEscapeHatchCopy(user?.betaFlags)
+  return (
+    <Text textStyle="body-2" color="secondary.500">
+      {prefix}
+      <Link cursor="pointer" onClick={onClick}>
+        {linkText}
+      </Link>
+      {suffix}
+    </Text>
+  )
+}

From 6bdfce5ae4d44fcb1bcb625ccf9b4a0f107b6bb4 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Wed, 20 May 2026 17:40:14 +0800
Subject: [PATCH 2/7] fix(create-form-modal): match Figma fidelity for cutover
 flow

- Wrap escape-hatch link in an info InlineMessage to match Figma
- Storage-mode page header reads "Set up a Storage mode form"
- Add storage-mode subtitle explaining that storage mode is outdated

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../CreateFormStorageModeScreen.tsx             |  7 ++++++-
 .../CreateFormModalContent/EscapeHatchLink.tsx  | 17 ++++++++++-------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
index f741fc8383..166fd91561 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
@@ -56,12 +56,17 @@ export const CreateFormStorageModeScreen = (): JSX.Element => {
               onClick={goToMrfDetails}
               mr="0.5rem"
             />
-            {t('features.workspace.modals.forms.create.title.setup')}
+            Set up a Storage mode form
           </Flex>
         </Container>
       </ModalHeader>
       <ModalBody whiteSpace="pre-wrap">
         <Container maxW="45rem" p={0}>
+          <Text textStyle="body-2" color="secondary.500" mb="2rem">
+            Storage mode is outdated and no longer receives new features. Only
+            use this if you need a feature not yet available in the current
+            version.
+          </Text>
           <FormControl isRequired isInvalid={!!errors.title} mb="2.25rem">
             <FormLabel useMarkdownForDescription>
               {t('features.workspace.modals.forms.create.details.name.label')}
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/EscapeHatchLink.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/EscapeHatchLink.tsx
index f357ee6a7e..d84520667c 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/EscapeHatchLink.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/EscapeHatchLink.tsx
@@ -1,6 +1,7 @@
 import { Text } from '@chakra-ui/react'
 
 import { composeEscapeHatchCopy } from '~utils/escapeHatchCopy'
+import InlineMessage from '~components/InlineMessage'
 import Link from '~components/Link'
 
 import { useUser } from '~features/user/queries'
@@ -15,12 +16,14 @@ export const EscapeHatchLink = ({
   const { user } = useUser()
   const { prefix, linkText, suffix } = composeEscapeHatchCopy(user?.betaFlags)
   return (
-    <Text textStyle="body-2" color="secondary.500">
-      {prefix}
-      <Link cursor="pointer" onClick={onClick}>
-        {linkText}
-      </Link>
-      {suffix}
-    </Text>
+    <InlineMessage variant="info">
+      <Text>
+        {prefix}
+        <Link cursor="pointer" onClick={onClick}>
+          {linkText}
+        </Link>
+        {suffix}
+      </Text>
+    </InlineMessage>
   )
 }

From f1b5ba390e0de537b8f34044c0299e6f297cac30 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Wed, 20 May 2026 17:46:50 +0800
Subject: [PATCH 3/7] fix(create-form-modal): hide data-classification infobox
 + use 2.5rem spacing in cutover flow

The MRF default screen previously showed both the escape-hatch infobox
and the existing data-classification infobox, cluttering the layout.
The cutover Figma drops the latter and uses 2.5rem rhythm around the
escape-hatch infobox and between input/button on the storage-mode page.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../CreateFormModalContent/CreateFormDetailsScreen.tsx    | 8 +++++---
 .../CreateFormStorageModeScreen.tsx                       | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx
index 35ba7cd1fd..af16ac68b6 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx
@@ -2,6 +2,7 @@ import { Controller, RegisterOptions } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { BiRightArrowAlt } from 'react-icons/bi'
 import {
+  Box,
   Container,
   FormControl,
   ModalBody,
@@ -62,7 +63,6 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
     isLoading,
     isFetching,
     modalHeader,
-    isSingpass,
     hasMyInfoChildren,
     isMrfCutoverEnabled,
     goToStorageModeDetails,
@@ -117,7 +117,9 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
             ) : null}
           </FormControl>
           {isMrfCutoverEnabled ? (
-            <EscapeHatchLink onClick={goToStorageModeDetails} />
+            <Box my="2.5rem">
+              <EscapeHatchLink onClick={goToStorageModeDetails} />
+            </Box>
           ) : (
             <FormControl
               isRequired
@@ -184,7 +186,7 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
                 <EmailFormRecipientsInput />
               </FormControl>
             )}
-          <DataClassificationInfoBox />
+          {!isMrfCutoverEnabled && <DataClassificationInfoBox />}
           <Button
             rightIcon={<BiRightArrowAlt fontSize="1.5rem" />}
             type="submit"
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
index 166fd91561..7d06b7934d 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
@@ -67,7 +67,7 @@ export const CreateFormStorageModeScreen = (): JSX.Element => {
             use this if you need a feature not yet available in the current
             version.
           </Text>
-          <FormControl isRequired isInvalid={!!errors.title} mb="2.25rem">
+          <FormControl isRequired isInvalid={!!errors.title} mb="2.5rem">
             <FormLabel useMarkdownForDescription>
               {t('features.workspace.modals.forms.create.details.name.label')}
             </FormLabel>

From 2643422cff311e2083c597563270513004469b78 Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Wed, 20 May 2026 18:55:24 +0800
Subject: [PATCH 4/7] fix: sliding animation bug and undefined email during
 escape hatch flow

---
 .../CreateFormModal/CreateFormWizardProvider.tsx           | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx
index c397c83c9b..83ec44178f 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx
@@ -56,9 +56,10 @@ export const useCommonFormWizardProvider = ({
 
   const { setValue } = formMethods
 
+  // TODO [MRF-CUTOVER]: Remove after cutover. -1 is used temporarily as there is an existing animation bug with +1.
   const goToStorageModeDetails = () => {
     setValue('responseMode', FormResponseMode.Encrypt)
-    setCurrentStep([CreateFormFlowStates.StorageModeDetails, 1])
+    setCurrentStep([CreateFormFlowStates.StorageModeDetails, -1])
   }
   const goToMrfDetails = () => {
     setValue('responseMode', FormResponseMode.Multirespondent)
@@ -125,7 +126,9 @@ const useCreateFormWizardContext = (
               responseMode,
               publicKey: keypair.publicKey,
               workspaceId,
-              emails: emails.filter(Boolean),
+              // NOTE (MRF-CUTOVER): During the cutover modal flow, there is no emails input.
+              emails:
+                emails.filter(Boolean) || (user?.email ? [user.email] : []),
             },
             {
               onSuccess: () => {

From 9965cf9b248664147bb356f6ad68fad6ea4ca0bc Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Wed, 20 May 2026 18:59:54 +0800
Subject: [PATCH 5/7] feat: add story for all 3 exceptions

---
 .../CreateFormModal.stories.tsx               | 23 +++++++++++++++++++
 .../CreateFormWizardProvider.tsx              |  8 +++----
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModal.stories.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModal.stories.tsx
index 0a1210989b..3fa71ecca7 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModal.stories.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModal.stories.tsx
@@ -133,6 +133,29 @@ MrfCutoverOnWebhookV1Beta.parameters = {
   ],
 }
 
+export const MrfCutoverOnAllExceptions = Template.bind({})
+MrfCutoverOnAllExceptions.decorators = [
+  (Story) => (
+    <GrowthBookProvider growthbook={mrfCutoverOn}>
+      <Story />
+    </GrowthBookProvider>
+  ),
+]
+MrfCutoverOnAllExceptions.parameters = {
+  msw: [
+    getUser({
+      delay: 0,
+      mockUser: {
+        ...MOCK_USER,
+        betaFlags: {
+          children: true,
+          createStorageModeForV1Webhook: true,
+        },
+      },
+    }),
+  ],
+}
+
 export const StorageModeAckScreen = () => {
   const secretKey = 'mock-secret-key'
 
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx
index 83ec44178f..3653213773 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx
@@ -119,16 +119,15 @@ const useCreateFormWizardContext = (
   const handleCreateStorageModeOrMultirespondentForm = handleSubmit(
     ({ title, responseMode, emails }) => {
       switch (responseMode) {
-        case FormResponseMode.Encrypt:
+        case FormResponseMode.Encrypt: {
+          const cutoverDefaultEmails = user?.email ? [user.email] : []
           return createStorageModeFormMutation.mutate(
             {
               title,
               responseMode,
               publicKey: keypair.publicKey,
               workspaceId,
-              // NOTE (MRF-CUTOVER): During the cutover modal flow, there is no emails input.
-              emails:
-                emails.filter(Boolean) || (user?.email ? [user.email] : []),
+              emails: emails ? emails.filter(Boolean) : cutoverDefaultEmails,
             },
             {
               onSuccess: () => {
@@ -136,6 +135,7 @@ const useCreateFormWizardContext = (
               },
             },
           )
+        }
         case FormResponseMode.Email:
           return
         case FormResponseMode.Multirespondent:

From 380351f4ff0ed982b149b61c1122ab9ef5e591dd Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Thu, 4 Jun 2026 10:50:58 +0800
Subject: [PATCH 6/7] fix: acknowledge emails undefined to prevent type
 violation

---
 .../UseTemplateModal/UseTemplateWizardProvider.tsx        | 5 +++--
 .../CreateFormModal/CreateFormWizardContext.tsx           | 2 +-
 .../CreateFormModal/CreateFormWizardProvider.tsx          | 6 +++---
 .../DuplicateFormModal/DupeFormWizardProvider.tsx         | 8 +++++---
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateWizardProvider.tsx b/apps/frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateWizardProvider.tsx
index 4cc12b5c5c..83ae4fa866 100644
--- a/apps/frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateWizardProvider.tsx
+++ b/apps/frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateWizardProvider.tsx
@@ -75,13 +75,14 @@ export const useUseTemplateWizardContext = (
       if (!formId) return
       switch (responseMode) {
         case FormResponseMode.Encrypt: {
+          const defaultEmails = adminEmail ? [adminEmail] : []
           return useStorageModeFormTemplateMutation.mutate(
             {
               formIdToDuplicate: formId,
               title,
               responseMode,
               publicKey: keypair.publicKey,
-              emails: emails.filter(Boolean),
+              emails: (emails ?? defaultEmails).filter(Boolean),
             },
             {
               onSuccess: () => {
@@ -152,7 +153,7 @@ export const useUseTemplateWizardContext = (
     handleSubmit((inputs) => {
       return useEmailModeFormTemplateMutation.mutate({
         formIdToDuplicate: formId,
-        emails: inputs.emails.filter(Boolean),
+        emails: (inputs.emails ?? []).filter(Boolean),
         title: inputs.title,
         responseMode: FormResponseMode.Email,
       })
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardContext.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardContext.tsx
index 0abe037131..abcb8a6611 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardContext.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardContext.tsx
@@ -23,7 +23,7 @@ export interface CreateFormWizardInputProps {
   title: string
   responseMode: FormResponseMode
   // Email form props
-  emails: string[]
+  emails?: string[]
   // Storage form props
   storageAck?: boolean
 
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx
index 3653213773..4cc5726144 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx
@@ -120,14 +120,14 @@ const useCreateFormWizardContext = (
     ({ title, responseMode, emails }) => {
       switch (responseMode) {
         case FormResponseMode.Encrypt: {
-          const cutoverDefaultEmails = user?.email ? [user.email] : []
+          const defaultEmails = adminEmail ? [adminEmail] : []
           return createStorageModeFormMutation.mutate(
             {
               title,
               responseMode,
               publicKey: keypair.publicKey,
               workspaceId,
-              emails: emails ? emails.filter(Boolean) : cutoverDefaultEmails,
+              emails: (emails ?? defaultEmails).filter(Boolean),
             },
             {
               onSuccess: () => {
@@ -200,7 +200,7 @@ const useCreateFormWizardContext = (
   const handleCreateEmailModeForm = () => {
     return handleSubmit((inputs) => {
       createEmailModeFormMutation.mutate({
-        emails: inputs.emails.filter(Boolean),
+        emails: (inputs.emails ?? []).filter(Boolean),
         title: inputs.title,
         responseMode: FormResponseMode.Email,
         workspaceId,
diff --git a/apps/frontend/src/features/workspace/components/DuplicateFormModal/DupeFormWizardProvider.tsx b/apps/frontend/src/features/workspace/components/DuplicateFormModal/DupeFormWizardProvider.tsx
index c72260d8f3..ac9418e7fb 100644
--- a/apps/frontend/src/features/workspace/components/DuplicateFormModal/DupeFormWizardProvider.tsx
+++ b/apps/frontend/src/features/workspace/components/DuplicateFormModal/DupeFormWizardProvider.tsx
@@ -105,7 +105,8 @@ export const useDupeFormWizardContext = (
       }
 
       switch (responseMode) {
-        case FormResponseMode.Encrypt:
+        case FormResponseMode.Encrypt: {
+          const defaultEmails = adminEmail ? [adminEmail] : []
           return dupeStorageModeFormMutation.mutate(
             {
               formIdToDuplicate: sourceFormId,
@@ -113,7 +114,7 @@ export const useDupeFormWizardContext = (
               responseMode,
               publicKey: keypair.publicKey,
               workspaceId,
-              emails: emails.filter(Boolean),
+              emails: (emails ?? defaultEmails).filter(Boolean),
             },
             {
               onSuccess: () => {
@@ -121,6 +122,7 @@ export const useDupeFormWizardContext = (
               },
             },
           )
+        }
         case FormResponseMode.Email:
           return
         case FormResponseMode.Multirespondent:
@@ -185,7 +187,7 @@ export const useDupeFormWizardContext = (
 
       return dupeEmailModeFormMutation.mutate({
         formIdToDuplicate: sourceFormId,
-        emails: inputs.emails.filter(Boolean),
+        emails: (inputs.emails ?? []).filter(Boolean),
         title: inputs.title,
         responseMode: FormResponseMode.Email,
         workspaceId,

From 3ea0349d0774e6172034760a78e540be28b60afd Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Thu, 4 Jun 2026 10:59:51 +0800
Subject: [PATCH 7/7] feat(fe-quality): abstract duplicated form title input
 into its own reusable component

---
 .../CreateFormDetailsScreen.tsx               | 44 ++-----------
 .../CreateFormStorageModeScreen.tsx           | 58 ++---------------
 .../CreateFormModalContent/FormTitleInput.tsx | 62 +++++++++++++++++++
 3 files changed, 70 insertions(+), 94 deletions(-)
 create mode 100644 apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/FormTitleInput.tsx

diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx
index af16ac68b6..1bcc3b73ec 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx
@@ -1,4 +1,4 @@
-import { Controller, RegisterOptions } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { BiRightArrowAlt } from 'react-icons/bi'
 import {
@@ -14,27 +14,19 @@ import {
 import { FormResponseMode } from 'formsg-shared/types/form/form'
 
 import { GUIDE_PREVENT_EMAIL_BOUNCE } from '~constants/links'
-import { useFormTitleValidationRules } from '~utils/formValidation'
 import Button from '~components/Button'
 import FormErrorMessage from '~components/FormControl/FormErrorMessage'
-import FormFieldMessage from '~components/FormControl/FormFieldMessage'
 import FormLabel from '~components/FormControl/FormLabel'
 import InlineMessage from '~components/InlineMessage'
-import Input from '~components/Input'
 
 import DataClassificationInfoBox from '~features/admin-form/settings/components/DataClassificationInfoBox'
 
-import {
-  CreateFormWizardInputProps,
-  useCreateFormWizard,
-} from '../CreateFormWizardContext'
+import { useCreateFormWizard } from '../CreateFormWizardContext'
 
 import { EmailFormRecipientsInput } from './EmailFormRecipientsInput'
 import { EscapeHatchLink } from './EscapeHatchLink'
 import { FormResponseOptions } from './FormResponseOptions'
-
-/** The length of form title to start showing warning text */
-const FORM_TITLE_LENGTH_WARNING = 65
+import { FormTitleInput } from './FormTitleInput'
 
 const getTrackingSubmissionActionName = (
   responseModeValue: FormResponseMode,
@@ -68,20 +60,16 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
     goToStorageModeDetails,
   } = useCreateFormWizard()
   const {
-    register,
     control,
     formState: { errors },
     watch,
   } = formMethods
 
-  const titleInputValue = watch('title')
   const responseModeValue = watch('responseMode')
   const handleEmailButtonPress = () => {
     handleEmailFeedbackSubmit()
   }
 
-  const formTitleValidationRules = useFormTitleValidationRules()
-
   return (
     <>
       <ModalHeader color="secondary.700">
@@ -91,31 +79,7 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
       </ModalHeader>
       <ModalBody whiteSpace="pre-wrap">
         <Container maxW="45rem" p={0}>
-          <FormControl isRequired isInvalid={!!errors.title} mb="2.25rem">
-            <FormLabel useMarkdownForDescription>
-              {t('features.workspace.modals.forms.create.details.name.label')}
-            </FormLabel>
-            <Skeleton isLoaded={!isFetching}>
-              <Input
-                autoFocus
-                {...register(
-                  'title',
-                  formTitleValidationRules as RegisterOptions<
-                    CreateFormWizardInputProps,
-                    'title'
-                  >,
-                )}
-              />
-            </Skeleton>
-            <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
-            {titleInputValue?.length > FORM_TITLE_LENGTH_WARNING ? (
-              <FormFieldMessage>
-                {t(
-                  'features.workspace.modals.forms.create.details.name.message',
-                )}
-              </FormFieldMessage>
-            ) : null}
-          </FormControl>
+          <FormTitleInput />
           {isMrfCutoverEnabled ? (
             <Box my="2.5rem">
               <EscapeHatchLink onClick={goToStorageModeDetails} />
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
index 7d06b7934d..c9faae07c7 100644
--- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormStorageModeScreen.tsx
@@ -1,48 +1,22 @@
-import { RegisterOptions } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { BiArrowBack, BiRightArrowAlt } from 'react-icons/bi'
-import {
-  Container,
-  Flex,
-  FormControl,
-  ModalBody,
-  ModalHeader,
-  Skeleton,
-  Text,
-} from '@chakra-ui/react'
+import { Container, Flex, ModalBody, ModalHeader, Text } from '@chakra-ui/react'
 
-import { useFormTitleValidationRules } from '~utils/formValidation'
 import Button from '~components/Button'
-import FormErrorMessage from '~components/FormControl/FormErrorMessage'
-import FormFieldMessage from '~components/FormControl/FormFieldMessage'
-import FormLabel from '~components/FormControl/FormLabel'
 import IconButton from '~components/IconButton'
-import Input from '~components/Input'
 
-import {
-  CreateFormWizardInputProps,
-  useCreateFormWizard,
-} from '../CreateFormWizardContext'
+import { useCreateFormWizard } from '../CreateFormWizardContext'
 
-const FORM_TITLE_LENGTH_WARNING = 65
+import { FormTitleInput } from './FormTitleInput'
 
 export const CreateFormStorageModeScreen = (): JSX.Element => {
   const { t } = useTranslation()
   const {
-    formMethods,
     handleCreateStorageModeOrMultirespondentForm,
     isLoading,
     isFetching,
     goToMrfDetails,
   } = useCreateFormWizard()
-  const {
-    register,
-    formState: { errors },
-    watch,
-  } = formMethods
-
-  const titleInputValue = watch('title')
-  const formTitleValidationRules = useFormTitleValidationRules()
 
   return (
     <>
@@ -67,31 +41,7 @@ export const CreateFormStorageModeScreen = (): JSX.Element => {
             use this if you need a feature not yet available in the current
             version.
           </Text>
-          <FormControl isRequired isInvalid={!!errors.title} mb="2.5rem">
-            <FormLabel useMarkdownForDescription>
-              {t('features.workspace.modals.forms.create.details.name.label')}
-            </FormLabel>
-            <Skeleton isLoaded={!isFetching}>
-              <Input
-                autoFocus
-                {...register(
-                  'title',
-                  formTitleValidationRules as RegisterOptions<
-                    CreateFormWizardInputProps,
-                    'title'
-                  >,
-                )}
-              />
-            </Skeleton>
-            <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
-            {titleInputValue?.length > FORM_TITLE_LENGTH_WARNING ? (
-              <FormFieldMessage>
-                {t(
-                  'features.workspace.modals.forms.create.details.name.message',
-                )}
-              </FormFieldMessage>
-            ) : null}
-          </FormControl>
+          <FormTitleInput mb="2.5rem" />
           <Button
             rightIcon={<BiRightArrowAlt fontSize="1.5rem" />}
             type="submit"
diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/FormTitleInput.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/FormTitleInput.tsx
new file mode 100644
index 0000000000..5ed0187d8d
--- /dev/null
+++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/FormTitleInput.tsx
@@ -0,0 +1,62 @@
+import { RegisterOptions } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { FormControl, FormControlProps, Skeleton } from '@chakra-ui/react'
+
+import { useFormTitleValidationRules } from '~utils/formValidation'
+import FormErrorMessage from '~components/FormControl/FormErrorMessage'
+import FormFieldMessage from '~components/FormControl/FormFieldMessage'
+import FormLabel from '~components/FormControl/FormLabel'
+import Input from '~components/Input'
+
+import {
+  CreateFormWizardInputProps,
+  useCreateFormWizard,
+} from '../CreateFormWizardContext'
+
+/** The length of form title to start showing warning text */
+export const FORM_TITLE_LENGTH_WARNING = 65
+
+interface FormTitleInputProps {
+  mb?: FormControlProps['mb']
+}
+
+export const FormTitleInput = ({
+  mb = '2.25rem',
+}: FormTitleInputProps): JSX.Element => {
+  const { t } = useTranslation()
+  const { formMethods, isFetching } = useCreateFormWizard()
+  const {
+    register,
+    formState: { errors },
+    watch,
+  } = formMethods
+
+  const titleInputValue = watch('title')
+  const formTitleValidationRules = useFormTitleValidationRules()
+
+  return (
+    <FormControl isRequired isInvalid={!!errors.title} mb={mb}>
+      <FormLabel useMarkdownForDescription>
+        {t('features.workspace.modals.forms.create.details.name.label')}
+      </FormLabel>
+      <Skeleton isLoaded={!isFetching}>
+        <Input
+          autoFocus
+          {...register(
+            'title',
+            formTitleValidationRules as RegisterOptions<
+              CreateFormWizardInputProps,
+              'title'
+            >,
+          )}
+        />
+      </Skeleton>
+      <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
+      {titleInputValue?.length > FORM_TITLE_LENGTH_WARNING ? (
+        <FormFieldMessage>
+          {t('features.workspace.modals.forms.create.details.name.message')}
+        </FormFieldMessage>
+      ) : null}
+    </FormControl>
+  )
+}