From 84645302b3d0b355f9ac1f5c6de85264edb73ca3 Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Mon, 4 Nov 2024 08:14:58 +0100
Subject: [PATCH] :art: more accessibility for forms #2505 (#2510)

* :art: more accessibility

* :art: add tel type

* :art: remove logs

* :art: update documentation with eds feature request link

* :art: fix typo

* :art:update to small text and remove placeholders
---
 sanityv3/schemas/textSnippets.ts              |  16 +-
 web/components/src/Form/FormSelect.tsx        |   3 +
 web/components/src/Form/FormTextField.tsx     |   4 +-
 web/core/TextField/TextArea.tsx               |  65 ++
 web/core/TextField/TextField.tsx              | 141 +++++
 .../topicPages/Form/CareerFairForm.tsx        | 151 +++--
 .../topicPages/Form/ContactEquinorForm.tsx    | 128 ++--
 .../topicPages/Form/OrderReportsForm.tsx      | 593 +++++++++---------
 .../topicPages/Form/SubscribeForm.tsx         | 458 +++++++-------
 .../careersContactForm/CareersContactForm.tsx | 160 ++---
 10 files changed, 970 insertions(+), 749 deletions(-)
 create mode 100644 web/core/TextField/TextArea.tsx
 create mode 100644 web/core/TextField/TextField.tsx

diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts
index 8f2e973bb..dd15a9442 100644
--- a/sanityv3/schemas/textSnippets.ts
+++ b/sanityv3/schemas/textSnippets.ts
@@ -16,8 +16,8 @@ export const groups = {
 }
 const snippets: textSnippet = {
   country_code_format: {
-    title: 'e.g. +47',
-    defaultValue: 'e.g. +47',
+    title: 'Enter country code with phone number',
+    defaultValue: 'Enter  country code with phone number',
     group: groups.form,
   },
   all_fields_mandatory: {
@@ -671,7 +671,7 @@ const snippets: textSnippet = {
   careers_contact_form_supporting_documents: {
     title: 'Supporting Documents checkbox',
     defaultValue: 'Tick the box if you would like to send supporting documents, and we will get in touch with you',
-    group: groups.careerFairForm,
+    group: groups.careerContactForm,
   },
 
   form_sending: {
@@ -719,6 +719,16 @@ const snippets: textSnippet = {
     defaultValue: 'Reopen the form',
     group: groups.form,
   },
+  form_validation_maxChars: {
+    title: 'Max X chars',
+    defaultValue: 'Max {maxChars} characters',
+    group: groups.form,
+  },
+  form_antirobot_validation_required: {
+    title: 'Anti-Robot verification is required',
+    defaultValue: 'Anti-Robot verification is required',
+    group: groups.form,
+  },
   newsroom_topic_filter: {
     title: 'Topic filter heading',
     defaultValue: 'Topic',
diff --git a/web/components/src/Form/FormSelect.tsx b/web/components/src/Form/FormSelect.tsx
index d555058b0..47e31f322 100644
--- a/web/components/src/Form/FormSelect.tsx
+++ b/web/components/src/Form/FormSelect.tsx
@@ -8,6 +8,9 @@ const StyledEdsNativeSelectField = styled(EdsNativeSelect)`
   select {
     font-size: var(--typeScale-1);
   }
+  label {
+    color: var(--default-text);
+  }
 `
 
 export const FormSelect = forwardRef<HTMLDivElement, NativeSelectProps>(function EdsNativeSelect(
diff --git a/web/components/src/Form/FormTextField.tsx b/web/components/src/Form/FormTextField.tsx
index 98177612a..0f33fe599 100644
--- a/web/components/src/Form/FormTextField.tsx
+++ b/web/components/src/Form/FormTextField.tsx
@@ -3,7 +3,6 @@ import styled from 'styled-components'
 import { TextField as EdsTextField, TextFieldProps } from '@equinor/eds-core-react'
 
 export const TextFieldWrapper = styled.div`
-  padding: var(--space-small) 0px var(--space-medium) 0px;
   p {
     color: var(--clear-red-100);
     font-size: var(--typeScale-0);
@@ -15,6 +14,9 @@ const StyledEdsTextField = styled(EdsTextField)`
   textarea {
     font-size: var(--typeScale-1);
   }
+  label {
+    color: var(--default-text);
+  }
 `
 
 export const FormTextField = forwardRef<HTMLDivElement, TextFieldProps>(function TextField({ children, ...rest }, ref) {
diff --git a/web/core/TextField/TextArea.tsx b/web/core/TextField/TextArea.tsx
new file mode 100644
index 000000000..6a9f41d4f
--- /dev/null
+++ b/web/core/TextField/TextArea.tsx
@@ -0,0 +1,65 @@
+import { forwardRef, useState, TextareaHTMLAttributes, useCallback, CSSProperties } from 'react'
+import { mergeRefs, useAutoResize } from '@equinor/eds-utils'
+import { SharedTextFieldProps } from './TextField'
+import { Input } from '@equinor/eds-core-react'
+
+export type TextareaProps = {
+  /** Type */
+  type?: string
+  /** Read Only */
+  readOnly?: boolean
+  /** Specifies max rows for multiline  */
+  rowsMax?: number
+} & SharedTextFieldProps &
+  TextareaHTMLAttributes<HTMLTextAreaElement>
+
+/** Temporary. Until feature request,
+ * https://github.com/equinor/design-system/issues/3622,
+ * is resolved */
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { variant, disabled = false, type = 'text', rowsMax = 10, className = '', ...other },
+  ref,
+) {
+  const [textareaEl, setTextareaEl] = useState<HTMLTextAreaElement | null>(null)
+  let fontSize = 16
+
+  if (textareaEl) {
+    fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize)
+  }
+
+  const padding = 12 //6px from InputToken in EDS
+  const maxHeight = parseFloat('1.5') * fontSize * rowsMax + padding
+  //@ts-ignore: textareaEl is required, null is handled in hook
+  useAutoResize(textareaEl, rowsMax ? maxHeight : undefined)
+
+  const combinedRef = useCallback(() => mergeRefs<HTMLTextAreaElement>(ref, setTextareaEl), [setTextareaEl, ref])()
+
+  const inputProps = {
+    ref: combinedRef,
+    type,
+    disabled,
+    variant,
+    ...other,
+    style: { height: 'auto' },
+    className,
+  }
+
+  const leftAdornmentStyles = {
+    style: { alignItems: 'flex-start' },
+  }
+  const rightAdornmentStyles = {
+    style: {
+      alignItems: 'flex-start',
+      pointerEvents: 'none' as CSSProperties['pointerEvents'],
+    },
+  }
+
+  return (
+    <Input
+      as="textarea"
+      rightAdornmentsProps={rightAdornmentStyles}
+      leftAdornmentsProps={leftAdornmentStyles}
+      {...inputProps}
+    />
+  )
+})
diff --git a/web/core/TextField/TextField.tsx b/web/core/TextField/TextField.tsx
new file mode 100644
index 000000000..49c5079ca
--- /dev/null
+++ b/web/core/TextField/TextField.tsx
@@ -0,0 +1,141 @@
+import { InputProps, Input } from '@equinor/eds-core-react'
+import { ReactNode, InputHTMLAttributes, forwardRef, ForwardedRef, useId, TextareaHTMLAttributes } from 'react'
+import envisTwMerge from '../../twMerge'
+import { Textarea } from './TextArea'
+
+export type Variants = 'error' | 'warning' | 'success'
+
+export type SharedTextFieldProps = {
+  /** Variants */
+  variant?: Variants
+  /** Description,shown below label */
+  description?: ReactNode
+  /** Input unique id. This is required to ensure accesibility */
+  id: string
+  /** Label text */
+  label?: ReactNode
+  /** Meta text */
+  meta?: ReactNode
+  /** Unit text */
+  unit?: string
+  /** Helper text */
+  helperText?: string
+  /** Input ref */
+  inputRef?: ForwardedRef<HTMLInputElement>
+  /** InputIcon */
+  inputIcon?: ReactNode
+  /** HelperIcon */
+  helperIcon?: ReactNode
+  helperTextClassName?: string
+  /** If `true` a `textarea` is rendered for multiline support. Make sure to use `textareaRef` if you need to access reference element  */
+  multiline?: boolean
+  /**  Maximum number of rows if `multiline` is set to `true` */
+  rowsMax?: number
+  /** Textarea ref when multiline is set to `true` */
+  textareaRef?: ForwardedRef<HTMLTextAreaElement>
+} & InputProps
+
+type TextFieldProps = SharedTextFieldProps &
+  (TextareaHTMLAttributes<HTMLTextAreaElement> | InputHTMLAttributes<HTMLInputElement>)
+
+type FieldProps = SharedTextFieldProps & {
+  multiline: boolean
+} & React.HTMLAttributes<HTMLTextAreaElement | HTMLInputElement>
+/** Proxy component for working around typescript and element type switching */
+const Field = forwardRef<HTMLTextAreaElement | HTMLInputElement, FieldProps>(function Field(props, ref) {
+  return props.multiline ? (
+    <Textarea ref={ref as ForwardedRef<HTMLTextAreaElement>} {...props} className={`[&_textarea]:text-base`} />
+  ) : (
+    <Input ref={ref as ForwardedRef<HTMLInputElement>} {...props} className={`[&_input]:text-base`} />
+  )
+})
+
+/** Temporary. Until feature request
+ *  https://github.com/equinor/design-system/issues/3622
+ *  is resolved */
+export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(function TextField(
+  {
+    id,
+    label,
+    description,
+    unit,
+    helperText,
+    placeholder,
+    disabled,
+    inputIcon,
+    helperIcon,
+    variant,
+    className = '',
+    helperTextClassName = '',
+    multiline = false,
+    rowsMax,
+    textareaRef,
+    inputRef,
+    ...other
+  },
+  ref,
+) {
+  const helperTextId = useId()
+  const inputDescriptionId = useId()
+  const hasRightAdornments = Boolean(unit || inputIcon)
+  let fieldProps = {
+    'aria-invalid': variant === 'error' || undefined,
+    disabled,
+    placeholder,
+    id,
+    variant,
+    rightAdornments: hasRightAdornments && (
+      <>
+        {inputIcon}
+        <span>{unit}</span>
+      </>
+    ),
+    ref: inputRef || textareaRef,
+    rowsMax,
+    multiline,
+    ...other,
+  }
+
+  if (helperText || description) {
+    fieldProps = {
+      'aria-describedby': `${helperText ? helperTextId : ''}${helperText && description ? ' ' : ''}${
+        description ? inputDescriptionId : ''
+      }`,
+      ...fieldProps,
+    }
+  }
+
+  const variantClassName = {
+    error: 'text-clear-red-100',
+    success: 'text-norwegian-woods-100',
+    warning: '',
+  }
+
+  return (
+    <div ref={ref} className={envisTwMerge(``, className)}>
+      <label htmlFor={id} className="mx-2 text-base font-medium">
+        {label}
+      </label>
+      {!!description && (
+        <div id={inputDescriptionId} className="px-2 pt-2 pb-1 text-xs font-normal">
+          {description}
+        </div>
+      )}
+      <Field {...fieldProps} />
+      {!!helperText && (
+        <div
+          id={helperTextId}
+          className={envisTwMerge(
+            `${
+              variant ? variantClassName[variant] : ''
+            } mt-2 ml-2 grid auto-cols-auto gap-2 items-start justify-start whitespace-pre-line font-semibold`,
+            helperTextClassName,
+          )}
+        >
+          {helperIcon && helperIcon}
+          {helperText}
+        </div>
+      )}
+    </div>
+  )
+})
diff --git a/web/pageComponents/topicPages/Form/CareerFairForm.tsx b/web/pageComponents/topicPages/Form/CareerFairForm.tsx
index 446a7cf91..670474e06 100644
--- a/web/pageComponents/topicPages/Form/CareerFairForm.tsx
+++ b/web/pageComponents/topicPages/Form/CareerFairForm.tsx
@@ -3,16 +3,11 @@ import { Icon } from '@equinor/eds-core-react'
 import { useForm, Controller } from 'react-hook-form'
 import { error_filled } from '@equinor/eds-icons'
 import { FormattedMessage, useIntl } from 'react-intl'
-import {
-  FormButton,
-  FormTextField,
-  Checkbox,
-  FormSelect,
-  FormSubmitSuccessBox,
-  FormSubmitFailureBox,
-} from '@components'
+import { FormTextField, Checkbox, FormSelect, FormSubmitSuccessBox, FormSubmitFailureBox } from '@components'
 import { BaseSyntheticEvent, useState } from 'react'
 import FriendlyCaptcha from './FriendlyCaptcha'
+import { TextField } from '@core/TextField/TextField'
+import { Button } from '@core/Button'
 
 type FormValues = {
   organisation: string
@@ -28,26 +23,9 @@ type FormValues = {
 
 const CareerFairForm = () => {
   const intl = useIntl()
-  const [submitButtonEnabled, setSubmitButtonEnabled] = useState(false)
+  const [isFriendlyChallengeDone, setIsFriendlyChallengeDone] = useState(false)
   const [isServerError, setServerError] = useState(false)
   const [isSuccessfullySubmitted, setSuccessfullySubmitted] = useState(false)
-  const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
-    data.preferredLang = intl.locale
-    const res = await fetch('/api/forms/service-now-career-fair-events', {
-      body: JSON.stringify({
-        data,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        frcCaptchaSolution: (event?.target as any)['frc-captcha-solution'].value,
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-    })
-
-    setServerError(res.status != 200)
-    setSuccessfullySubmitted(res.status == 200)
-  }
 
   const {
     handleSubmit,
@@ -55,7 +33,8 @@ const CareerFairForm = () => {
     reset,
     register,
     watch,
-    formState: { isSubmitted, isSubmitting, isSubmitSuccessful },
+    setError,
+    formState: { errors, isSubmitted, isSubmitting, isSubmitSuccessful },
   } = useForm({
     defaultValues: {
       organisation: '',
@@ -72,17 +51,51 @@ const CareerFairForm = () => {
       preferredLang: intl.locale,
     },
   })
+  const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
+    data.preferredLang = intl.locale
+    if (isFriendlyChallengeDone) {
+      const res = await fetch('/api/forms/service-now-career-fair-events', {
+        body: JSON.stringify({
+          data,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          frcCaptchaSolution: (event?.target as any)['frc-captcha-solution'].value,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      })
+
+      setServerError(res.status != 200)
+      setSuccessfullySubmitted(res.status == 200)
+    } else {
+      //@ts-ignore: TODO: types
+      setError('root.notCompletedCaptcha', {
+        type: 'custom',
+        message: intl.formatMessage({
+          id: 'form_antirobot_validation_required',
+          defaultMessage: 'Anti-Robot verification is required',
+        }),
+      })
+    }
+  }
 
   const watchEvent = watch('event')
   return (
     <>
+      {!isSuccessfullySubmitted && !isServerError && (
+        <div className="pb-6 text-sm">
+          <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
+        </div>
+      )}
       <form
         onSubmit={handleSubmit(onSubmit)}
         onReset={() => {
           reset()
-          setSubmitButtonEnabled(false)
+          setIsFriendlyChallengeDone(false)
           setSuccessfullySubmitted(false)
         }}
+        className="flex flex-col gap-12"
       >
         {!isSuccessfullySubmitted && !isServerError && (
           <>
@@ -128,10 +141,6 @@ const CareerFairForm = () => {
                     id: 'career_fair_form_contact_person',
                     defaultMessage: 'Contact Person',
                   })}
-                  placeholder={intl.formatMessage({
-                    id: 'career_fair_form_name_placeholder',
-                    defaultMessage: 'Jane Doe',
-                  })}
                   inputRef={ref}
                   aria-required="true"
                   inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
@@ -157,26 +166,18 @@ const CareerFairForm = () => {
                 },
               }}
               render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-                <FormTextField
+                <TextField
                   {...props}
                   id={props.name}
-                  label={
-                    <>
-                      <span>
-                        {intl.formatMessage({
-                          id: 'career_fair_form_phone',
-                          defaultMessage: 'Phone Number',
-                        })}
-                      </span>
-                      <br />
-                      <span className="text-xs">
-                        {intl.formatMessage({
-                          id: 'country_code_format',
-                          defaultMessage: 'e.g. +47',
-                        })}
-                      </span>
-                    </>
-                  }
+                  label={intl.formatMessage({
+                    id: 'career_fair_form_phone',
+                    defaultMessage: 'Phone Number',
+                  })}
+                  description={intl.formatMessage({
+                    id: 'country_code_format',
+                    defaultMessage: 'Enter phone number with country code',
+                  })}
+                  type="tel"
                   inputRef={ref}
                   inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
                   helperText={error?.message}
@@ -254,7 +255,7 @@ const CareerFairForm = () => {
                       id: 'career_fair_form_visit_equinor',
                       defaultMessage: 'Would like to visit Equinor office or facility',
                     }) && (
-                    <p className='-mt-2' id="select-helper-text">
+                    <p className="-mt-2" id="select-helper-text">
                       {intl.formatMessage({
                         id: 'career_fair_form_visit_equinor_helper_text',
                         defaultMessage:
@@ -276,7 +277,7 @@ const CareerFairForm = () => {
                 }),
               }}
               render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-                <FormTextField
+                <TextField
                   {...props}
                   id={props.name}
                   multiline
@@ -285,8 +286,17 @@ const CareerFairForm = () => {
                   aria-required="true"
                   label={intl.formatMessage({
                     id: 'career_fair_form_event_description',
-                    defaultMessage: 'Event Description (max 3400 characters)',
+                    defaultMessage: 'Event Description',
                   })}
+                  description={intl.formatMessage(
+                    {
+                      id: 'form_validation_maxChars',
+                      defaultMessage: 'Max {maxChars} characters',
+                    },
+                    {
+                      maxChars: '3400',
+                    },
+                  )}
                   inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
                   helperText={error?.message}
                   inputRef={ref}
@@ -310,7 +320,7 @@ const CareerFairForm = () => {
               )}
             />
             <Checkbox
-              className='pb-4'
+              className="pb-4"
               label={intl.formatMessage({
                 id: 'career_fair_form_supporting_documents',
                 defaultMessage:
@@ -320,22 +330,32 @@ const CareerFairForm = () => {
               {...register('supportingDocuments')}
             />
 
-            <FriendlyCaptcha
-              doneCallback={() => {
-                setSubmitButtonEnabled(true)
-              }}
-              errorCallback={(error: any) => {
-                console.error('FriendlyCaptcha encountered an error', error)
-                setSubmitButtonEnabled(true)
-              }}
-            />
-            <FormButton type="submit" disabled={!submitButtonEnabled}>
+            <div className="flex flex-col gap-2">
+              <FriendlyCaptcha
+                doneCallback={() => {
+                  setIsFriendlyChallengeDone(true)
+                }}
+                errorCallback={(error: any) => {
+                  console.error('FriendlyCaptcha encountered an error', error)
+                  setIsFriendlyChallengeDone(true)
+                }}
+              />
+              {/*@ts-ignore: TODO: types*/}
+              {errors?.root?.notCompletedCaptcha && (
+                <p role="alert" className="text-clear-red-100 flex gap-2 font-semibold">
+                  {/*@ts-ignore: TODO: types*/}
+                  <span className="mt-1">{errors.root.notCompletedCaptcha.message}</span>
+                  <Icon data={error_filled} aria-hidden="true" />
+                </p>
+              )}
+            </div>
+            <Button type="submit">
               {isSubmitting ? (
                 <FormattedMessage id="form_sending" defaultMessage={'Sending...'}></FormattedMessage>
               ) : (
                 <FormattedMessage id="career_fair_form_cta" defaultMessage="Submit Form" />
               )}
-            </FormButton>
+            </Button>
           </>
         )}
         {isSubmitSuccessful && !isServerError && <FormSubmitSuccessBox type="reset" />}
@@ -345,7 +365,6 @@ const CareerFairForm = () => {
             onClick={() => {
               reset(undefined, { keepValues: true })
               setServerError(false)
-              setSubmitButtonEnabled(false)
             }}
           />
         )}
diff --git a/web/pageComponents/topicPages/Form/ContactEquinorForm.tsx b/web/pageComponents/topicPages/Form/ContactEquinorForm.tsx
index 89e37c462..dfc081000 100644
--- a/web/pageComponents/topicPages/Form/ContactEquinorForm.tsx
+++ b/web/pageComponents/topicPages/Form/ContactEquinorForm.tsx
@@ -1,12 +1,13 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Icon } from '@equinor/eds-core-react'
 import { useForm, Controller } from 'react-hook-form'
 import { error_filled } from '@equinor/eds-icons'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { FormButton, FormTextField, FormSelect, FormSubmitSuccessBox, FormSubmitFailureBox } from '@components'
+import { FormTextField, FormSelect, FormSubmitSuccessBox, FormSubmitFailureBox } from '@components'
 import { BaseSyntheticEvent, useState } from 'react'
 import FriendlyCaptcha from './FriendlyCaptcha'
 import { ContactFormCatalogType } from '../../../types'
+import { Button } from '@core/Button'
+import { TextField } from '@core/TextField/TextField'
 
 type ContactEquinorFormProps = {
   isHumanRightsRequest?: boolean
@@ -21,30 +22,9 @@ type FormValues = {
 const ContactEquinorForm = (props: ContactEquinorFormProps) => {
   const intl = useIntl()
   const { isHumanRightsRequest } = props
-  const [submitButtonEnabled, setSubmitButtonEnabled] = useState(false)
   const [isServerError, setServerError] = useState(false)
+  const [isFriendlyChallengeDone, setIsFriendlyChallengeDone] = useState(false)
   const [isSuccessfullySubmitted, setSuccessfullySubmitted] = useState(false)
-  const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
-    const res = await fetch('/api/forms/service-now-contact-us', {
-      body: JSON.stringify({
-        data,
-        frcCaptchaSolution: (event?.target as any)['frc-captcha-solution'].value,
-        isHumanRightsInformationRequest: data.category.includes(
-          intl.formatMessage({
-            id: 'contact_form_human_rights_information_request',
-            defaultMessage: 'Human Rights Information Request',
-          }),
-        ),
-        catalogType: getCatalog(data.category),
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-    })
-    setServerError(res.status != 200)
-    setSuccessfullySubmitted(res.status == 200)
-  }
 
   const getCatalog = (category: string): ContactFormCatalogType | null => {
     if (
@@ -67,12 +47,12 @@ const ContactEquinorForm = (props: ContactEquinorFormProps) => {
       return 'loginIssues'
     else return null
   }
-
   const {
     handleSubmit,
     control,
     reset,
-    formState: { isSubmitted, isSubmitting, isSubmitSuccessful },
+    setError,
+    formState: { errors, isSubmitted, isSubmitting, isSubmitSuccessful },
   } = useForm({
     defaultValues: {
       name: '',
@@ -89,15 +69,55 @@ const ContactEquinorForm = (props: ContactEquinorFormProps) => {
           }),
     },
   })
+
+  const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
+    if (isFriendlyChallengeDone) {
+      const res = await fetch('/api/forms/service-now-contact-us', {
+        body: JSON.stringify({
+          data,
+          frcCaptchaSolution: (event?.target as any)['frc-captcha-solution'].value,
+          isHumanRightsInformationRequest: data.category.includes(
+            intl.formatMessage({
+              id: 'contact_form_human_rights_information_request',
+              defaultMessage: 'Human Rights Information Request',
+            }),
+          ),
+          catalogType: getCatalog(data.category),
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      })
+      setServerError(res.status != 200)
+      setSuccessfullySubmitted(res.status == 200)
+    } else {
+      //@ts-ignore: TODO: types
+      setError('root.notCompletedCaptcha', {
+        type: 'custom',
+        message: intl.formatMessage({
+          id: 'form_antirobot_validation_required',
+          defaultMessage: 'Anti-Robot verification is required',
+        }),
+      })
+    }
+  }
+
   return (
     <>
+      {!isSuccessfullySubmitted && !isServerError && (
+        <div className="pb-6 text-sm">
+          <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
+        </div>
+      )}
       <form
         onSubmit={handleSubmit(onSubmit)}
         onReset={() => {
           reset()
-          setSubmitButtonEnabled(false)
+          setIsFriendlyChallengeDone(false)
           setSuccessfullySubmitted(false)
         }}
+        className="flex flex-col gap-12"
       >
         {!isSuccessfullySubmitted && !isServerError && (
           <>
@@ -116,14 +136,10 @@ const ContactEquinorForm = (props: ContactEquinorFormProps) => {
                   <FormTextField
                     {...props}
                     id={name}
-                    label={intl.formatMessage({
+                    label={`${intl.formatMessage({
                       id: 'contact_form_name',
                       defaultMessage: 'Name',
-                    })}
-                    placeholder={intl.formatMessage({
-                      id: 'contact_form_name_placeholder',
-                      defaultMessage: 'Jane Doe',
-                    })}
+                    })}*`}
                     inputRef={ref}
                     aria-required="true"
                     inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
@@ -155,10 +171,10 @@ const ContactEquinorForm = (props: ContactEquinorFormProps) => {
                   <FormTextField
                     {...props}
                     id={name}
-                    label={intl.formatMessage({
+                    label={`${intl.formatMessage({
                       id: 'contact_form_email',
                       defaultMessage: 'Email',
-                    })}
+                    })}*`}
                     inputRef={ref}
                     inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
                     helperText={error?.message}
@@ -234,17 +250,17 @@ const ContactEquinorForm = (props: ContactEquinorFormProps) => {
               render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => {
                 const { name } = props
                 return (
-                  <FormTextField
+                  <TextField
                     {...props}
                     id={name}
-                    placeholder={intl.formatMessage({
+                    description={intl.formatMessage({
                       id: 'contact_form_how_to_help_placeholder',
                       defaultMessage: `Please don't enter any personal information`,
                     })}
