diff --git a/futurenhs.app/assets/scss/_imports.scss b/futurenhs.app/assets/scss/_imports.scss
index 85d589b95..7d3c75d39 100644
--- a/futurenhs.app/assets/scss/_imports.scss
+++ b/futurenhs.app/assets/scss/_imports.scss
@@ -61,6 +61,7 @@
 @import 'modules/notification-banner/notification-banner';
 @import 'modules/group-privacy/group-privacy';
 @import 'modules/group-teaser/group-teaser';
+@import 'modules/multi-input/multi-input';
 
 @import 'objects/objects';
 @import 'utilities/utilities';
diff --git a/futurenhs.app/assets/scss/modules/button/_button.scss b/futurenhs.app/assets/scss/modules/button/_button.scss
index feb3d8306..b0619bfcf 100644
--- a/futurenhs.app/assets/scss/modules/button/_button.scss
+++ b/futurenhs.app/assets/scss/modules/button/_button.scss
@@ -1,6 +1,14 @@
 .c-button {
     @extend %nhsuk-button;
 
+    &--alt {
+        @extend %nhsuk-button;
+        background-color: $blue;
+    }
+    &--disabled {
+        @extend %nhsuk-button;
+        filter: grayscale(100%);
+    }
     &--outline {
         @extend %toggle-button;
     }
@@ -18,11 +26,6 @@
     }
 
     &--themeable {
-        @extend %nhsuk-button-themeable
+        @extend %nhsuk-button-themeable;
     }
-
 }
-
-.c-button-outline {
-    @extend %toggle-button;
-}
\ No newline at end of file
diff --git a/futurenhs.app/assets/scss/modules/multi-input/_multi-input.scss b/futurenhs.app/assets/scss/modules/multi-input/_multi-input.scss
new file mode 100644
index 000000000..e73990e54
--- /dev/null
+++ b/futurenhs.app/assets/scss/modules/multi-input/_multi-input.scss
@@ -0,0 +1,18 @@
+.c-multi-input {
+    &-enter-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        background: rgba(0, 0, 0, 0);
+        background-color: $green;
+        border: none;
+        &--disabled,
+        &--pressed {
+            filter: grayscale(100%) brightness(200%);
+        }
+    }
+}
diff --git a/futurenhs.app/components/blocks/KeyLinksBlock/index.tsx b/futurenhs.app/components/blocks/KeyLinksBlock/index.tsx
index 5b01a9ddf..4ea1040f8 100644
--- a/futurenhs.app/components/blocks/KeyLinksBlock/index.tsx
+++ b/futurenhs.app/components/blocks/KeyLinksBlock/index.tsx
@@ -11,7 +11,7 @@ import { useCsrf } from '@helpers/hooks/useCsrf'
 import { Heading } from '@components/layouts/Heading'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
-import { Form } from '@components/forms/Form'
+import { Form } from '@components/old_forms/Form'
 import { SVGIcon } from '@components/generic/SVGIcon'
 import { Theme } from '@appTypes/theme'
 import { FormConfig } from '@appTypes/form'
diff --git a/futurenhs.app/components/blocks/PendingMemberActions/index.tsx b/futurenhs.app/components/blocks/PendingMemberActions/index.tsx
index fcd5fc88b..0de40a870 100644
--- a/futurenhs.app/components/blocks/PendingMemberActions/index.tsx
+++ b/futurenhs.app/components/blocks/PendingMemberActions/index.tsx
@@ -3,7 +3,7 @@ import { useFormConfig } from '@helpers/hooks/useForm'
 import { formTypes } from '@constants/forms'
 import { FormConfig } from '@appTypes/form'
 import { useCsrf } from '@helpers/hooks/useCsrf'