-                    label={intl.formatMessage({
+                    label={`${intl.formatMessage({
                       id: 'contact_form_how_to_help',
                       defaultMessage: 'How can we help you?',
-                    })}
+                    })}*`}
                     inputRef={ref}
                     multiline
                     rowsMax={10}
@@ -256,25 +272,32 @@ const ContactEquinorForm = (props: ContactEquinorFormProps) => {
                 )
               }}
             />
-            <div className="pb-4 text-xs italic">
-              <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
+            <div className="flex flex-col gap-2">
+              <FriendlyCaptcha
+                doneCallback={() => {
+                  setIsFriendlyChallengeDone(true)
+                }}
+                errorCallback={(error: any) => {
+                  console.error('FriendlyCaptcha encountered an error', error)
+                  setIsFriendlyChallengeDone(true)
+                }}
+              />
+              {/*@ts-ignore: TODO: types*/}
+              {errors?.root?.notCompletedCaptcha && (
+                <p role="alert" className="text-clear-red-100 flex gap-2 font-semibold">
+                  {/*@ts-ignore: TODO: types*/}
+                  <span className="mt-1">{errors.root.notCompletedCaptcha.message}</span>
+                  <Icon data={error_filled} aria-hidden="true" />
+                </p>
+              )}
             </div>
-            <FriendlyCaptcha
-              doneCallback={() => {
-                setSubmitButtonEnabled(true)
-              }}
-              errorCallback={(error: any) => {
-                console.error('FriendlyCaptcha encountered an error', error)
-                setSubmitButtonEnabled(true)
-              }}
-            />
-            <FormButton type="submit" disabled={!submitButtonEnabled}>
+            <Button type="submit">
               {isSubmitting ? (
                 <FormattedMessage id="form_sending" defaultMessage={'Sending...'}></FormattedMessage>
               ) : (
                 <FormattedMessage id="contact_form_cta" defaultMessage="Submit Form" />
               )}
-            </FormButton>
+            </Button>
           </>
         )}
         {isSubmitSuccessful && !isServerError && <FormSubmitSuccessBox type="reset" />}
@@ -284,7 +307,6 @@ const ContactEquinorForm = (props: ContactEquinorFormProps) => {
             onClick={() => {
               reset(undefined, { keepValues: true })
               setServerError(false)
-              setSubmitButtonEnabled(false)
             }}
           />
         )}
diff --git a/web/pageComponents/topicPages/Form/OrderReportsForm.tsx b/web/pageComponents/topicPages/Form/OrderReportsForm.tsx
index 22db41aa9..dc6060294 100644
--- a/web/pageComponents/topicPages/Form/OrderReportsForm.tsx
+++ b/web/pageComponents/topicPages/Form/OrderReportsForm.tsx
@@ -1,50 +1,11 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import styled from 'styled-components'
 import { Icon } from '@equinor/eds-core-react'
 import { useForm, Controller } from 'react-hook-form'
 import { error_filled } from '@equinor/eds-icons'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { FormButton, FormTextField, FormSubmitFailureBox, FormSubmitSuccessBox, Checkbox } from '@components'
+import { FormTextField, FormSubmitFailureBox, FormSubmitSuccessBox, Checkbox } from '@components'
 import { BaseSyntheticEvent, useState } from 'react'
 import FriendlyCaptcha from './FriendlyCaptcha'
-
-const UnstyledList = styled.ul`
-  list-style-type: none;
-  column-count: 1;
-  padding: 0 var(--space-medium) 0 0;
-  margin: var(--space-medium) 0 var(--space-medium) -12px;
-`
-const StyledFieldset = styled.fieldset`
-  border: 0;
-  padding: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  padding-block-start: 0;
-  padding-inline-start: 0;
-  padding-inline-end: 0;
-  padding-block-end: 0;
-`
-const StyledLegend = styled.legend`
-  font-weight: var(--fontWeight-regular);
-  font-size: var(--typeScale-2);
-`
-const ErrorDiv = styled.div`
-  display: flex;
-`
-const ErrorStyledList = styled(UnstyledList)`
-  border: var(--eds_button__border_width) var(--clear-red-100) solid;
-`
-const StyledIcon = styled(Icon)`
-  margin-left: var(--space-small);
-  color: var(--clear-red-100);
-  margin-top: var(--space-medium);
-`
-const StyledHelper = styled.p`
-  margin: calc(var(--space-small) * -1) 0 var(--space-medium) 8px;
-  color: var(--clear-red-100);
-  font-weight: 500;
-  font-size: var(--typeScale-0);
-`
+import { Button } from '@core/Button'
 
 type FormValues = {
   name: string
@@ -59,23 +20,9 @@ type FormValues = {
 
 const OrderReportsForm = () => {
   const intl = useIntl()
-  const [submitButtonEnabled, setSubmitButtonEnabled] = useState(false)
+  const [isFriendlyChallengeDone, setIsFriendlyChallengeDone] = useState(false)
   const [isServerError, setServerError] = useState(false)
   const [isSuccessfullySubmitted, setSuccessfullySubmitted] = useState(false)
-  const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
-    const res = await fetch('/api/forms/service-now-order-reports', {
-      body: JSON.stringify({
-        data,
-        frcCaptchaSolution: (event?.target as any)['frc-captcha-solution'].value,
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-    })
-    setServerError(res.status != 200)
-    setSuccessfullySubmitted(res.status == 200)
-  }
 
   const Checkboxes = () => {
     return (
@@ -110,11 +57,13 @@ const OrderReportsForm = () => {
       </>
     )
   }
+
   const {
     handleSubmit,
     control,
     reset,
     register,
+    setError,
     formState: { errors, isSubmitSuccessful, isSubmitted, isSubmitting },
   } = useForm({
     defaultValues: {
@@ -128,267 +77,305 @@ const OrderReportsForm = () => {
       country: '',
     },
   })
+
+  const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
+    if (isFriendlyChallengeDone) {
+      const res = await fetch('/api/forms/service-now-order-reports', {
+        body: JSON.stringify({
+          data,
+          frcCaptchaSolution: (event?.target as any)['frc-captcha-solution'].value,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      })
+      setServerError(res.status != 200)
+      setSuccessfullySubmitted(res.status == 200)
+    } else {
+      //@ts-ignore: TODO: types
+      setError('root.notCompletedCaptcha', {
+        type: 'custom',
+        message: intl.formatMessage({
+          id: 'form_antirobot_validation_required',
+          defaultMessage: 'Anti-Robot verification is required',
+        }),
+      })
+    }
+  }
+
   return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      onReset={() => {
-        reset()
-        setSubmitButtonEnabled(false)
-        setSuccessfullySubmitted(false)
-      }}
-    >
+    <>
       {!isSuccessfullySubmitted && !isServerError && (
-        <>
-          <StyledFieldset>
-            <StyledLegend>
-              <FormattedMessage
-                id="order_reports_form_choose"
-                defaultMessage="Please choose atleast one of the following reports"
-              />
-            </StyledLegend>
-            {errors.reports && (
-              <>
-                <ErrorDiv id="atleast-one-report-required">
-                  <ErrorStyledList>
-                    <Checkboxes />
-                  </ErrorStyledList>
-                  <StyledIcon data={error_filled} aria-hidden="true" />
-                </ErrorDiv>
-                <StyledHelper id="atleast-one-report-required" role="alert">
+        <div className="pb-6 text-sm">
+          <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
+        </div>
+      )}
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        onReset={() => {
+          reset()
+          setIsFriendlyChallengeDone(false)
+          setSuccessfullySubmitted(false)
+        }}
+        className="flex flex-col gap-12"
+      >
+        {!isSuccessfullySubmitted && !isServerError && (
+          <>
+            <fieldset className="p-0 pb-4">
+              {!errors.reports && (
+                <legend className="text-base font-semibold max-w-text">
                   <FormattedMessage
                     id="order_reports_form_choose"
-                    defaultMessage="Please select atleast one of the reports"
+                    defaultMessage="Please choose atleast one of the following reports"
                   />
-                </StyledHelper>
-              </>
-            )}
-            {!errors.reports && (
-              <UnstyledList>
+                  {`*`}
+                </legend>
+              )}
+              {errors.reports && (
+                <div
+                  className="text-clear-red-100 text-sm font-semibold items-center flex gap-2"
+                  role="alert"
+                  id="atleast-one-report-required"
+                >
+                  <Icon data={error_filled} aria-hidden="true" />
+                  <legend className="leading-none mt-1">
+                    <FormattedMessage
+                      id="order_reports_form_choose"
+                      defaultMessage="Please select atleast one of the reports"
+                    />
+                    {`*`}
+                  </legend>
+                </div>
+              )}
+              <ul>
                 <Checkboxes />
-              </UnstyledList>
-            )}
-          </StyledFieldset>
-          <Controller
-            name="name"
-            control={control}
-            rules={{
-              required: intl.formatMessage({
-                id: 'order_reports_form_name_validation',
-                defaultMessage: 'Please enter your name',
-              }),
-            }}
-            render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-              <FormTextField
-                {...props}
-                id={props.name}
-                label={intl.formatMessage({
-                  id: 'order_reports_form_name',
-                  defaultMessage: 'Name',
-                })}
-                placeholder={intl.formatMessage({
-                  id: 'order_reports_form_name_placeholder',
-                  defaultMessage: 'Jane Doe',
-                })}
-                inputRef={ref}
-                aria-required="true"
-                inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
-                helperText={error?.message}
-                {...(invalid && { variant: 'error' })}
-              />
-            )}
-          />
-          <Controller
-            name="email"
-            control={control}
-            rules={{
-              required: intl.formatMessage({
-                id: 'order_reports_form_email_validation',
-                defaultMessage: 'Please fill out a valid email address',
-              }),
-              pattern: {
-                value: /^[\w!#$%&'*+/=?`{|}~^-]+(?:\.[\w!#$%&'*+/=?`{|}~^-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}$/g,
-                message: intl.formatMessage({
+              </ul>
+            </fieldset>
+            <Controller
+              name="name"
+              control={control}
+              rules={{
+                required: intl.formatMessage({
+                  id: 'order_reports_form_name_validation',
+                  defaultMessage: 'Please enter your name',
+                }),
+              }}
+              render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
+                <FormTextField
+                  {...props}
+                  id={props.name}
+                  label={`${intl.formatMessage({
+                    id: 'order_reports_form_name',
+                    defaultMessage: 'Name',
+                  })}*`}
+                  inputRef={ref}
+                  aria-required="true"
+                  inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
+                  helperText={error?.message}
+                  {...(invalid && { variant: 'error' })}
+                />
+              )}
+            />
+            <Controller
+              name="email"
+              control={control}
+              rules={{
+                required: intl.formatMessage({
                   id: 'order_reports_form_email_validation',
                   defaultMessage: 'Please fill out a valid email address',
                 }),
-              },
-            }}
-            render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-              <FormTextField
-                {...props}
-                id={props.name}
-                label={intl.formatMessage({
-                  id: 'order_reports_form_email',
-                  defaultMessage: 'Email',
-                })}
-                inputRef={ref}
-                inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
-                helperText={error?.message}
-                aria-required="true"
-                {...(invalid && { variant: 'error' })}
-              />
-            )}
-          />
-          <Controller
-            name="company"
-            control={control}
-            rules={{
-              required: intl.formatMessage({
-                id: 'order_reports_form_company_validation',
-                defaultMessage: 'Please enter your company',
-              }),
-            }}
-            render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-              <FormTextField
-                {...props}
-                id={props.name}
-                label={intl.formatMessage({
-                  id: 'order_reports_form_company',
-                  defaultMessage: 'Company',
-                })}
-                inputRef={ref}
-                aria-required="true"
-                inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
-                helperText={error?.message}
-                {...(invalid && { variant: 'error' })}
-              />
-            )}
-          />
-          <Controller
-            name="address"
-            control={control}
-            rules={{
-              required: intl.formatMessage({
-                id: 'order_reports_form_address_validation',
-                defaultMessage: 'Please enter your address',
-              }),
-            }}
-            render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-              <FormTextField
-                {...props}
-                id={props.name}
-                label={intl.formatMessage({
-                  id: 'order_reports_form_address',
-                  defaultMessage: 'Address',
-                })}
-                inputRef={ref}
-                inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
-                helperText={error?.message}
-                aria-required="true"
-                {...(invalid && { variant: 'error' })}
-              />
-            )}
-          />
+                pattern: {
+                  value: /^[\w!#$%&'*+/=?`{|}~^-]+(?:\.[\w!#$%&'*+/=?`{|}~^-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}$/g,
+                  message: intl.formatMessage({
+                    id: 'order_reports_form_email_validation',
+                    defaultMessage: 'Please fill out a valid email address',
+                  }),
+                },
+              }}
+              render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
+                <FormTextField
+                  {...props}
+                  id={props.name}
+                  label={`${intl.formatMessage({
+                    id: 'order_reports_form_email',
+                    defaultMessage: 'Email',
+                  })}*`}
+                  inputRef={ref}
+                  inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
+                  helperText={error?.message}
+                  aria-required="true"
+                  {...(invalid && { variant: 'error' })}
+                />
+              )}
+            />
+            <Controller
+              name="company"
+              control={control}
+              rules={{
+                required: intl.formatMessage({
+                  id: 'order_reports_form_company_validation',
+                  defaultMessage: 'Please enter your company',
+                }),
+              }}
+              render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
+                <FormTextField
+                  {...props}
+                  id={props.name}
+                  label={`${intl.formatMessage({
+                    id: 'order_reports_form_company',
+                    defaultMessage: 'Company',
+                  })}*`}
+                  inputRef={ref}
+                  aria-required="true"
+                  inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
+                  helperText={error?.message}
+                  {...(invalid && { variant: 'error' })}
+                />
+              )}
+            />
+            <Controller
+              name="address"
+              control={control}
+              rules={{
+                required: intl.formatMessage({
+                  id: 'order_reports_form_address_validation',
+                  defaultMessage: 'Please enter your address',
+                }),
+              }}
+              render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
+                <FormTextField
+                  {...props}
+                  id={props.name}
+                  label={`${intl.formatMessage({
+                    id: 'order_reports_form_address',
+                    defaultMessage: 'Address',
+                  })}*`}
+                  inputRef={ref}
+                  inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
+                  helperText={error?.message}
+                  aria-required="true"
+                  {...(invalid && { variant: 'error' })}
+                />
+              )}
+            />
 