-import { Form } from '@components/forms/Form'
+import { Form } from '@components/old_forms/Form'
 
 export const PendingMemberActions: (props: Props) => JSX.Element = ({
     acceptAction,
diff --git a/futurenhs.app/components/blocks/Reply/index.tsx b/futurenhs.app/components/blocks/Reply/index.tsx
index 5b5b9a47b..ec4c4a815 100644
--- a/futurenhs.app/components/blocks/Reply/index.tsx
+++ b/futurenhs.app/components/blocks/Reply/index.tsx
@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react'
 import classNames from 'classnames'
 
 import { formTypes } from '@constants/forms'
-import { Form } from '@components/forms/Form'
+import { Form } from '@components/old_forms/Form'
 import { Accordion } from '@components/generic/Accordion'
 import { SVGIcon } from '@components/generic/SVGIcon'
 import forms from '@config/form-configs/index'
diff --git a/futurenhs.app/components/blocks/TextContentBlock/index.tsx b/futurenhs.app/components/blocks/TextContentBlock/index.tsx
index cac5c7ca3..2b8934058 100644
--- a/futurenhs.app/components/blocks/TextContentBlock/index.tsx
+++ b/futurenhs.app/components/blocks/TextContentBlock/index.tsx
@@ -7,7 +7,7 @@ import { Heading } from '@components/layouts/Heading'
 import { RichText } from '@components/generic/RichText'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
-import { Form } from '@components/forms/Form'
+import { Form } from '@components/old_forms/Form'
 import { formTypes } from '@constants/forms'
 import { FormConfig } from '@appTypes/form'
 import { CmsContentBlock } from '@appTypes/contentBlock'
diff --git a/futurenhs.app/components/forms/Input.tsx b/futurenhs.app/components/forms/Input.tsx
new file mode 100644
index 000000000..78afc76e9
--- /dev/null
+++ b/futurenhs.app/components/forms/Input.tsx
@@ -0,0 +1,46 @@
+import { VMessage } from '@helpers/validation'
+import { ReactNode } from 'react'
+
+export interface Props extends React.HTMLProps<HTMLInputElement> {
+    validation?: Array<VMessage>
+    label?: string
+    hint?: string
+    children?: ReactNode
+}
+
+export const Input = ({
+    validation,
+    label,
+    hint,
+    children,
+    ...inputProps
+}: Props) => {
+    const isError = validation && validation.some((v) => v.error === true)
+    const classNames = {
+        input: `nhsuk-input nhsuk-u-width-full 
+    ${isError ? 'nhsuk-input--error ' : null} 
+    ${inputProps.className ?? ''}`,
+        hint: `nhsuk-hint ${isError ? 'nhsuk-input--error' : null}`,
+        wrapper: `nhsuk-form-group ${
+            isError ? 'nhsuk-form-group--error' : null
+        }`,
+    }
+
+    // const onChange = (e) => {}
+
+    return (
+        <div className={classNames.wrapper}>
+            {!!hint && <span className={classNames.hint}>{hint}</span>}
+            {!!label && <label className="nhsuk-label">{label}</label>}
+            {!!isError && (
+                <span className="nhsuk-error-message">
+                    {validation[0].message}
+                </span>
+            )}
+            <div style={{ position: 'relative' }}>
+                {children}
+                <input {...inputProps} className={classNames.input} />
+            </div>
+        </div>
+    )
+}
diff --git a/futurenhs.app/components/forms/Input/index.tsx b/futurenhs.app/components/forms/Input/index.tsx
deleted file mode 100644
index c1cd996dc..000000000
--- a/futurenhs.app/components/forms/Input/index.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import classNames from 'classnames'
-
-import { RichText } from '@components/generic/RichText'
-import { RemainingCharacterCount } from '@components/forms/RemainingCharacterCount'
-import { getAriaFieldAttributes } from '@helpers/util/form'
-
-import { Props } from './interfaces'
-
-/**
- * Derived from the NHS Design System Text Input component: https://service-manual.nhs.uk/design-system/components/text-input.
- * Used to allow users to enter text that’s no longer than a single line, such as their name or phone number.
- */
-export const Input: (props: Props) => JSX.Element = ({
-    inputType,
-    input,
-    initialError,
-    meta: { touched, error, submitError },
-    text,
-    shouldRenderRemainingCharacterCount,
-    validators,
-    className,
-    autoComplete,
-    disabled,
-}) => {
-    const { label, hint } = text ?? {}
-    const id: string = input.name
-    const shouldRenderError: boolean =
-        Boolean(initialError) ||
-        ((Boolean(error) || Boolean(submitError)) && touched)
-    const isRequired: boolean = Boolean(
-        validators?.find(({ type }) => type === 'required')
-    )
-    const maxLength: boolean = validators?.find(
-        ({ type }) => type === 'maxLength'
-    )?.maxLength
-
-    const generatedIds: any = {
-        hint: `${id}-hint`,
-        errorLabel: `${id}-error`,
-        remainingCharacters: `${id}-remaining-characters`,
-    }
-
-    const generatedClasses: any = {
-        wrapper: classNames('nhsuk-form-group', className, {
-            ['nhsuk-form-group--error']: shouldRenderError,
-            ['u-clearfix']: shouldRenderRemainingCharacterCount && maxLength,
-        }),
-        label: classNames('nhsuk-label'),
-        hint: classNames('nhsuk-hint'),
-        error: classNames('nhsuk-error-message'),
-        input: classNames('nhsuk-input nhsuk-u-width-full', {
-            ['nhsuk-input--error']: shouldRenderError,
-            ['u-border-0 u-p-0']: inputType === 'file',
-        }),
-    }
-
-    const ariaInputProps: any = getAriaFieldAttributes(
-        isRequired,
-        shouldRenderError,
-        [
-            Boolean(hint) ? generatedIds.hint : null,
-            shouldRenderError ? generatedIds.errorLabel : null,
-            shouldRenderRemainingCharacterCount
-                ? generatedIds.remainingCharacters
-                : null,
-        ]
-    )
-
-    return (
-        <div className={generatedClasses.wrapper}>
-            <label htmlFor={id} className={generatedClasses.label}>
-                {label}
-            </label>
-            {hint && (
-                <RichText
-                    id={generatedIds.hint}
-                    className={generatedClasses.hint}
-                    bodyHtml={hint}
-                    wrapperElementType="span"
-                />
-            )}
-            {shouldRenderError && (
-                <span className={generatedClasses.error}>
-                    {error || submitError || initialError}
-                </span>
-            )}
-            <input
-                {...input}
-                {...ariaInputProps}
-                id={id}
-                type={inputType}
-                className={generatedClasses.input}
-                autoComplete={autoComplete ? autoComplete : 'off'}
-                disabled={disabled}
-            />
-            {shouldRenderRemainingCharacterCount && maxLength && (
-                <RemainingCharacterCount
-                    id={generatedIds.remainingCharacters}
-                    currentCharacterCount={input.value?.length ?? 0}
-                    maxCharacterCount={maxLength}
-                    className="u-float-right"
-                />
-            )}
-        </div>
-    )
-}
diff --git a/futurenhs.app/components/forms/MultiInput.tsx b/futurenhs.app/components/forms/MultiInput.tsx
new file mode 100644
index 000000000..14dfbf733
--- /dev/null
+++ b/futurenhs.app/components/forms/MultiInput.tsx
@@ -0,0 +1,103 @@
+import { FormEvent, KeyboardEvent, useState } from 'react'
+import { Input, Props as InputProps } from './Input'
+import { mdiKeyboardReturn } from '@mdi/js'
+import { SVGIcon } from '@components/generic/SVGIcon'
+
+interface Props extends InputProps {
+    getMulti?: (list: Array<string>) => void
+}
+
+export const MultiInput = ({ getMulti, ...inputProps }: Props) => {
+    const { validation } = inputProps
+    const [multi, setMulti] = useState<Array<string>>([])
+    const [value, setValue] = useState<string>('')
+    const [enterPress, setEnterPress] = useState<boolean>(false)
+
+    const isError = validation && validation.some((v) => v.error === true)
+    const hasOnKeyDown = typeof inputProps.onKeyDown === 'function'
+    const hasOnKeyUp = typeof inputProps.onKeyDown === 'function'
+    const hasOnChange = typeof inputProps.onChange === 'function'
+    const hasGetMulti = typeof getMulti === 'function'
+
+    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        const enterKey =
+            (e.keyCode === 13 || e.key.toLowerCase() === 'enter') && !isError
+
+        if (enterKey) {
+            setEnterPress(true)
+            handleMulti()
+        }
+    }
+
+    const onKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
+        const enterKey =
+            (e.keyCode === 13 || e.key.toLowerCase() === 'enter') && !isError
+        if (enterKey) {
+            setEnterPress(false)
+        }
+    }
+
+    const onChange = (e: FormEvent<HTMLInputElement>) => {
+        const el = e.target as HTMLInputElement
+        setValue(el.value)
+    }
+
+    const handleMulti = () => {
+        const val = value
+        const arr = multi
+        setValue('')
+        if (val && !arr.includes(val)) {
+            const newArr = [...arr, val]
+            setMulti(newArr)
+            if (hasGetMulti) {
+                getMulti(newArr)
+            }
+        }
+    }
+
+    return (
+        <div style={{ position: 'relative' }}>
+            <Input
+                {...inputProps}
+                value={value}
+                onChange={(e) => {
+                    onChange(e)
+                    if (hasOnChange) inputProps.onChange(e)
+                }}
+                onKeyDown={(e) => {
+                    onKeyDown(e)
+                    if (hasOnKeyDown) inputProps.onKeyDown(e)
+                }}
+                onKeyUp={(e) => {
+                    onKeyUp(e)
+                    if (hasOnKeyUp) inputProps.onKeyUp(e)
+                }}
+            >
+                <button
+                    disabled={isError}
+                    onClick={handleMulti}
+                    className={`c-multi-input-enter-button ${
+                        enterPress
+                            ? 'c-multi-input-enter-button--pressed'
+                            : null
+                    } ${
+                        isError ? 'c-multi-input-enter-button--disabled' : null
+                    }`}
+                >
+                    <SVGIcon color="#fff" material name={mdiKeyboardReturn} />
+                </button>
+            </Input>
+            {multi.map((text, i) => (
+                <div
+                    key={text + i}
+                    className="c-button--alt u-mr-2 u-mb-2"
+                    onClick={() =>
+                        setMulti(multi.filter((item) => item !== text))
+                    }
+                >
+                    {text} X
+                </div>
+            ))}
+        </div>
+    )
+}
diff --git a/futurenhs.app/components/generic/SVGIcon/index.tsx b/futurenhs.app/components/generic/SVGIcon/index.tsx
index d8b85a9cc..ad870fc86 100644
--- a/futurenhs.app/components/generic/SVGIcon/index.tsx
+++ b/futurenhs.app/components/generic/SVGIcon/index.tsx
@@ -14,6 +14,7 @@ export const SVGIcon: (props: Props) => JSX.Element = ({
     className,
     material,
     size = '21px',
+    color,
 }) => {
     const fullPath: string = useAssetPath(url)
     const xlinkHref: string = fullPath ? `${fullPath}#${name}` : `#${name}`
@@ -31,6 +32,12 @@ export const SVGIcon: (props: Props) => JSX.Element = ({
             <use xlinkHref={xlinkHref} />
         </svg>
     ) : (
-        <Icon path={name} title={name} size={size} className={className} />
+        <Icon
+            path={name}
+            color={color}
+            title={name}
+            size={size}
+            className={className}
+        />
     )
 }
diff --git a/futurenhs.app/components/generic/SVGIcon/interfaces.ts b/futurenhs.app/components/generic/SVGIcon/interfaces.ts
index e6954e859..368e6b867 100644
--- a/futurenhs.app/components/generic/SVGIcon/interfaces.ts
+++ b/futurenhs.app/components/generic/SVGIcon/interfaces.ts
@@ -4,6 +4,7 @@ export interface Props {
     className?: string
     material?: true
     size?: string
+    color?: string
 }
 
 export interface State {}
diff --git a/futurenhs.app/components/forms/AutoComplete/component.stories.tsx b/futurenhs.app/components/old_forms/AutoComplete/component.stories.tsx
similarity index 100%
rename from futurenhs.app/components/forms/AutoComplete/component.stories.tsx
rename to futurenhs.app/components/old_forms/AutoComplete/component.stories.tsx
diff --git a/futurenhs.app/components/forms/AutoComplete/index.tsx b/futurenhs.app/components/old_forms/AutoComplete/index.tsx
similarity index 98%
rename from futurenhs.app/components/forms/AutoComplete/index.tsx
rename to futurenhs.app/components/old_forms/AutoComplete/index.tsx
index 6c0276175..723496d31 100644
--- a/futurenhs.app/components/forms/AutoComplete/index.tsx
+++ b/futurenhs.app/components/old_forms/AutoComplete/index.tsx
@@ -4,7 +4,7 @@ import Autocomplete from 'accessible-autocomplete/react'
 
 import { getSiteUsersByTerm } from '@services/getSiteUsersByTerm'
 import { RichText } from '@components/generic/RichText'
-import { RemainingCharacterCount } from '@components/forms/RemainingCharacterCount'
+import { RemainingCharacterCount } from '@components/old_forms/RemainingCharacterCount'
 import { Option } from '@appTypes/option'
 import { Service } from '@appTypes/service'
 
diff --git a/futurenhs.app/components/forms/AutoComplete/interfaces.ts b/futurenhs.app/components/old_forms/AutoComplete/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/AutoComplete/interfaces.ts
rename to futurenhs.app/components/old_forms/AutoComplete/interfaces.ts
diff --git a/futurenhs.app/components/forms/CheckBox/component.stories.tsx b/futurenhs.app/components/old_forms/CheckBox/component.stories.tsx
similarity index 100%
rename from futurenhs.app/components/forms/CheckBox/component.stories.tsx
rename to futurenhs.app/components/old_forms/CheckBox/component.stories.tsx
diff --git a/futurenhs.app/components/forms/CheckBox/index.tsx b/futurenhs.app/components/old_forms/CheckBox/index.tsx
similarity index 100%
rename from futurenhs.app/components/forms/CheckBox/index.tsx
rename to futurenhs.app/components/old_forms/CheckBox/index.tsx
diff --git a/futurenhs.app/components/forms/CheckBox/interfaces.ts b/futurenhs.app/components/old_forms/CheckBox/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/CheckBox/interfaces.ts
rename to futurenhs.app/components/old_forms/CheckBox/interfaces.ts
diff --git a/futurenhs.app/components/forms/FieldSet/index.tsx b/futurenhs.app/components/old_forms/FieldSet/index.tsx
similarity index 100%
rename from futurenhs.app/components/forms/FieldSet/index.tsx
rename to futurenhs.app/components/old_forms/FieldSet/index.tsx
diff --git a/futurenhs.app/components/forms/FieldSet/interfaces.ts b/futurenhs.app/components/old_forms/FieldSet/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/FieldSet/interfaces.ts
rename to futurenhs.app/components/old_forms/FieldSet/interfaces.ts
diff --git a/futurenhs.app/components/forms/Form/component.stories.tsx b/futurenhs.app/components/old_forms/Form/component.stories.tsx
similarity index 100%
rename from futurenhs.app/components/forms/Form/component.stories.tsx
rename to futurenhs.app/components/old_forms/Form/component.stories.tsx
diff --git a/futurenhs.app/components/forms/Form/component.test.tsx b/futurenhs.app/components/old_forms/Form/component.test.tsx
similarity index 100%
rename from futurenhs.app/components/forms/Form/component.test.tsx
rename to futurenhs.app/components/old_forms/Form/component.test.tsx
diff --git a/futurenhs.app/components/forms/Form/index.tsx b/futurenhs.app/components/old_forms/Form/index.tsx
similarity index 96%
rename from futurenhs.app/components/forms/Form/index.tsx
rename to futurenhs.app/components/old_forms/Form/index.tsx
index ee9c9af38..d18979d52 100644
--- a/futurenhs.app/components/forms/Form/index.tsx
+++ b/futurenhs.app/components/old_forms/Form/index.tsx
@@ -4,7 +4,7 @@ import { Form as FinalForm, Field, FormSpy } from 'react-final-form'
 import classNames from 'classnames'
 import { SVGIcon } from '@components/generic/SVGIcon'
 import { Link } from '@components/generic/Link'
-import { formComponents } from '@components/forms'
+import { formComponents } from '@components/old_forms'
 import { Dialog } from '@components/generic/Dialog'
 import { validate } from '@helpers/validators'
 import { requestMethods } from '@constants/fetch'
@@ -380,22 +380,20 @@ export const Form: (props: Props) => JSX.Element = ({
                                     {submitButton}
                                 </button>
                             )}
-                           
 
                             {shouldRenderBackToTopIcon && (
-                               <div>
-                                   <a href="#top" >
-                                       <SVGIcon
-                                           name="icon-arrow-up"
-                                           className="c-svg-icon u-w-4 u-h-14 u-mr-1 u-align-middle"
-                                       />
-                                       Back to top
-                                   </a>
-                               </div>
+                                <div>
+                                    <a href="#top">
+                                        <SVGIcon
+                                            name="icon-arrow-up"
+                                            className="c-svg-icon u-w-4 u-h-14 u-mr-1 u-align-middle"
+                                        />
+                                        Back to top
+                                    </a>
+                                </div>
                             )}
-                            
                         </div>
-                       
+
                         <FormSpy
                             subscription={{
                                 values: true,
diff --git a/futurenhs.app/components/forms/Form/interfaces.ts b/futurenhs.app/components/old_forms/Form/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/Form/interfaces.ts
rename to futurenhs.app/components/old_forms/Form/interfaces.ts
diff --git a/futurenhs.app/components/forms/FormWithErrorSummary/component.stories.tsx b/futurenhs.app/components/old_forms/FormWithErrorSummary/component.stories.tsx
similarity index 100%
rename from futurenhs.app/components/forms/FormWithErrorSummary/component.stories.tsx
rename to futurenhs.app/components/old_forms/FormWithErrorSummary/component.stories.tsx
diff --git a/futurenhs.app/components/forms/FormWithErrorSummary/component.test.tsx b/futurenhs.app/components/old_forms/FormWithErrorSummary/component.test.tsx
similarity index 100%
rename from futurenhs.app/components/forms/FormWithErrorSummary/component.test.tsx
rename to futurenhs.app/components/old_forms/FormWithErrorSummary/component.test.tsx
diff --git a/futurenhs.app/components/forms/FormWithErrorSummary/index.tsx b/futurenhs.app/components/old_forms/FormWithErrorSummary/index.tsx
similarity index 98%
rename from futurenhs.app/components/forms/FormWithErrorSummary/index.tsx
rename to futurenhs.app/components/old_forms/FormWithErrorSummary/index.tsx
index 3f0933a9d..313e56209 100644
--- a/futurenhs.app/components/forms/FormWithErrorSummary/index.tsx
+++ b/futurenhs.app/components/old_forms/FormWithErrorSummary/index.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
 
 import { ErrorSummary } from '@components/generic/ErrorSummary'
-import { Form } from '@components/forms/Form'
+import { Form } from '@components/old_forms/Form'
 import { requestMethods } from '@constants/fetch'
 import { FormErrors } from '@appTypes/form'
 
diff --git a/futurenhs.app/components/forms/FormWithErrorSummary/interfaces.ts b/futurenhs.app/components/old_forms/FormWithErrorSummary/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/FormWithErrorSummary/interfaces.ts
rename to futurenhs.app/components/old_forms/FormWithErrorSummary/interfaces.ts
diff --git a/futurenhs.app/components/forms/GroupContainer/component.test.tsx b/futurenhs.app/components/old_forms/GroupContainer/component.test.tsx
similarity index 100%
rename from futurenhs.app/components/forms/GroupContainer/component.test.tsx
rename to futurenhs.app/components/old_forms/GroupContainer/component.test.tsx
diff --git a/futurenhs.app/components/forms/GroupContainer/index.tsx b/futurenhs.app/components/old_forms/GroupContainer/index.tsx
similarity index 100%
rename from futurenhs.app/components/forms/GroupContainer/index.tsx
rename to futurenhs.app/components/old_forms/GroupContainer/index.tsx
diff --git a/futurenhs.app/components/forms/GroupContainer/interfaces.ts b/futurenhs.app/components/old_forms/GroupContainer/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/GroupContainer/interfaces.ts
rename to futurenhs.app/components/old_forms/GroupContainer/interfaces.ts
diff --git a/futurenhs.app/components/forms/Hidden/component.test.tsx b/futurenhs.app/components/old_forms/Hidden/component.test.tsx
similarity index 100%
rename from futurenhs.app/components/forms/Hidden/component.test.tsx
rename to futurenhs.app/components/old_forms/Hidden/component.test.tsx
diff --git a/futurenhs.app/components/forms/Hidden/index.tsx b/futurenhs.app/components/old_forms/Hidden/index.tsx
similarity index 100%
rename from futurenhs.app/components/forms/Hidden/index.tsx
rename to futurenhs.app/components/old_forms/Hidden/index.tsx
diff --git a/futurenhs.app/components/forms/Hidden/interfaces.ts b/futurenhs.app/components/old_forms/Hidden/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/Hidden/interfaces.ts
rename to futurenhs.app/components/old_forms/Hidden/interfaces.ts
diff --git a/futurenhs.app/components/forms/ImageUpload/component.stories.tsx b/futurenhs.app/components/old_forms/ImageUpload/component.stories.tsx
similarity index 100%
rename from futurenhs.app/components/forms/ImageUpload/component.stories.tsx
rename to futurenhs.app/components/old_forms/ImageUpload/component.stories.tsx
diff --git a/futurenhs.app/components/forms/ImageUpload/index.tsx b/futurenhs.app/components/old_forms/ImageUpload/index.tsx
similarity index 100%
rename from futurenhs.app/components/forms/ImageUpload/index.tsx
rename to futurenhs.app/components/old_forms/ImageUpload/index.tsx
diff --git a/futurenhs.app/components/forms/ImageUpload/interfaces.ts b/futurenhs.app/components/old_forms/ImageUpload/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/ImageUpload/interfaces.ts
rename to futurenhs.app/components/old_forms/ImageUpload/interfaces.ts
diff --git a/futurenhs.app/components/forms/Input/component.stories.tsx b/futurenhs.app/components/old_forms/Input/component.stories.tsx
similarity index 97%
rename from futurenhs.app/components/forms/Input/component.stories.tsx
rename to futurenhs.app/components/old_forms/Input/component.stories.tsx
index 5828f0455..5e5453b03 100644
--- a/futurenhs.app/components/forms/Input/component.stories.tsx
+++ b/futurenhs.app/components/old_forms/Input/component.stories.tsx
@@ -1,5 +1,5 @@
 import { Input } from './index'
-import { Form } from '@components/forms/Form'
+import { Form } from '@components/old_forms/Form'
 
 export default {
     title: 'Input',
diff --git a/futurenhs.app/components/forms/Input/component.test.tsx b/futurenhs.app/components/old_forms/Input/component.test.tsx
similarity index 100%
rename from futurenhs.app/components/forms/Input/component.test.tsx
rename to futurenhs.app/components/old_forms/Input/component.test.tsx
diff --git a/futurenhs.app/components/old_forms/Input/index.tsx b/futurenhs.app/components/old_forms/Input/index.tsx
new file mode 100644
index 000000000..09ad10950
--- /dev/null
+++ b/futurenhs.app/components/old_forms/Input/index.tsx
@@ -0,0 +1,145 @@
+import classNames from 'classnames'
+import { RichText } from '@components/generic/RichText'
+import { RemainingCharacterCount } from '@components/old_forms/RemainingCharacterCount'
+import { getAriaFieldAttributes } from '@helpers/util/form'
+import { InputTypes, Props } from './interfaces'
+import { MouseEvent, useRef, useState } from 'react'
+
+/**
+ * Derived from the NHS Design System Text Input component: https://service-manual.nhs.uk/design-system/components/text-input.
+ * Used to allow users to enter text that’s no longer than a single line, such as their name or phone number.
+ */
+export const Input: (props: Props) => JSX.Element = ({
+    inputType,
+    input,
+    initialError,
+    meta: { touched, error, submitError },
+    text,
+    shouldRenderRemainingCharacterCount,
+    validators,
+    className,
+    autoComplete,
+    disabled,
+}) => {
+    const inputRef = useRef(null)
+    const [usernames, setUsernames] = useState<Array<string>>([])
+    const { label, hint } = text ?? {}
+    const id: string = input.name
+    const shouldRenderError: boolean =
+        Boolean(initialError) ||
+        ((Boolean(error) || Boolean(submitError)) && touched)
+    const isRequired: boolean = Boolean(
+        validators?.find(({ type }) => type === 'required')
+    )
+    const maxLength: boolean = validators?.find(
+        ({ type }) => type === 'maxLength'
+    )?.maxLength
+
+    const generatedIds: any = {
+        hint: `${id}-hint`,
+        errorLabel: `${id}-error`,
+        remainingCharacters: `${id}-remaining-characters`,
+    }
+    const isMulti = inputType === InputTypes.MULTI
+    const onInput = () => {
+        if (isMulti) {
+            const val = inputRef.current.value.replace(/\s/g, '')
+            if (val.substr(val.length - 1) === ',') {
+                inputRef.current.value = null
+                if (!usernames.includes(val)) {
+                    setUsernames([
+                        ...usernames,
+                        val.substring(0, val.length - 1),
+                    ])
+                }
+            }
+        }
+    }
+    const generatedClasses: any = {
+        wrapper: classNames('nhsuk-form-group', className, {
+            ['nhsuk-form-group--error']: shouldRenderError,
+            ['u-clearfix']: shouldRenderRemainingCharacterCount && maxLength,
+        }),
+        label: classNames('nhsuk-label'),
+        hint: classNames('nhsuk-hint'),
+        error: classNames('nhsuk-error-message'),
+        input: classNames('nhsuk-input nhsuk-u-width-full', {
+            ['nhsuk-input--error']: shouldRenderError,
+            ['u-border-0 u-p-0']: inputType === InputTypes.FILE,
+        }),
+    }
+
+    const ariaInputProps: any = getAriaFieldAttributes(
+        isRequired,
+        shouldRenderError,
+        [
+            Boolean(hint) ? generatedIds.hint : null,
+            shouldRenderError ? generatedIds.errorLabel : null,
+            shouldRenderRemainingCharacterCount
+                ? generatedIds.remainingCharacters
+                : null,
+        ]
+    )
+    return (
+        <>
+            <div className={generatedClasses.wrapper}>
+                <label htmlFor={id} className={generatedClasses.label}>
+                    {label}
+                </label>
+                {hint && (
+                    <RichText
+                        id={generatedIds.hint}
+                        className={generatedClasses.hint}
+                        bodyHtml={hint}
+                        wrapperElementType="span"
+                    />
+                )}
+                {shouldRenderError && (
+                    <span className={generatedClasses.error}>
+                        {error || submitError || initialError}
+                    </span>
+                )}
+                <input
+                    {...input}
+                    {...ariaInputProps}
+                    id={id}
+                    type={inputType}
+                    className={generatedClasses.input}
+                    autoComplete={autoComplete ? autoComplete : 'off'}
+                    disabled={disabled}
+                    ref={inputRef}
+                    onInput={onInput}
+                />
+                {shouldRenderRemainingCharacterCount && maxLength && (
+                    <RemainingCharacterCount
+                        id={generatedIds.remainingCharacters}
+                        currentCharacterCount={input.value?.length ?? 0}
+                        maxCharacterCount={maxLength}
+                        className="u-float-right"
+                    />
+                )}
+            </div>
+
+            {isMulti && !!usernames.length && (
+                <div className="u-mb-20">
+                    {usernames.map((usr) => {
+                        return (
+                            <button
+                                className="c-button u-mr-2"
+                                onClick={(e) => {
+                                    e.preventDefault()
+
+                                    setUsernames(
+                                        usernames.filter((u) => u !== usr)
+                                    )
+                                }}
+                            >
+                                {usr} X
+                            </button>
+                        )
+                    })}
+                </div>
+            )}
+        </>
+    )
+}
diff --git a/futurenhs.app/components/forms/Input/interfaces.ts b/futurenhs.app/components/old_forms/Input/interfaces.ts
similarity index 71%
rename from futurenhs.app/components/forms/Input/interfaces.ts
rename to futurenhs.app/components/old_forms/Input/interfaces.ts
index 837c00ac4..ebe08454c 100644
--- a/futurenhs.app/components/forms/Input/interfaces.ts
+++ b/futurenhs.app/components/old_forms/Input/interfaces.ts
@@ -15,10 +15,19 @@ export interface Props {
         hint?: string
         error?: string
     }
-    inputType?: 'text' | 'email' | 'password' | 'number' | 'file'
+    inputType?: InputTypes
     shouldRenderRemainingCharacterCount?: boolean
     validators?: Array<any>
     className?: string
     autoComplete?: string
     disabled?: boolean
 }
+
+export enum InputTypes {
+    MULTI = 'multi',
+    PASSWORD = 'password',
+    NUMBER = 'number',
+    FILE = 'file',
+    TEXT = 'text',
+    EMAIL = 'email',
+}
diff --git a/futurenhs.app/components/forms/MultiChoice/component.stories.tsx b/futurenhs.app/components/old_forms/MultiChoice/component.stories.tsx
similarity index 100%
rename from futurenhs.app/components/forms/MultiChoice/component.stories.tsx
rename to futurenhs.app/components/old_forms/MultiChoice/component.stories.tsx
diff --git a/futurenhs.app/components/forms/MultiChoice/index.tsx b/futurenhs.app/components/old_forms/MultiChoice/index.tsx
similarity index 100%
rename from futurenhs.app/components/forms/MultiChoice/index.tsx
rename to futurenhs.app/components/old_forms/MultiChoice/index.tsx
diff --git a/futurenhs.app/components/forms/MultiChoice/interfaces.ts b/futurenhs.app/components/old_forms/MultiChoice/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/MultiChoice/interfaces.ts
rename to futurenhs.app/components/old_forms/MultiChoice/interfaces.ts
diff --git a/futurenhs.app/components/forms/RemainingCharacterCount/component.test.tsx b/futurenhs.app/components/old_forms/RemainingCharacterCount/component.test.tsx
similarity index 100%
rename from futurenhs.app/components/forms/RemainingCharacterCount/component.test.tsx
rename to futurenhs.app/components/old_forms/RemainingCharacterCount/component.test.tsx
diff --git a/futurenhs.app/components/forms/RemainingCharacterCount/index.tsx b/futurenhs.app/components/old_forms/RemainingCharacterCount/index.tsx
similarity index 100%
rename from futurenhs.app/components/forms/RemainingCharacterCount/index.tsx
rename to futurenhs.app/components/old_forms/RemainingCharacterCount/index.tsx
diff --git a/futurenhs.app/components/forms/RemainingCharacterCount/interfaces.ts b/futurenhs.app/components/old_forms/RemainingCharacterCount/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/RemainingCharacterCount/interfaces.ts
rename to futurenhs.app/components/old_forms/RemainingCharacterCount/interfaces.ts
diff --git a/futurenhs.app/components/forms/SignInSubmitButton/index.tsx b/futurenhs.app/components/old_forms/SignInSubmitButton/index.tsx
similarity index 100%
rename from futurenhs.app/components/forms/SignInSubmitButton/index.tsx
rename to futurenhs.app/components/old_forms/SignInSubmitButton/index.tsx
diff --git a/futurenhs.app/components/forms/TextArea/component.stories.tsx b/futurenhs.app/components/old_forms/TextArea/component.stories.tsx
similarity index 100%
rename from futurenhs.app/components/forms/TextArea/component.stories.tsx
rename to futurenhs.app/components/old_forms/TextArea/component.stories.tsx
diff --git a/futurenhs.app/components/forms/TextArea/component.test.tsx b/futurenhs.app/components/old_forms/TextArea/component.test.tsx
similarity index 100%
rename from futurenhs.app/components/forms/TextArea/component.test.tsx
rename to futurenhs.app/components/old_forms/TextArea/component.test.tsx
diff --git a/futurenhs.app/components/forms/TextArea/index.tsx b/futurenhs.app/components/old_forms/TextArea/index.tsx
similarity index 98%
rename from futurenhs.app/components/forms/TextArea/index.tsx
rename to futurenhs.app/components/old_forms/TextArea/index.tsx
index 75ee520aa..8f1df18ab 100644
--- a/futurenhs.app/components/forms/TextArea/index.tsx
+++ b/futurenhs.app/components/old_forms/TextArea/index.tsx
@@ -4,7 +4,7 @@ import { Editor } from '@tinymce/tinymce-react'
 
 import { useAssetPath } from '@helpers/hooks/useAssetPath'
 import { RichText } from '@components/generic/RichText'
-import { RemainingCharacterCount } from '@components/forms/RemainingCharacterCount'
+import { RemainingCharacterCount } from '@components/old_forms/RemainingCharacterCount'
 import { getAriaFieldAttributes } from '@helpers/util/form'
 import { useIntersectionObserver } from '@helpers/hooks/useIntersectionObserver'
 
diff --git a/futurenhs.app/components/forms/TextArea/interfaces.ts b/futurenhs.app/components/old_forms/TextArea/interfaces.ts
similarity index 100%
rename from futurenhs.app/components/forms/TextArea/interfaces.ts
rename to futurenhs.app/components/old_forms/TextArea/interfaces.ts
diff --git a/futurenhs.app/components/forms/index.tsx b/futurenhs.app/components/old_forms/index.tsx
similarity index 100%
rename from futurenhs.app/components/forms/index.tsx
rename to futurenhs.app/components/old_forms/index.tsx
diff --git a/futurenhs.app/config/form-configs/invite-user.ts b/futurenhs.app/config/form-configs/invite-user.ts
index 06c527166..9cf4639ec 100644
--- a/futurenhs.app/config/form-configs/invite-user.ts
+++ b/futurenhs.app/config/form-configs/invite-user.ts
@@ -8,7 +8,7 @@ export const inviteUserForm: FormConfig = {
             fields: [
                 {
                     name: 'Email',
-                    inputType: 'email',
+                    inputType: 'multi',
                     text: {
                         label: 'Email address',
                     },
diff --git a/futurenhs.app/helpers/validation/index.ts b/futurenhs.app/helpers/validation/index.ts
new file mode 100644
index 000000000..f0236e51a
--- /dev/null
+++ b/futurenhs.app/helpers/validation/index.ts
@@ -0,0 +1,34 @@
+import { isEmail, isRequired } from './rules'
+
+export interface VMessage {
+    error: boolean
+    name: string
+    message: string | null
+}
+
+export enum VRules {
+    EMAIL = 'isEmail',
+    REQUIRED = 'isRequired',
+}
+
+const ruleSet = {
+    isEmail,
+    isRequired,
+}
+
+export const validate = (value: string, rules: Array<VRules>) =>
+    rules.map((rule) => {
+        const testRule = ruleSet[rule]
+        return testRule(value)
+    })
+
+export const approve = (rule: VRules): VMessage => ({
+    error: false,
+    name: rule,
+    message: null,
+})
+export const deny = (rule: VRules, message: string): VMessage => ({
+    error: true,
+    name: rule,
+    message,
+})
diff --git a/futurenhs.app/helpers/validation/messages.ts b/futurenhs.app/helpers/validation/messages.ts
new file mode 100644
index 000000000..c4591877b
--- /dev/null
+++ b/futurenhs.app/helpers/validation/messages.ts
@@ -0,0 +1,11 @@
+import { VRules } from '.'
+
+type VStrings = {
+    [key in VRules]: string
+}
+const messages: VStrings = {
+    isEmail: 'A valid email address is required',
+    isRequired: 'This field is required',
+}
+
+export default messages
diff --git a/futurenhs.app/helpers/validation/rules.ts b/futurenhs.app/helpers/validation/rules.ts
new file mode 100644
index 000000000..e626d3054
--- /dev/null
+++ b/futurenhs.app/helpers/validation/rules.ts
@@ -0,0 +1,19 @@
+import { approve, deny, VRules } from '.'
+import messages from './messages'
+
+export const isEmail = (value) => {
+    const denyMessage = messages[VRules.EMAIL]
+    const isEmailRegExp = new RegExp(
+        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+    )
+    return isEmailRegExp.test(value)
+        ? approve(VRules.EMAIL)
+        : deny(VRules.EMAIL, denyMessage)
+}
+
+export const isRequired = (value) => {
+    const denyMessage = messages[VRules.REQUIRED]
+    return !!value
+        ? approve(VRules.REQUIRED)
+        : deny(VRules.REQUIRED, denyMessage)
+}
diff --git a/futurenhs.app/package-lock.json b/futurenhs.app/package-lock.json
index c9b1b390e..964ed4044 100644
--- a/futurenhs.app/package-lock.json
+++ b/futurenhs.app/package-lock.json
@@ -35377,6 +35377,42 @@
                 "warning": "^4.0.3"
             }
         },
+        "react-multi-email": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/react-multi-email/-/react-multi-email-1.0.6.tgz",
+            "integrity": "sha512-MpdIYsubzKK2IYxZtSiYy3BbxRwaefdNudu02pqlUkKjFYf+u7WvdrMZbMtpQS8Cdsp08ak4LZb22LIlyPiv2g==",
+            "requires": {
+                "react": "^18.2.0",
+                "react-dom": "^18.2.0"
+            },
+            "dependencies": {
+                "react": {
+                    "version": "18.2.0",
+                    "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+                    "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+                    "requires": {
+                        "loose-envify": "^1.1.0"
+                    }
+                },
+                "react-dom": {
+                    "version": "18.2.0",
+                    "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+                    "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+                    "requires": {
+                        "loose-envify": "^1.1.0",
+                        "scheduler": "^0.23.0"
+                    }
+                },
+                "scheduler": {
+                    "version": "0.23.0",
+                    "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+                    "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+                    "requires": {
+                        "loose-envify": "^1.1.0"
+                    }
+                }
+            }
+        },
         "react-popper": {
             "version": "2.2.5",
             "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
diff --git a/futurenhs.app/package.json b/futurenhs.app/package.json
index b76bcb64b..23893b645 100644
--- a/futurenhs.app/package.json
+++ b/futurenhs.app/package.json
@@ -64,6 +64,7 @@
         "react-final-form": "^6.5.7",
         "react-flip-move": "^3.0.4",
         "react-modal": "^3.14.3",
+        "react-multi-email": "^1.0.6",
         "react-switch": "^7.0.0",
         "reselect": "^4.1.5",
         "set-cookie-parser": "^2.5.0",
diff --git a/futurenhs.app/pages/admin/domains/add/index.page.tsx b/futurenhs.app/pages/admin/domains/add/index.page.tsx
index 610c61590..dc4579ecb 100644
--- a/futurenhs.app/pages/admin/domains/add/index.page.tsx
+++ b/futurenhs.app/pages/admin/domains/add/index.page.tsx
@@ -19,7 +19,7 @@ import { withTextContent } from '@helpers/hofs/withTextContent'
 import { ServerSideFormData } from '@helpers/util/form'
 import { getGenericFormError } from '@helpers/util/form'
 import { formTypes } from '@constants/forms'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { postSiteUserInvite } from '@services/postSiteUserInvite'
diff --git a/futurenhs.app/pages/admin/groups/create/index.page.tsx b/futurenhs.app/pages/admin/groups/create/index.page.tsx
index cf79a7c36..e807bd874 100644
--- a/futurenhs.app/pages/admin/groups/create/index.page.tsx
+++ b/futurenhs.app/pages/admin/groups/create/index.page.tsx
@@ -25,7 +25,7 @@ import { User } from '@appTypes/user'
 import { FormConfig, FormErrors } from '@appTypes/form'
 import { formTypes } from '@constants/forms'
 import { getGenericFormError } from '@helpers/util/form'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { useFormConfig } from '@helpers/hooks/useForm'
@@ -62,11 +62,10 @@ export const AdminCreateGroupPage: (props: Props) => JSX.Element = ({
      * Client-side submission handler
      */
     const handleSubmit = async (formData: FormData): Promise<FormErrors> => {
-        const headers =
-                getStandardServiceHeaders({
-                    csrfToken,
-                    accessToken: user.accessToken,
-                })
+        const headers = getStandardServiceHeaders({
+            csrfToken,
+            accessToken: user.accessToken,
+        })
         try {
             await services.postGroup({ user, headers, body: formData as any })
 
diff --git a/futurenhs.app/pages/admin/users/invite/index.page.tsx b/futurenhs.app/pages/admin/users/invite/index.page.tsx
index fe7d8a2ba..625dcba8f 100644
--- a/futurenhs.app/pages/admin/users/invite/index.page.tsx
+++ b/futurenhs.app/pages/admin/users/invite/index.page.tsx
@@ -19,7 +19,7 @@ import { withTextContent } from '@helpers/hofs/withTextContent'
 import { ServerSideFormData } from '@helpers/util/form'
 import { getGenericFormError } from '@helpers/util/form'
 import { formTypes } from '@constants/forms'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { postSiteUserInvite } from '@services/postSiteUserInvite'
@@ -60,11 +60,10 @@ export const AdminUsersInvitePage: (props: Props) => JSX.Element = ({
      * Client-side submission handler
      */
     const handleSubmit = async (formData: FormData): Promise<FormErrors> => {
-        const headers =
-                getStandardServiceHeaders({
-                    csrfToken,
-                    accessToken: user.accessToken,
-                })
+        const headers = getStandardServiceHeaders({
+            csrfToken,
+            accessToken: user.accessToken,
+        })
         try {
             await services.postSiteUserInvite({
                 user,
@@ -167,7 +166,7 @@ export const getServerSideProps: GetServerSideProps = async (
              */
             if (formData && requestMethod === requestMethods.POST) {
                 props.forms[formTypes.INVITE_USER].initialValues = formData
-                
+
                 try {
                     return {
                         props: props,
diff --git a/futurenhs.app/pages/auth/register/index.page.tsx b/futurenhs.app/pages/auth/register/index.page.tsx
index ade349efa..18170ac8b 100644
--- a/futurenhs.app/pages/auth/register/index.page.tsx
+++ b/futurenhs.app/pages/auth/register/index.page.tsx
@@ -25,7 +25,7 @@ import { selectFormErrors } from '@helpers/selectors/forms'
 import { postRegisterSiteUser } from '@services/postRegisterSiteUser'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
-import { Form } from '@components/forms/Form'
+import { Form } from '@components/old_forms/Form'
 import { ErrorSummary } from '@components/generic/ErrorSummary'
 import { getGenericFormError } from '@helpers/util/form'
 import { useFormConfig } from '@helpers/hooks/useForm'
diff --git a/futurenhs.app/pages/auth/signin/index.page.tsx b/futurenhs.app/pages/auth/signin/index.page.tsx
index b8b6c28a4..b3fb8fdb0 100644
--- a/futurenhs.app/pages/auth/signin/index.page.tsx
+++ b/futurenhs.app/pages/auth/signin/index.page.tsx
@@ -16,7 +16,7 @@ import { Page } from '@appTypes/page'
 import { GenericPageTextContent } from '@appTypes/content'
 import { authOptions } from '@pages/api/auth/[...nextauth].page'
 import { unstable_getServerSession } from 'next-auth'
-import SignInSubmitButton from '@components/forms/SignInSubmitButton'
+import SignInSubmitButton from '@components/old_forms/SignInSubmitButton'
 import { getFeatureEnabled } from '@services/getFeatureEnabled'
 import { features } from '@constants/routes'
 
diff --git a/futurenhs.app/pages/groups/[groupId]/files/create/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/files/create/index.page.tsx
index 320cb800f..3aa89c180 100644
--- a/futurenhs.app/pages/groups/[groupId]/files/create/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/files/create/index.page.tsx
@@ -29,7 +29,7 @@ import { User } from '@appTypes/user'
 import { withTextContent } from '@helpers/hofs/withTextContent'
 import { formTypes } from '@constants/forms'
 import { getGenericFormError } from '@helpers/util/form'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { RichText } from '@components/generic/RichText'
@@ -72,11 +72,10 @@ export const GroupCreateFilePage: (props: Props) => JSX.Element = ({
 
     const handleSubmit = async (formData: FormData): Promise<FormErrors> => {
         return new Promise((resolve) => {
-            const headers =
-                getStandardServiceHeaders({
-                    csrfToken,
-                    accessToken: user.accessToken,
-                })
+            const headers = getStandardServiceHeaders({
+                csrfToken,
+                accessToken: user.accessToken,
+            })
             postGroupFile({ groupId, folderId, user, headers, body: formData })
                 .then(() => {
                     router.push(folderHref)
diff --git a/futurenhs.app/pages/groups/[groupId]/folders/[folderId]/delete/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/folders/[folderId]/delete/index.page.tsx
index 4faaa7581..00474aab2 100644
--- a/futurenhs.app/pages/groups/[groupId]/folders/[folderId]/delete/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/folders/[folderId]/delete/index.page.tsx
@@ -23,7 +23,7 @@ import { formTypes } from '@constants/forms'
 import { getStandardServiceHeaders } from '@helpers/fetch'
 import { getGenericFormError } from '@helpers/util/form'
 import { getServiceErrorDataValidationErrors } from '@services/index'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { postGroupFolder } from '@services/postGroupFolder'
diff --git a/futurenhs.app/pages/groups/[groupId]/folders/[folderId]/update/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/folders/[folderId]/update/index.page.tsx
index 0c2705bd4..b6c369260 100644
--- a/futurenhs.app/pages/groups/[groupId]/folders/[folderId]/update/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/folders/[folderId]/update/index.page.tsx
@@ -29,7 +29,7 @@ import { User } from '@appTypes/user'
 import { withTextContent } from '@helpers/hofs/withTextContent'
 import { ServerSideFormData } from '@helpers/util/form'
 import { getGenericFormError } from '@helpers/util/form'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { postGroupFolder } from '@services/postGroupFolder'
diff --git a/futurenhs.app/pages/groups/[groupId]/folders/create/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/folders/create/index.page.tsx
index 48d30f95a..6940246bf 100644
--- a/futurenhs.app/pages/groups/[groupId]/folders/create/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/folders/create/index.page.tsx
@@ -29,7 +29,7 @@ import { formTypes } from '@constants/forms'
 import { getStandardServiceHeaders } from '@helpers/fetch'
 import { getGenericFormError } from '@helpers/util/form'
 import { getServiceErrorDataValidationErrors } from '@services/index'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { postGroupFolder } from '@services/postGroupFolder'
diff --git a/futurenhs.app/pages/groups/[groupId]/forum/[discussionId]/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/forum/[discussionId]/index.page.tsx
index 73c25b600..77d75c372 100644
--- a/futurenhs.app/pages/groups/[groupId]/forum/[discussionId]/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/forum/[discussionId]/index.page.tsx
@@ -44,7 +44,7 @@ import { SVGIcon } from '@components/generic/SVGIcon'
 import { Comment } from '@components/blocks/Comment'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
-import { Form } from '@components/forms/Form'
+import { Form } from '@components/old_forms/Form'
 import { ErrorSummary } from '@components/generic/ErrorSummary'
 import { ErrorBoundary } from '@components/layouts/ErrorBoundary'
 import { PaginationWithStatus } from '@components/generic/PaginationWithStatus'
diff --git a/futurenhs.app/pages/groups/[groupId]/forum/create/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/forum/create/index.page.tsx
index 828b11658..278e1d6a9 100644
--- a/futurenhs.app/pages/groups/[groupId]/forum/create/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/forum/create/index.page.tsx
@@ -28,7 +28,7 @@ import { User } from '@appTypes/user'
 import { withTextContent } from '@helpers/hofs/withTextContent'
 import { ServerSideFormData } from '@helpers/util/form'
 import { getGenericFormError } from '@helpers/util/form'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { FormErrors, FormConfig } from '@appTypes/form'
@@ -68,11 +68,10 @@ export const GroupCreateDiscussionPage: (props: Props) => JSX.Element = ({
      */
     const handleSubmit = async (formData: FormData): Promise<FormErrors> => {
         try {
-            const headers =
-                getStandardServiceHeaders({
-                    csrfToken,
-                    accessToken: user.accessToken,
-                })
+            const headers = getStandardServiceHeaders({
+                csrfToken,
+                accessToken: user.accessToken,
+            })
             await services.postGroupDiscussion({
                 groupId,
                 user,
diff --git a/futurenhs.app/pages/groups/[groupId]/invite/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/invite/index.page.tsx
index e17b3a852..2ecae8b22 100644
--- a/futurenhs.app/pages/groups/[groupId]/invite/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/invite/index.page.tsx
@@ -3,13 +3,7 @@ import { useContext, useState } from 'react'
 import { pipeSSRProps } from '@helpers/util/ssr/pipeSSRProps'
 import { handleSSRSuccessProps } from '@helpers/util/ssr/handleSSRSuccessProps'
 import { actions as actionConstants } from '@constants/actions'
-import classNames from 'classnames'
-import {
-    features,
-    groupTabIds,
-    layoutIds,
-    routeParams,
-} from '@constants/routes'
+import { features, groupTabIds, layoutIds } from '@constants/routes'
 import { withUser } from '@helpers/hofs/withUser'
 import { withRoutes } from '@helpers/hofs/withRoutes'
 import { GetServerSidePropsContext } from '@appTypes/next'
@@ -17,31 +11,25 @@ import { withTextContent } from '@helpers/hofs/withTextContent'
 import { withGroup } from '@helpers/hofs/withGroup'
 import { formTypes } from '@constants/forms'
 import {
-    selectCsrfToken,
     selectFormData,
-    selectParam,
     selectRequestMethod,
-    selectUser,
     selectPageProps,
     selectPagination,
+    selectUser,
 } from '@helpers/selectors/context'
-import { User } from '@appTypes/user'
-import { getGenericFormError, ServerSideFormData } from '@helpers/util/form'
+import { ServerSideFormData } from '@helpers/util/form'
 import { requestMethods } from '@constants/fetch'
-import { getServiceErrorDataValidationErrors } from '@services/index'
-import { handleSSRErrorProps } from '@helpers/util/ssr/handleSSRErrorProps'
 import { notifications } from '@constants/notifications'
-import { FormConfig, FormErrors } from '@appTypes/form'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { NotificationsContext } from '@helpers/contexts/index'
-import { useFormConfig } from '@helpers/hooks/useForm'
 import { useNotification } from '@helpers/hooks/useNotification'
 import { GroupPage } from '@appTypes/page'
 import { postGroupUserInvite } from '@services/postGroupUserInvite'
 import { getStandardServiceHeaders } from '@helpers/fetch'
 import { getFeatureEnabled } from '@services/getFeatureEnabled'
+import { VMessage, VRules, validate } from '@helpers/validation'
+import { MultiInput } from '@components/forms/MultiInput'
 import { GenericPageTextContent } from '@appTypes/content'
 import { DynamicListContainer } from '@components/layouts/DynamicListContainer'
 import { DataGrid } from '@components/layouts/DataGrid'
@@ -59,6 +47,10 @@ import { Dialog } from '@components/generic/Dialog'
 import { deletePlatformInvite } from '@services/deletePlatformInvite'
 import { deleteGroupInvite } from '@services/deleteGroupInvite'
 import { LayoutWidthContainer } from '@components/layouts/LayoutWidthContainer'
+import { User } from '@appTypes/user'
+import { handleSSRErrorProps } from '@helpers/util/ssr/handleSSRErrorProps'
+import { getServiceErrorDataValidationErrors } from '@services/index'
+import { FormErrors } from '@appTypes/form'
 
 declare interface ContentText extends GenericPageTextContent {
     noPendingInvites: string
@@ -75,21 +67,23 @@ export interface Props extends GroupPage {
  */
 export const GroupMemberInvitePage: (props: Props) => JSX.Element = ({
     csrfToken,
-    forms,
     user,
-    contentText,
     groupId,
     pagination,
     pendingList,
+    contentText,
 }) => {
-    const formConfig: FormConfig = useFormConfig(
-        formTypes.INVITE_USER,
-        forms[formTypes.INVITE_USER]
-    )
+    const [validation, setValidation] = useState<Array<VMessage>>([])
+    const [emails, setEmails] = useState<Array<string>>([])
+    const notificationsContext: any = useContext(NotificationsContext)
+    const onChange = (e) => {
+        const el = e.target as HTMLInputElement
+        const validation = validate(el.value, [VRules.EMAIL, VRules.REQUIRED])
+        setValidation(validation)
+    }
+
     const [dynamicPendingList, setPendingList] = useState(pendingList)
     const [dynamicPagination, setPagination] = useState(pagination)
-    const [errors, setErrors] = useState(formConfig?.errors)
-    const notificationsContext: any = useContext(NotificationsContext)
     const [inviteToDelete, setInviteToDelete] = useState<PendingMember | null>(
         null
     )
@@ -193,9 +187,13 @@ export const GroupMemberInvitePage: (props: Props) => JSX.Element = ({
     const hasPendingInvites = !!dynamicPendingList?.length
 
     /**
-     * Client-side submission handler - TODO: Pending API
+     *TODO: Only accepts first email selected. Project ended. Extend API endpoint to take full array of emails
      */
-    const handleSubmit = async (formData: FormData): Promise<FormErrors> => {
+    const handleInvite = async () => {
+        if (Array.isArray(emails) && emails.length) {
+            return
+        }
+        const [email] = emails
         const headers = getStandardServiceHeaders({
             csrfToken,
             accessToken: user.accessToken,
@@ -204,33 +202,23 @@ export const GroupMemberInvitePage: (props: Props) => JSX.Element = ({
             await postGroupUserInvite({
                 user,
                 headers,
-                body: formData as any,
+                email: emails[0],
                 groupId,
             })
-
-            const emailAddress: FormDataEntryValue = formData.get('Email')
             useNotification({
                 notificationsContext,
                 text: {
                     heading: notifications.SUCCESS,
-                    body: `Invite sent to ${emailAddress}`,
+                    body: `Invite sent to ${email}`,
                 },
             })
-            handleGetPage({
-                pageNumber: pagination.pageNumber,
-                pageSize: pagination.pageSize,
-                refresh: true,
-            })
-            return Promise.resolve({})
-        } catch (error) {
-            const errors: FormErrors =
-                getServiceErrorDataValidationErrors(error) ||
-                getGenericFormError(error)
-
-            setErrors(errors)
-
-            return Promise.resolve(errors)
-        }
+        } catch (error) {}
+        handleGetPage({
+            pageNumber: pagination.pageNumber,
+            pageSize: pagination.pageSize,
+            refresh: true,
+        })
+        return Promise.resolve({})
     }
 
     /**
@@ -263,76 +251,58 @@ export const GroupMemberInvitePage: (props: Props) => JSX.Element = ({
      * Render
      */
     return (
-        <>
-            <Dialog
-                id="dialog-delete-domain"
-                isOpen={isDeleteInviteOpen}
-                text={{
-                    cancelButton: 'Cancel',
-                    confirmButton: 'Yes, cancel invite',
-                    heading: 'Cancel invite',
-                }}
-                cancelAction={() => {
-                    setInviteToDelete(null)
-                }}
-                confirmAction={() => {
-                    handleDeleteInvite()
-                    setInviteToDelete(null)
-                }}
-            >
-                <p className="u-text-bold">
-                    {`Are you sure you would like to cancel the invite for ${inviteToDelete?.email}?`}
-                </p>
-            </Dialog>
-            <LayoutColumn className="c-page-body">
-                <div className="u-mb-12">
-                    <FormWithErrorSummary
-                        csrfToken={csrfToken}
-                        formConfig={formConfig}
-                        errors={errors}
-                        text={{
-                            form: {
-                                submitButton: 'Send invite',
-                            },
-                        }}
-                        submitAction={handleSubmit}
-                        shouldClearOnSubmitSuccess={true}
+        <LayoutColumn className="c-page-body">
+            <LayoutColumnContainer>
+                <LayoutColumn tablet={8}>
+                    <MultiInput
+                        label="Email address"
+                        type="text"
+                        validation={validation}
+                        onChange={onChange}
+                        getMulti={setEmails}
+                    />
+                    <button
+                        className={`c-button u-mt-10 ${
+                            !emails.length ? 'c-button--disabled' : null
+                        }`}
+                        onClick={handleInvite}
+                        disabled={!emails.length}
                     >
-                        <h2 className="nhsuk-heading-l">{mainHeading}</h2>
-                    </FormWithErrorSummary>
-                </div>
-                <div>
-                    <h2 className="nhsuk-heading-l">{secondaryHeading}</h2>
-                    {hasPendingInvites ? (
-                        <DynamicListContainer
-                            containerElementType="div"
-                            shouldEnableLoadMore
-                            className="u-list-none u-p-0"
-                        >
-                            <DataGrid
-                                id="admin-table-pending-invites"
-                                columnList={columnList}
-                                rowList={rowList}
-                                text={{
-                                    caption: 'Pending invites',
-                                }}
-                            />
-
-                            <PaginationWithStatus
-                                id="group-list-pagination"
+                        Send invite
+                    </button>
+                    <div>
+                        <h2 className="nhsuk-heading-l">{secondaryHeading}</h2>
+                        {hasPendingInvites ? (
+                            <DynamicListContainer
+                                containerElementType="div"
                                 shouldEnableLoadMore
-                                getPageAction={handleGetPage}
-                                {...dynamicPagination}
-                            />
-                        </DynamicListContainer>
-                    ) : (
-                        <div>
-                            <p>{noPendingInvites}</p>
-                        </div>
-                    )}
-                </div>
-            </LayoutColumn>
-        </>
+                                className="u-list-none u-p-0"
+                            >
+                                <DataGrid
+                                    id="admin-table-pending-invites"
+                                    columnList={columnList}
+                                    rowList={rowList}
+                                    text={{
+                                        caption: 'Pending invites',
+                                    }}
+                                />
+
+                                <PaginationWithStatus
+                                    id="group-list-pagination"
+                                    shouldEnableLoadMore
+                                    getPageAction={handleGetPage}
+                                    {...dynamicPagination}
+                                />
+                            </DynamicListContainer>
+                        ) : (
+                            <div>
+                                <p>{noPendingInvites}</p>
+                            </div>
+                        )}
+                    </div>
+                </LayoutColumn>
+            </LayoutColumnContainer>
+        </LayoutColumn>
     )
 }
 
@@ -403,36 +373,6 @@ export const getServerSideProps: GetServerSideProps = async (
                 props.pendingList = result.data
             } catch (e) {}
 
-            /**
-             * Handle server-side form post
-             */
-            if (formData && requestMethod === requestMethods.POST) {
-                props.forms[formTypes.INVITE_USER].initialValues = formData
-
-                try {
-                    const emailAddress: string = formData.get('Email')
-                    props.notifications = [
-                        {
-                            heading: notifications.SUCCESS,
-                            main: `Invite sent to ${emailAddress}`,
-                        },
-                    ]
-                    return {
-                        props: props,
-                    }
-                } catch (error) {
-                    const validationErrors: FormErrors =
-                        getServiceErrorDataValidationErrors(error)
-
-                    if (validationErrors) {
-                        props.forms[formTypes.INVITE_USER].errors =
-                            validationErrors
-                    } else {
-                        return handleSSRErrorProps({ props, error })
-                    }
-                }
-            }
-
             /**
              * Return data to page template
              */
diff --git a/futurenhs.app/pages/groups/[groupId]/join/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/join/index.page.tsx
index 61c0a8f01..0eb51c07f 100644
--- a/futurenhs.app/pages/groups/[groupId]/join/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/join/index.page.tsx
@@ -22,7 +22,7 @@ import { formTypes } from '@constants/forms'
 import { getStandardServiceHeaders } from '@helpers/fetch'
 import { getServiceErrorDataValidationErrors } from '@services/index'
 import { selectForm } from '@helpers/selectors/forms'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { putGroup } from '@services/putGroup'
diff --git a/futurenhs.app/pages/groups/[groupId]/leave/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/leave/index.page.tsx
index b60438e39..aec4828f0 100644
--- a/futurenhs.app/pages/groups/[groupId]/leave/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/leave/index.page.tsx
@@ -21,7 +21,7 @@ import { useFormConfig } from '@helpers/hooks/useForm'
 import { formTypes } from '@constants/forms'
 import { getStandardServiceHeaders } from '@helpers/fetch'
 import { getServiceErrorDataValidationErrors } from '@services/index'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { putGroup } from '@services/putGroup'
diff --git a/futurenhs.app/pages/groups/[groupId]/members/[memberId]/update/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/members/[memberId]/update/index.page.tsx
index 86600f01d..298b58285 100644
--- a/futurenhs.app/pages/groups/[groupId]/members/[memberId]/update/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/members/[memberId]/update/index.page.tsx
@@ -36,7 +36,7 @@ import { actions as actionsConstants } from '@constants/actions'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { UserProfile } from '@components/generic/UserProfile'
-import { Form } from '@components/forms/Form'
+import { Form } from '@components/old_forms/Form'
 import { ErrorSummary } from '@components/generic/ErrorSummary'
 import { Dialog } from '@components/generic/Dialog'
 import { FormErrors, FormConfig, FormOptions } from '@appTypes/form'
diff --git a/futurenhs.app/pages/groups/[groupId]/update/index.page.tsx b/futurenhs.app/pages/groups/[groupId]/update/index.page.tsx
index 1ccc6cff3..8ea0f44a2 100644
--- a/futurenhs.app/pages/groups/[groupId]/update/index.page.tsx
+++ b/futurenhs.app/pages/groups/[groupId]/update/index.page.tsx
@@ -31,7 +31,7 @@ import { FormErrors } from '@appTypes/form'
 import { User } from '@appTypes/user'
 import { useRouter } from 'next/router'
 import { useFormConfig } from '@helpers/hooks/useForm'
-import { FormWithErrorSummary } from '@components/forms/FormWithErrorSummary'
+import { FormWithErrorSummary } from '@components/old_forms/FormWithErrorSummary'
 import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer'
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { FormConfig, FormField } from '@appTypes/form'
diff --git a/futurenhs.app/pages/users/[userId]/update/index.page.tsx b/futurenhs.app/pages/users/[userId]/update/index.page.tsx
index bd79d89f1..aa91286f4 100644
--- a/futurenhs.app/pages/users/[userId]/update/index.page.tsx
+++ b/futurenhs.app/pages/users/[userId]/update/index.page.tsx
@@ -39,7 +39,7 @@ import { LayoutColumnContainer } from '@components/layouts/LayoutColumnContainer
 import { LayoutColumn } from '@components/layouts/LayoutColumn'
 import { Avatar } from '@components/generic/Avatar'
 import { initials } from '@helpers/formatters/initials'
-import { Form } from '@components/forms/Form'
+import { Form } from '@components/old_forms/Form'
 import { ErrorSummary } from '@components/generic/ErrorSummary'
 import { getGenericFormError } from '@helpers/util/form'
 import { useFormConfig } from '@helpers/hooks/useForm'
diff --git a/futurenhs.app/services/postGroupUserInvite/index.ts b/futurenhs.app/services/postGroupUserInvite/index.ts
index 5ab553430..8ea56d7d4 100644
--- a/futurenhs.app/services/postGroupUserInvite/index.ts
+++ b/futurenhs.app/services/postGroupUserInvite/index.ts
@@ -15,7 +15,7 @@ declare type Options = {
     user: User
     groupId: string
     headers?: any
-    body: FormData | ServerSideFormData
+    email: string
 }
 
 declare type Dependencies = {
@@ -24,13 +24,12 @@ declare type Dependencies = {
 }
 
 export const postGroupUserInvite = async (
-    { user, groupId, headers = {}, body }: Options,
+    { user, groupId, headers = {}, email }: Options,
     dependencies?: Dependencies
 ): Promise<ServiceResponse<null>> => {
     const setFetchOptions =
         dependencies?.setFetchOptions ?? setFetchOptionsHelper
     const fetchJSON = dependencies?.fetchJSON ?? fetchJSONHelper
-    const emailAddress: FormDataEntryValue = body.get('Email')
 
     const gateway = process.env.NEXT_PUBLIC_API_GATEWAY_BASE_URL
     const registrationPath = api.POST_GROUP_INVITE.replace(
@@ -42,7 +41,7 @@ export const postGroupUserInvite = async (
         method: requestMethods.POST,
         headers: headers,
         body: {
-            emailAddress: emailAddress,
+            emailAddress: email,
         },
     })
     const apiResponse: any = await fetchJSON(