-          <Controller
-            name="zipcode"
-            control={control}
-            rules={{
-              required: intl.formatMessage({
-                id: 'order_reports_form_zipcode_validation',
-                defaultMessage: 'Please enter your post number/Zip code',
-              }),
-            }}
-            render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-              <FormTextField
-                {...props}
-                id={props.name}
-                label={intl.formatMessage({
-                  id: 'order_reports_form_zipcode',
-                  defaultMessage: 'Post number/Zip code',
-                })}
-                inputRef={ref}
-                inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
-                helperText={error?.message}
-                aria-required="true"
-                {...(invalid && { variant: 'error' })}
-              />
-            )}
-          />
+            <Controller
+              name="zipcode"
+              control={control}
+              rules={{
+                required: intl.formatMessage({
+                  id: 'order_reports_form_zipcode_validation',
+                  defaultMessage: 'Please enter your post number/Zip code',
+                }),
+              }}
+              render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
+                <FormTextField
+                  {...props}
+                  id={props.name}
+                  label={`${intl.formatMessage({
+                    id: 'order_reports_form_zipcode',
+                    defaultMessage: 'Post number/Zip code',
+                  })}*`}
+                  inputRef={ref}
+                  inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
+                  helperText={error?.message}
+                  aria-required="true"
+                  {...(invalid && { variant: 'error' })}
+                />
+              )}
+            />
 
-          <Controller
-            name="city"
-            control={control}
-            rules={{
-              required: intl.formatMessage({
-                id: 'order_reports_form_city_validation',
-                defaultMessage: 'Please enter your city',
-              }),
-            }}
-            render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-              <FormTextField
-                {...props}
-                id={props.name}
-                aria-required="true"
-                label={intl.formatMessage({
-                  id: 'order_reports_form_city',
-                  defaultMessage: 'City',
-                })}
-                inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
-                helperText={error?.message}
-                inputRef={ref}
-                {...(invalid && { variant: 'error' })}
+            <Controller
+              name="city"
+              control={control}
+              rules={{
+                required: intl.formatMessage({
+                  id: 'order_reports_form_city_validation',
+                  defaultMessage: 'Please enter your city',
+                }),
+              }}
+              render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
+                <FormTextField
+                  {...props}
+                  id={props.name}
+                  aria-required="true"
+                  label={`${intl.formatMessage({
+                    id: 'order_reports_form_city',
+                    defaultMessage: 'City',
+                  })}*`}
+                  inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
+                  helperText={error?.message}
+                  inputRef={ref}
+                  {...(invalid && { variant: 'error' })}
+                />
+              )}
+            />
+            <Controller
+              name="country"
+              control={control}
+              rules={{
+                required: intl.formatMessage({
+                  id: 'order_reports_form_country_validation',
+                  defaultMessage: 'Please enter your country',
+                }),
+              }}
+              render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
+                <FormTextField
+                  {...props}
+                  id={props.name}
+                  label={`${intl.formatMessage({
+                    id: 'order_reports_form_country',
+                    defaultMessage: 'Country',
+                  })}*`}
+                  aria-required="true"
+                  inputRef={ref}
+                  inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
+                  helperText={error?.message}
+                  {...(invalid && { variant: 'error' })}
+                />
+              )}
+            />
+            <div className="flex flex-col gap-2">
+              <FriendlyCaptcha
+                doneCallback={() => {
+                  setIsFriendlyChallengeDone(true)
+                }}
+                errorCallback={(error: any) => {
+                  console.error('FriendlyCaptcha encountered an error', error)
+                  setIsFriendlyChallengeDone(true)
+                }}
               />
-            )}
-          />
-          <Controller
-            name="country"
-            control={control}
-            rules={{
-              required: intl.formatMessage({
-                id: 'order_reports_form_country_validation',
-                defaultMessage: 'Please enter your country',
-              }),
+              {/*@ts-ignore: TODO: types*/}
+              {errors?.root?.notCompletedCaptcha && (
+                <p role="alert" className="text-clear-red-100 flex gap-2 font-semibold">
+                  {/*@ts-ignore: TODO: types*/}
+                  <span className="mt-1">{errors.root.notCompletedCaptcha.message}</span>
+                  <Icon data={error_filled} aria-hidden="true" />
+                </p>
+              )}
+            </div>
+            <Button type="submit">
+              {isSubmitting ? (
+                <FormattedMessage id="form_sending" defaultMessage={'Sending...'}></FormattedMessage>
+              ) : (
+                <FormattedMessage id="order_reports_form_cta" defaultMessage="Order printed copies" />
+              )}
+            </Button>
+          </>
+        )}
+        {isSubmitSuccessful && !isServerError && <FormSubmitSuccessBox type="reset" />}
+        {isSubmitted && isServerError && (
+          <FormSubmitFailureBox
+            type="button"
+            onClick={() => {
+              reset(undefined, { keepValues: true })
+              setServerError(false)
             }}
-            render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-              <FormTextField
-                {...props}
-                id={props.name}
-                label={intl.formatMessage({
-                  id: 'order_reports_form_country',
-                  defaultMessage: 'Country',
-                })}
-                aria-required="true"
-                inputRef={ref}
-                inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
-                helperText={error?.message}
-                {...(invalid && { variant: 'error' })}
-              />
-            )}
           />
-          <div className="pb-4 text-xs italic">
-            <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
-          </div>
-          <FriendlyCaptcha
-            doneCallback={() => {
-              setSubmitButtonEnabled(true)
-            }}
-            errorCallback={(error: any) => {
-              console.error('FriendlyCaptcha encountered an error', error)
-              setSubmitButtonEnabled(true)
-            }}
-          />
-          <FormButton type="submit" disabled={!submitButtonEnabled}>
-            {isSubmitting ? (
-              <FormattedMessage id="form_sending" defaultMessage={'Sending...'}></FormattedMessage>
-            ) : (
-              <FormattedMessage id="order_reports_form_cta" defaultMessage="Order printed copies" />
-            )}
-          </FormButton>
-        </>
-      )}
-      {isSubmitSuccessful && !isServerError && <FormSubmitSuccessBox type="reset" />}
-      {isSubmitted && isServerError && (
-        <FormSubmitFailureBox
-          type="button"
-          onClick={() => {
-            reset(undefined, { keepValues: true })
-            setServerError(false)
-            setSubmitButtonEnabled(false)
-          }}
-        />
-      )}
-    </form>
+        )}
+      </form>
+    </>
   )
 }
 export default OrderReportsForm
diff --git a/web/pageComponents/topicPages/Form/SubscribeForm.tsx b/web/pageComponents/topicPages/Form/SubscribeForm.tsx
index 9524de476..62ea5cbe4 100644
--- a/web/pageComponents/topicPages/Form/SubscribeForm.tsx
+++ b/web/pageComponents/topicPages/Form/SubscribeForm.tsx
@@ -1,49 +1,13 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { SubscribeFormParameters } from '../../../types/index'
-import styled from 'styled-components'
 import { Icon } from '@equinor/eds-core-react'
 import { useForm, Controller } from 'react-hook-form'
 import { error_filled } from '@equinor/eds-icons'
 import { useRouter } from 'next/router'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { FormButton, FormSubmitSuccessBox, FormTextField, FormSubmitFailureBox, Checkbox } from '@components'
+import { FormSubmitSuccessBox, FormTextField, FormSubmitFailureBox, Checkbox } from '@components'
 import { BaseSyntheticEvent, useState } from 'react'
 import FriendlyCaptcha from './FriendlyCaptcha'
-
-const StyledFieldset = styled.fieldset`
-  border: 0;
-  padding: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  padding-block-start: 0;
-  padding-inline-start: 0;
-  padding-inline-end: 0;
-  padding-block-end: 0;
-`
-
-const UnstyledList = styled.ul`
-  margin: -12px;
-  padding: var(--space-large) 0 var(--space-large) 0px;
-  list-style-type: none;
-  column-count: 2;
-  @media (max-width: 920px) {
-    column-count: 1;
-  }
-`
-const ErrorStyledDiv = styled.div`
-  font-weight: var(--fontWeight-regular);
-  font-size: var(--typeScale-2);
-  color: var(--clear-red-100);
-  align-items: center;
-  display: flex;
-`
-const StyledIcon = styled(Icon)`
-  margin-left: var(--space-small);
-`
-const StyledLegend = styled.legend`
-  font-weight: var(--fontWeight-regular);
-  font-size: var(--typeScale-2);
-`
+import { Button } from '@core/Button'
 
 type FormValues = {
   firstName: string
@@ -54,236 +18,240 @@ type FormValues = {
 const SubscribeForm = () => {
   const router = useRouter()
   const intl = useIntl()
-  const [submitButtonEnabled, setSubmitButtonEnabled] = useState(false)
+  const [isFriendlyChallengeDone, setIsFriendlyChallengeDone] = useState(false)
   const [isServerError, setServerError] = useState(false)
   const [isSuccessfullySubmitted, setSuccessfullySubmitted] = useState(false)
 
-  const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
-    const allCategories = data.categories.includes('all')
-    const subscribeFormParamers: SubscribeFormParameters = {
-      firstName: data.firstName,
-      email: data.email,
-      crudeOilAssays: allCategories || data.categories.includes('crudeOilAssays'),
-      generalNews: allCategories || data.categories.includes('generalNews'),
-      stockMarketAnnouncements: allCategories || data.categories.includes('stockMarketAnnouncements'),
-      magazineStories: allCategories || data.categories.includes('magazineStories'),
-      languageCode: router.locale == 'en' ? 'en' : 'no',
-    }
-
-    const res = await fetch('/api/subscribe-form', {
-      body: JSON.stringify({
-        subscribeFormParamers,
-        frcCaptchaSolution: (event?.target as any)['frc-captcha-solution'].value,
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-    })
-    setServerError(res.status != 200)
-    setSuccessfullySubmitted(res.status == 200)
-  }
-
   const {
     handleSubmit,
     reset,
     control,
     register,
+    setError,
     formState: { errors, isSubmitting, isSubmitted, isSubmitSuccessful },
   } = useForm({ defaultValues: { firstName: '', email: '', categories: [] } })
 
+  const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
+    if (isFriendlyChallengeDone) {
+      const allCategories = data.categories.includes('all')
+      const subscribeFormParamers: SubscribeFormParameters = {
+        firstName: data.firstName,
+        email: data.email,
+        crudeOilAssays: allCategories || data.categories.includes('crudeOilAssays'),
+        generalNews: allCategories || data.categories.includes('generalNews'),
+        stockMarketAnnouncements: allCategories || data.categories.includes('stockMarketAnnouncements'),
+        magazineStories: allCategories || data.categories.includes('magazineStories'),
+        languageCode: router.locale == 'en' ? 'en' : 'no',
+      }
+
+      const res = await fetch('/api/subscribe-form', {
+        body: JSON.stringify({
+          subscribeFormParamers,
+          frcCaptchaSolution: (event?.target as any)['frc-captcha-solution'].value,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      })
+      setServerError(res.status != 200)
+      setSuccessfullySubmitted(res.status == 200)
+    } else {
+      //@ts-ignore: TODO: types
+      setError('root.notCompletedCaptcha', {
+        type: 'custom',
+        message: intl.formatMessage({
+          id: 'form_antirobot_validation_required',
+          defaultMessage: 'Anti-Robot verification is required',
+        }),
+      })
+    }
+  }
+
   return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      onReset={() => {
-        reset()
-        setSubmitButtonEnabled(false)
-        setSuccessfullySubmitted(false)
-      }}
-    >
+    <>
       {!isSuccessfullySubmitted && !isServerError && (
-        <>
-          <StyledFieldset>
-            {!errors.categories && (
-              <StyledLegend id="atleast-one-category-required">
-                <FormattedMessage
-                  id="subscribe_form_choose"
-                  defaultMessage="Please choose one or more of the following"
-                />
-              </StyledLegend>
-            )}
-            {errors.categories && (
-              <ErrorStyledDiv role="alert" id="atleast-one-category-required">
-                <StyledLegend>
+        <div className="pt-8 pb-6 text-sm">
+          <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
+        </div>
+      )}
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        onReset={() => {
+          reset()
+          setIsFriendlyChallengeDone(false)
+          setSuccessfullySubmitted(false)
+        }}
+        className="flex flex-col gap-12"
+      >
+        {!isSuccessfullySubmitted && !isServerError && (
+          <>
+            <fieldset className="p-0 pb-4">
+              {!errors.categories && (
+                <legend id="atleast-one-category-required" className="text-base font-semibold max-w-text">
                   <FormattedMessage
                     id="subscribe_form_choose"
                     defaultMessage="Please choose one or more of the following"
                   />
-                </StyledLegend>
-                <StyledIcon data={error_filled} aria-hidden="true" />
-              </ErrorStyledDiv>
-            )}
-
-            <UnstyledList>
-              <li>
-                <Checkbox
-                  label={intl.formatMessage({
-                    id: 'subscribe_form_general_news',
-                    defaultMessage: 'General News',
-                  })}
-                  value="generalNews"
-                  aria-describedby="atleast-one-category-required"
-                  {...register('categories', {
-                    validate: (values) => values.length > 0,
-                  })}
-                  aria-required
-                  aria-invalid={errors.categories ? 'true' : 'false'}
-                />
-              </li>
-              <li>
-                <Checkbox
-                  label={intl.formatMessage({
-                    id: 'subscribe_form_magazine_stories',
-                    defaultMessage: 'Magazine stories',
-                  })}
-                  aria-invalid={errors.categories ? 'true' : 'false'}
-                  aria-describedby="atleast-one-category-required"
-                  value="magazineStories"
-                  aria-required
-                  {...register('categories')}
-                />
-              </li>
-              <li>
-                <Checkbox
-                  label={intl.formatMessage({
-                    id: 'subscribe_form_stock_market',
-                    defaultMessage: 'Stock market announcements',
-                  })}
-                  value="stockMarketAnnouncements"
-                  aria-invalid={errors.categories ? 'true' : 'false'}
-                  aria-describedby="atleast-one-category-required"
-                  aria-required
-                  {...register('categories')}
-                />
-              </li>
-              <li>
-                <Checkbox
-                  label={intl.formatMessage({
-                    id: 'subscribe_form_cruide_oil',
-                    defaultMessage: 'Crude oil assays',
-                  })}
-                  aria-invalid={errors.categories ? 'true' : 'false'}
-                  aria-describedby="atleast-one-category-required"
-                  value="crudeOilAssays"
-                  aria-required
-                  {...register('categories')}
-                />
-              </li>
-              <li>
-                <Checkbox
-                  label={intl.formatMessage({
-                    id: 'subscribe_form_all',
-                    defaultMessage: 'All',
-                  })}
-                  aria-invalid={errors.categories ? 'true' : 'false'}
-                  aria-describedby="atleast-one-category-required"
-                  value="all"
-                  aria-required
-                  {...register('categories')}
-                />
-              </li>
-            </UnstyledList>
-          </StyledFieldset>
-          <Controller
-            name="firstName"
-            control={control}
-            rules={{
-              required: intl.formatMessage({
-                id: 'subscribe_form_name_validation',
-                defaultMessage: 'Please fill out your name',
-              }),
-            }}
-            render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-              <FormTextField
-                {...props}
-                id={props.name}
-                label={intl.formatMessage({
-                  id: 'subscribe_form_first_name',
-                  defaultMessage: 'First name',
-                })}
-                inputRef={ref}
-                aria-required="true"
-                inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
-                helperText={error?.message}
-                {...(invalid && { variant: 'error' })}
-              />
-            )}
-          />
-          <Controller
-            name="email"
-            control={control}
-            rules={{
-              required: intl.formatMessage({
-                id: 'subscribe_form_email_validation',
-                defaultMessage: 'Please fill out a valid email address',
-              }),
-              pattern: {
-                value: /^[\w!#$%&'*+/=?`{|}~^-]+(?:\.[\w!#$%&'*+/=?`{|}~^-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}$/g,
-                message: intl.formatMessage({
+                </legend>
+              )}
+              {errors.categories && (
+                <div
+                  className="text-clear-red-100 text-sm font-semibold items-center flex gap-2"
+                  role="alert"
+                  id="atleast-one-category-required"
+                >
+                  <legend>
+                    <FormattedMessage
+                      id="subscribe_form_choose"
+                      defaultMessage="Please choose one or more of the following"
+                    />
+                  </legend>
+                  <Icon data={error_filled} aria-hidden="true" />
+                </div>
+              )}
+              <ul>
+                <li>
+                  <Checkbox
+                    label={intl.formatMessage({
+                      id: 'subscribe_form_general_news',
+                      defaultMessage: 'General News',
+                    })}
+                    value="generalNews"
+                    aria-describedby="atleast-one-category-required"
+                    {...register('categories', {
+                      validate: (values) => values.length > 0,
+                    })}
+                    aria-required
+                    aria-invalid={errors.categories ? 'true' : 'false'}
+                  />
+                </li>
+                <li>
+                  <Checkbox
+                    label={intl.formatMessage({
+                      id: 'subscribe_form_magazine_stories',
+                      defaultMessage: 'Magazine stories',
+                    })}
+                    aria-invalid={errors.categories ? 'true' : 'false'}
+                    aria-describedby="atleast-one-category-required"
+                    value="magazineStories"
+                    aria-required
+                    {...register('categories')}
+                  />
+                </li>
+                <li>
+                  <Checkbox
+                    label={intl.formatMessage({
+                      id: 'subscribe_form_stock_market',
+                      defaultMessage: 'Stock market announcements',
+                    })}
+                    value="stockMarketAnnouncements"
+                    aria-invalid={errors.categories ? 'true' : 'false'}
+                    aria-describedby="atleast-one-category-required"
+                    aria-required
+                    {...register('categories')}
+                  />
+                </li>
+                <li>
+                  <Checkbox
+                    label={intl.formatMessage({
+                      id: 'subscribe_form_cruide_oil',
+                      defaultMessage: 'Crude oil assays',
+                    })}
+                    aria-invalid={errors.categories ? 'true' : 'false'}
+                    aria-describedby="atleast-one-category-required"
+                    value="crudeOilAssays"
+                    aria-required
+                    {...register('categories')}
+                  />
+                </li>
+                <li>
+                  <Checkbox
+                    label={intl.formatMessage({
+                      id: 'subscribe_form_all',
+                      defaultMessage: 'All',
+                    })}
+                    aria-invalid={errors.categories ? 'true' : 'false'}
+                    aria-describedby="atleast-one-category-required"
+                    value="all"
+                    aria-required
+                    {...register('categories')}
+                  />
+                </li>
+              </ul>
+            </fieldset>
+            <Controller
+              name="email"
+              control={control}
+              rules={{
+                required: intl.formatMessage({
                   id: 'subscribe_form_email_validation',
                   defaultMessage: 'Please fill out a valid email address',
                 }),
-              },
-            }}
-            render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-              <FormTextField
-                {...props}
-                id={props.name}
-                label={intl.formatMessage({
-                  id: 'subscribe_form_email',
-                  defaultMessage: 'Email',
-                })}
-                inputRef={ref}
-                inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
-                helperText={error?.message}
-                aria-required="true"
-                {...(invalid && { variant: 'error' })}
+                pattern: {
+                  value: /^[\w!#$%&'*+/=?`{|}~^-]+(?:\.[\w!#$%&'*+/=?`{|}~^-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}$/g,
+                  message: intl.formatMessage({
+                    id: 'subscribe_form_email_validation',
+                    defaultMessage: 'Please fill out a valid email address',
+                  }),
+                },
+              }}
+              render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
+                <FormTextField
+                  {...props}
+                  id={props.name}
+                  label={`${intl.formatMessage({
+                    id: 'subscribe_form_email',
+                    defaultMessage: 'Email',
+                  })}*`}
+                  inputRef={ref}
+                  inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
+                  helperText={error?.message}
+                  aria-required="true"
+                  {...(invalid && { variant: 'error' })}
+                />
+              )}
+            />
+            <div className="flex flex-col gap-2">
+              <FriendlyCaptcha
+                doneCallback={() => {
+                  setIsFriendlyChallengeDone(true)
+                }}
+                errorCallback={(error: any) => {
+                  console.error('FriendlyCaptcha encountered an error', error)
+                  setIsFriendlyChallengeDone(true)
+                }}
               />
-            )}
-          />
-          <div className="pb-4 text-xs italic">
-            <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
-          </div>
-          <FriendlyCaptcha
-            doneCallback={() => {
-              setSubmitButtonEnabled(true)
-            }}
-            errorCallback={(error: any) => {
-              console.error('FriendlyCaptcha encountered an error', error)
-              setSubmitButtonEnabled(true)
+              {/*@ts-ignore: TODO: types*/}
+              {errors?.root?.notCompletedCaptcha && (
+                <p role="alert" className="text-clear-red-100 flex gap-2 font-semibold">
+                  {/*@ts-ignore: TODO: types*/}
+                  <span className="mt-1">{errors.root.notCompletedCaptcha.message}</span>
+                  <Icon data={error_filled} aria-hidden="true" />
+                </p>
+              )}
+            </div>
+            <Button type="submit">
+              {isSubmitting ? (
+                <FormattedMessage id="form_sending" defaultMessage={'Sending...'}></FormattedMessage>
+              ) : (
+                <FormattedMessage id="subscribe_form_cta" defaultMessage={'Subscribe'} />
+              )}
+            </Button>
+          </>
+        )}
+        {isSubmitSuccessful && !isServerError && <FormSubmitSuccessBox type="reset" />}
+        {isSubmitted && isServerError && (
+          <FormSubmitFailureBox
+            type="button"
+            onClick={() => {
+              reset(undefined, { keepValues: true })
+              setServerError(false)
             }}
           />
-          <FormButton type="submit" disabled={!submitButtonEnabled}>
-            {isSubmitting ? (
-              <FormattedMessage id="form_sending" defaultMessage={'Sending...'}></FormattedMessage>
-            ) : (
-              <FormattedMessage id="subscribe_form_cta" defaultMessage={'Subscribe'} />
-            )}
-          </FormButton>
-        </>
-      )}
-      {isSubmitSuccessful && !isServerError && <FormSubmitSuccessBox type="reset" />}
-      {isSubmitted && isServerError && (
-        <FormSubmitFailureBox
-          type="button"
-          onClick={() => {
-            reset(undefined, { keepValues: true })
-            setServerError(false)
-            setSubmitButtonEnabled(false)
-          }}
-        />
-      )}
-    </form>
+        )}
+      </form>
+    </>
   )
 }
 export default SubscribeForm
diff --git a/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx b/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx
index 36c3053e6..4c37f2b59 100644
--- a/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx
+++ b/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx
@@ -3,17 +3,12 @@ import { Icon } from '@equinor/eds-core-react'
 import { useForm, Controller } from 'react-hook-form'
 import { error_filled } from '@equinor/eds-icons'
 import { FormattedMessage, useIntl } from 'react-intl'
-import {
-  FormButton,
-  FormTextField,
-  Checkbox,
-  FormSelect,
-  FormSubmitSuccessBox,
-  FormSubmitFailureBox,
-} from '@components'
+import { FormTextField, Checkbox, FormSelect, FormSubmitSuccessBox, FormSubmitFailureBox } from '@components'
 import { BaseSyntheticEvent, useState } from 'react'
 import FriendlyCaptcha from '../FriendlyCaptcha'
 import getCatalogType from './getRequestType'
+import { TextField } from '@core/TextField/TextField'
+import { Button } from '@core/Button'
 
 type FormValues = {
   name: string
@@ -29,32 +24,17 @@ type FormValues = {
 
 const CareersContactForm = () => {
   const intl = useIntl()
-  const [submitButtonEnabled, setSubmitButtonEnabled] = useState(false)
+  const [isFriendlyChallengeDone, setIsFriendlyChallengeDone] = useState(false)
   const [isServerError, setServerError] = useState(false)
   const [isSuccessfullySubmitted, setSuccessfullySubmitted] = useState(false)
-  const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
-    data.preferredLang = intl.locale
-    const res = await fetch('/api/forms/service-now-careers-contact', {
-      body: JSON.stringify({
-        data,
-        frcCaptchaSolution: (event?.target as any)['frc-captcha-solution'].value,
-        catalogType: getCatalogType(intl, data.category, data.candidateType),
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-    })
-    setSuccessfullySubmitted(res.status == 200)
-    setServerError(res.status != 200)
-  }
 
   const {
     handleSubmit,
     control,
     reset,
     register,
-    formState: { isSubmitted, isSubmitting, isSubmitSuccessful },
+    formState: { errors, isSubmitted, isSubmitting, isSubmitSuccessful },
+    setError,
   } = useForm({
     defaultValues: {
       name: '',
@@ -75,15 +55,50 @@ const CareersContactForm = () => {
       supportingDocuments: '',
     },
   })
+
+  const onSubmit = async (data: FormValues, event?: BaseSyntheticEvent) => {
+    data.preferredLang = intl.locale
+    if (isFriendlyChallengeDone) {
+      const res = await fetch('/api/forms/service-now-careers-contact', {
+        body: JSON.stringify({
+          data,
+          frcCaptchaSolution: (event?.target as any)['frc-captcha-solution'].value,
+          catalogType: getCatalogType(intl, data.category, data.candidateType),
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      })
+      setSuccessfullySubmitted(res.status == 200)
+      setServerError(res.status != 200)
+    } else {
+      //@ts-ignore: TODO: types
+      setError('root.notCompletedCaptcha', {
+        type: 'custom',
+        message: intl.formatMessage({
+          id: 'form_antirobot_validation_required',
+          defaultMessage: 'Anti-Robot verification is required',
+        }),
+      })
+    }
+  }
+
   return (
     <>
+      {!isSuccessfullySubmitted && !isServerError && (
+        <div className="pb-6 text-sm">
+          <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
+        </div>
+      )}
       <form
         onSubmit={handleSubmit(onSubmit)}
         onReset={() => {
           reset()
-          setSubmitButtonEnabled(false)
+          setIsFriendlyChallengeDone(false)
           setSuccessfullySubmitted(false)
         }}
+        className="flex flex-col gap-12"
       >
         {!isSuccessfullySubmitted && !isServerError && (
           <>
@@ -100,14 +115,10 @@ const CareersContactForm = () => {
                 <FormTextField
                   {...props}
                   id={props.name}
-                  label={intl.formatMessage({
+                  label={`${intl.formatMessage({
                     id: 'careers_contact_form_name',
                     defaultMessage: 'Your Name',
-                  })}
-                  placeholder={intl.formatMessage({
-                    id: 'careers_contact_form_name_placeholder',
-                    defaultMessage: 'Jane Doe',
-                  })}
+                  })}*`}
                   inputRef={ref}
                   aria-required="true"
                   inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
@@ -133,30 +144,18 @@ const CareersContactForm = () => {
                 },
               }}
               render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-                <FormTextField
+                <TextField
                   {...props}
                   id={props.name}
-                  label={
-                    <>
-                      <span>
-                        {intl.formatMessage({
-                          id: 'careers_contact_form_phone',
-                          defaultMessage: 'Phone Number',
-                        })}
-                      </span>
-                      <br />
-                      <span className="text-xs">
-                        {intl.formatMessage({
-                          id: 'country_code_format',
-                          defaultMessage: 'e.g. +47',
-                        })}
-                      </span>
-                    </>
-                  }
-                  placeholder={intl.formatMessage({
-                    id: 'careers_contact_form_phone_placeholder',
-                    defaultMessage: 'Country code and phone number',
+                  label={`${intl.formatMessage({
+                    id: 'careers_contact_form_phone',
+                    defaultMessage: 'Phone Number',
+                  })}*`}
+                  description={intl.formatMessage({
+                    id: 'country_code_format',
+                    defaultMessage: 'Enter phone number with country code',
                   })}
+                  type="tel"
                   inputRef={ref}
                   inputIcon={invalid ? <Icon data={error_filled} title="error" /> : undefined}
                   helperText={error?.message}
@@ -261,14 +260,14 @@ const CareersContactForm = () => {
                 }),
               }}
               render={({ field: { ref, ...props }, fieldState: { invalid, error } }) => (
-                <FormTextField
+                <TextField
                   {...props}
                   id={props.name}
-                  label={intl.formatMessage({
+                  label={`${intl.formatMessage({
                     id: 'careers_contact_form_location',
                     defaultMessage: 'Location',
-                  })}
-                  placeholder={intl.formatMessage({
+                  })}*`}
+                  description={intl.formatMessage({
                     id: 'careers_contact_form_location_placeholder',
                     defaultMessage: 'Country/city',
                   })}
@@ -341,10 +340,10 @@ const CareersContactForm = () => {
                 <FormTextField
                   {...props}
                   id={props.name}
-                  label={intl.formatMessage({
+                  label={`${intl.formatMessage({
                     id: 'careers_contact_form_questions',
                     defaultMessage: 'Type your questions',
-                  })}
+                  })}*`}
                   inputRef={ref}
                   multiline
                   rowsMax={10}
@@ -355,36 +354,42 @@ const CareersContactForm = () => {
                 />
               )}
             />
-            <div className="pb-4 text-xs italic">
-              <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
-            </div>
             <Checkbox
-              className='pb-4'
+              className="pb-4"
               label={intl.formatMessage({
-                id: 'career_fair_form_supporting_documents',
+                id: 'careers_contact_form_supporting_documents',
                 defaultMessage:
                   'Tick the box if you would like to send supporting documents, and we will get in touch with you',
               })}
               value="Yes"
               {...register('supportingDocuments')}
             />
-
-            <FriendlyCaptcha
-              doneCallback={() => {
-                setSubmitButtonEnabled(true)
-              }}
-              errorCallback={(error: any) => {
-                console.error('FriendlyCaptcha encountered an error', error)
-                setSubmitButtonEnabled(true)
-              }}
-            />
-            <FormButton type="submit" disabled={!submitButtonEnabled}>
+            <div className="flex flex-col gap-2">
+              <FriendlyCaptcha
+                doneCallback={() => {
+                  setIsFriendlyChallengeDone(true)
+                }}
+                errorCallback={(error: any) => {
+                  console.error('FriendlyCaptcha encountered an error', error)
+                  setIsFriendlyChallengeDone(true)
+                }}
+              />
+              {/*@ts-ignore: TODO: types*/}
+              {errors?.root?.notCompletedCaptcha && (
+                <p role="alert" className="text-clear-red-100 flex gap-2 font-semibold">
+                  {/*@ts-ignore: TODO: types*/}
+                  <span className="mt-1">{errors.root.notCompletedCaptcha.message}</span>
+                  <Icon data={error_filled} aria-hidden="true" />
+                </p>
+              )}
+            </div>
+            <Button type="submit">
               {isSubmitting ? (
                 <FormattedMessage id="form_sending" defaultMessage={'Sending...'}></FormattedMessage>
               ) : (
                 <FormattedMessage id="careers_contact_form_cta" defaultMessage="Submit Form" />
               )}
-            </FormButton>
+            </Button>
           </>
         )}
         {isSubmitSuccessful && !isServerError && <FormSubmitSuccessBox type="reset" />}
@@ -394,7 +399,6 @@ const CareersContactForm = () => {
             onClick={() => {
               reset(undefined, { keepValues: true })
               setServerError(false)
-              setSubmitButtonEnabled(false)
             }}
           />
         )}