From 136d8c943f1b446300d3fe2e510e47ab3858fbf8 Mon Sep 17 00:00:00 2001
From: Jonas Brunvoll Larsson <59939294+jonasbrunvoll@users.noreply.github.com>
Date: Tue, 24 Sep 2024 15:20:57 +0200
Subject: [PATCH] feat: add page with forms for means of transport (#348)

* Save progress

* Update translations.

* Update machineEvents

* Update mode of transport form selector.

* Update form view an state machine.

* Add rule to avoid having to provide email if the user dont want to e contacted.

* Update to use correct validation and add validation roule to routeArea.

* Spliting the form into multiple forms. One for each option.

* Add prop types to pass state and send as params.

* Add formtype as API param.

* Remove console.log()

* Update translations and make personal info opional.

* rename from mods-of-transport to means-of-transport.

* rename from routeArea to area

* Update src/translations/pages/contact.ts

Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>

* Update src/translations/pages/contact.ts

Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>

* Update src/translations/pages/contact.ts

Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>

* Update src/translations/pages/contact.ts

Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>

* Update src/translations/pages/contact.ts

Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>

* Move button to index.ts

* Set initial date and plannedDepartureTime with global functions from utils.ts.

* Move form and onSumbit functions to /means-of-transport/index.ts

* Fix copy-paste error.

* Remove console.log

* Change from using hasTags to chech to using context.formType in radio buttons.

* remove unused import.

* Simplify validation logic and update when to clean up error messages.

* Fix typo and translation errors

* Ensure that inly string values are submitet to the api.

---------

Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>
---
 src/page-modules/contact/contact.module.css   |   4 +
 src/page-modules/contact/index.ts             |   1 +
 .../contact/layouts/contact-page-layout.tsx   |   2 +-
 src/page-modules/contact/machineEvents.ts     |  19 +-
 .../means-of-transport/forms/delayForm.tsx    | 247 +++++++++++++++
 .../means-of-transport/forms/driverForm.tsx   | 298 ++++++++++++++++++
 .../contact/means-of-transport/forms/index.ts |   6 +
 .../means-of-transport/forms/injuryForm.tsx   | 297 +++++++++++++++++
 .../forms/serviceOfferingForm.tsx             | 186 +++++++++++
 .../means-of-transport/forms/stopForm.tsx     | 210 ++++++++++++
 .../forms/transportationForm.tsx              | 283 +++++++++++++++++
 .../contact/means-of-transport/index.tsx      |  93 ++++++
 .../means-of-transport-form-machine.ts        | 252 +++++++++++++++
 .../feedback/feedbackformMachine.ts           |  10 +-
 .../travelGuaranteeFormMachine.ts             |   5 +-
 src/page-modules/contact/utils.ts             |   6 +
 .../validation/commonFieldValidator.ts        |  12 +-
 .../contact/means-of-transport/index.tsx      |  24 ++
 src/translations/pages/contact.ts             | 260 ++++++++++++++-
 19 files changed, 2195 insertions(+), 20 deletions(-)
 create mode 100644 src/page-modules/contact/means-of-transport/forms/delayForm.tsx
 create mode 100644 src/page-modules/contact/means-of-transport/forms/driverForm.tsx
 create mode 100644 src/page-modules/contact/means-of-transport/forms/index.ts
 create mode 100644 src/page-modules/contact/means-of-transport/forms/injuryForm.tsx
 create mode 100644 src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx
 create mode 100644 src/page-modules/contact/means-of-transport/forms/stopForm.tsx
 create mode 100644 src/page-modules/contact/means-of-transport/forms/transportationForm.tsx
 create mode 100644 src/page-modules/contact/means-of-transport/index.tsx
 create mode 100644 src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts
 create mode 100644 src/pages/contact/means-of-transport/index.tsx

diff --git a/src/page-modules/contact/contact.module.css b/src/page-modules/contact/contact.module.css
index 6c33e48e..6c575bec 100644
--- a/src/page-modules/contact/contact.module.css
+++ b/src/page-modules/contact/contact.module.css
@@ -1,5 +1,9 @@
 @value typo-body__secondary from "@atb/theme/typography.module.css";
 
+.form_options__list {
+  list-style-type: none;
+}
+
 .rules__list {
   padding: var(--spacings-medium);
   padding-left: var(--spacings-xLarge);
diff --git a/src/page-modules/contact/index.ts b/src/page-modules/contact/index.ts
index 093b5542..e28c6868 100644
--- a/src/page-modules/contact/index.ts
+++ b/src/page-modules/contact/index.ts
@@ -11,3 +11,4 @@ export { FeeComplaintForm } from './ticket-control/complaint';
 export { type Line } from './server/journey-planner/validators';
 export { shouldShowContactPage } from './utils';
 export { FeedbackForm } from './ticket-control/feedback';
+export { MeansOfTransportContent } from './means-of-transport';
diff --git a/src/page-modules/contact/layouts/contact-page-layout.tsx b/src/page-modules/contact/layouts/contact-page-layout.tsx
index 20fe5e1e..ca90c609 100644
--- a/src/page-modules/contact/layouts/contact-page-layout.tsx
+++ b/src/page-modules/contact/layouts/contact-page-layout.tsx
@@ -26,7 +26,7 @@ export const contactPages: ContactPage[] = [
   },
   {
     title: PageText.Contact.modeOfTransport.title,
-    href: '/contact/mode-of-transport',
+    href: '/contact/means-of-transport',
     icon: 'transportation/Bus',
   },
   {
diff --git a/src/page-modules/contact/machineEvents.ts b/src/page-modules/contact/machineEvents.ts
index 84e3f019..43fb27b5 100644
--- a/src/page-modules/contact/machineEvents.ts
+++ b/src/page-modules/contact/machineEvents.ts
@@ -3,6 +3,7 @@ import { Line } from './server/journey-planner/validators';
 import { TranslatedString } from '@atb/translations';
 
 export type ReasonForTransportFailure = { id: string; name: TranslatedString };
+export type Area = { id: string; name: TranslatedString };
 
 export const machineEvents = {} as
   | { type: 'VALIDATE' }
@@ -13,7 +14,8 @@ export const machineEvents = {} as
         | 'isAppTicketStorageMode'
         | 'agreesFirstAgreement'
         | 'agreesSecondAgreement'
-        | 'hasInternationalBankAccount';
+        | 'hasInternationalBankAccount'
+        | 'wantsToBeContacted';
     }
   | {
       type: 'UPDATE_FIELD';
@@ -43,7 +45,9 @@ export const machineEvents = {} as
         | 'appPhoneNumber'
         | 'customerNumber'
         | 'travelCardNumber'
-        | 'isAppTicketStorageMode';
+        | 'isAppTicketStorageMode'
+        | 'formType'
+        | 'area';
       value:
         | string
         | number
@@ -51,6 +55,7 @@ export const machineEvents = {} as
         | Line['quays'][0]
         | TransportModeType
         | ReasonForTransportFailure
+        | Area
         | File[];
     }
 
@@ -58,4 +63,12 @@ export const machineEvents = {} as
   | { type: 'TAXI' }
   | { type: 'CAR' }
   | { type: 'OTHER' }
-  | { type: 'SET_STATE_SUBMITTED'; stateSubmitted: string | undefined };
+  | { type: 'SET_STATE_SUBMITTED'; stateSubmitted: string | undefined }
+
+  // mode-of-transport
+  | { type: 'DRIVER_FORM' }
+  | { type: 'TRANSPORTATION_FORM' }
+  | { type: 'DELAY_FORM' }
+  | { type: 'STOP_FORM' }
+  | { type: 'SERVICE_OFFERING_FORM' }
+  | { type: 'INJURY_FORM' };
diff --git a/src/page-modules/contact/means-of-transport/forms/delayForm.tsx b/src/page-modules/contact/means-of-transport/forms/delayForm.tsx
new file mode 100644
index 00000000..3ddb502a
--- /dev/null
+++ b/src/page-modules/contact/means-of-transport/forms/delayForm.tsx
@@ -0,0 +1,247 @@
+import { PageText, useTranslation } from '@atb/translations';
+import { useLines } from '../../lines/use-lines';
+import { SectionCard } from '../../components/section-card';
+import { Typo } from '@atb/components/typography';
+import Select from '../../components/input/select';
+import { ComponentText } from '@atb/translations';
+import { Input } from '../../components/input';
+import { TransportModeType } from '@atb-as/config-specs';
+import { Line } from '../..';
+import { FileInput } from '../../components/input/file';
+import { Textarea } from '../../components/input/textarea';
+import { ContextProps } from '../means-of-transport-form-machine';
+import { machineEvents } from '../../machineEvents';
+
+type DelayFormProps = {
+  state: {
+    hasTag(arg0: string): boolean | undefined;
+    context: ContextProps;
+  };
+  send: (event: typeof machineEvents) => void;
+};
+
+export const DelayForm = ({ state, send }: DelayFormProps) => {
+  const { t } = useTranslation();
+  const { getLinesByMode, getQuaysByLine } = useLines();
+
+  return (
+    <div>
+      <SectionCard title={PageText.Contact.modeOfTransport.delay.description}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.delay.info)}
+        </Typo.p>
+      </SectionCard>
+
+      <SectionCard title={PageText.Contact.modeOfTransport.delay.about.title}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.delay.about.description)}
+        </Typo.p>
+
+        <Select
+          label={t(PageText.Contact.inputFields.transportMode.label).toString()}
+          value={state.context.transportMode}
+          onChange={(value) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'transportMode',
+              value: value as TransportModeType,
+            })
+          }
+          error={
+            state.context?.errorMessages['transportMode']?.[0]
+              ? t(state.context?.errorMessages['transportMode']?.[0])
+              : undefined
+          }
+          valueToText={(val: TransportModeType) =>
+            t(ComponentText.TransportMode.modes[val])
+          }
+          valueToId={(val: TransportModeType) => val}
+          options={['bus', 'water'] as TransportModeType[]}
+          placeholder={t(
+            PageText.Contact.inputFields.transportMode.optionLabel,
+          )}
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.line.label)}
+          value={state.context.line}
+          disabled={!state.context.transportMode}
+          onChange={(value: Line | undefined) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'line',
+              value: value,
+            });
+          }}
+          options={getLinesByMode(
+            state.context.transportMode as TransportModeType,
+          )}
+          valueToId={(line: Line) => line.id}
+          valueToText={(line: Line) => line.name}
+          placeholder={t(PageText.Contact.inputFields.line.optionLabel)}
+          error={
+            state.context?.errorMessages['line']?.[0]
+              ? t(state.context?.errorMessages['line']?.[0])
+              : undefined
+          }
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.fromStop.label)}
+          value={state.context.fromStop}
+          disabled={!state.context.line}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'fromStop',
+              value: value,
+            });
+          }}
+          options={
+            state.context.line?.id ? getQuaysByLine(state.context.line.id) : []
+          }
+          placeholder={t(PageText.Contact.inputFields.fromStop.optionLabel)}
+          error={
+            state.context?.errorMessages['fromStop']?.[0]
+              ? t(state.context?.errorMessages['fromStop']?.[0])
+              : undefined
+          }
+          valueToId={(quay: Line['quays'][0]) => quay.id}
+          valueToText={(quay: Line['quays'][0]) => quay.name}
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.toStop.label)}
+          value={state.context.toStop}
+          disabled={!state.context.line}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'toStop',
+              value: value,
+            });
+          }}
+          placeholder={t(PageText.Contact.inputFields.toStop.optionLabel)}
+          options={
+            state.context.line?.id ? getQuaysByLine(state.context.line.id) : []
+          }
+          error={
+            state.context?.errorMessages['toStop']?.[0]
+              ? t(state.context?.errorMessages['toStop']?.[0])
+              : undefined
+          }
+          valueToId={(quay: Line['quays'][0]) => quay.id}
+          valueToText={(quay: Line['quays'][0]) => quay.name}
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.date}
+          type="date"
+          name="date"
+          value={state.context.date}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'date',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.plannedDepartureTime}
+          type="time"
+          name="time"
+          value={state.context.plannedDepartureTime}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'plannedDepartureTime',
+              value: e.target.value,
+            })
+          }
+        />
+      </SectionCard>
+
+      <SectionCard title={PageText.Contact.inputFields.feedback.title}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.inputFields.feedback.description)}
+        </Typo.p>
+        <Textarea
+          value={state.context.feedback}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'feedback',
+              value: e.target.value,
+            })
+          }
+          error={
+            state.context.errorMessages['feedback']?.[0]
+              ? t(state.context.errorMessages['feedback']?.[0]).toString()
+              : undefined
+          }
+        />
+        <FileInput
+          name="attachments"
+          label={t(PageText.Contact.inputFields.feedback.attachment)}
+          onChange={(files) => {
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'attachments',
+              value: files,
+            });
+          }}
+        />
+      </SectionCard>
+      <SectionCard title={PageText.Contact.aboutYouInfo.optionalTitle}>
+        <Input
+          label={PageText.Contact.inputFields.firstName.label}
+          type="text"
+          name="firstName"
+          value={state.context.firstName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'firstName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.lastName.label}
+          type="text"
+          name="lastName"
+          value={state.context.lastName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'lastName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.email.label}
+          type="email"
+          name="email"
+          value={state.context.email}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'email',
+              value: e.target.value,
+            })
+          }
+        />
+      </SectionCard>
+    </div>
+  );
+};
+
+export default DelayForm;
diff --git a/src/page-modules/contact/means-of-transport/forms/driverForm.tsx b/src/page-modules/contact/means-of-transport/forms/driverForm.tsx
new file mode 100644
index 00000000..2f60f5d1
--- /dev/null
+++ b/src/page-modules/contact/means-of-transport/forms/driverForm.tsx
@@ -0,0 +1,298 @@
+import { PageText, useTranslation } from '@atb/translations';
+import { ContextProps } from '../means-of-transport-form-machine';
+import { useLines } from '../../lines/use-lines';
+import { SectionCard } from '../../components/section-card';
+import { Typo } from '@atb/components/typography';
+import Select from '../../components/input/select';
+import { ComponentText } from '@atb/translations';
+import { Input } from '../../components/input';
+import { TransportModeType } from '@atb-as/config-specs';
+import { Line } from '../..';
+import { FileInput } from '../../components/input/file';
+import { Textarea } from '../../components/input/textarea';
+import { RadioInput } from '../../components/input/radio';
+import { machineEvents } from '../../machineEvents';
+
+type DriverFormProps = {
+  state: {
+    hasTag(arg0: string): boolean | undefined;
+    context: ContextProps;
+  };
+  send: (event: typeof machineEvents) => void;
+};
+
+export const DriverForm = ({ state, send }: DriverFormProps) => {
+  const { t } = useTranslation();
+  const { getLinesByMode, getQuaysByLine } = useLines();
+
+  return (
+    <div>
+      <SectionCard title={PageText.Contact.modeOfTransport.driver.description}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.driver.info)}
+        </Typo.p>
+      </SectionCard>
+
+      <SectionCard title={PageText.Contact.modeOfTransport.driver.about.title}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.driver.about.description)}
+        </Typo.p>
+
+        <Select
+          label={t(PageText.Contact.inputFields.area.label).toString()}
+          value={state.context.area}
+          valueToId={(option) => option.id}
+          valueToText={(option) => t(option.name)}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'area',
+              value: value,
+            });
+          }}
+          placeholder={t(PageText.Contact.inputFields.area.optionLabel)}
+          options={PageText.Contact.inputFields.area.options}
+          error={
+            state.context?.errorMessages['area']?.[0]
+              ? t(state.context?.errorMessages['area']?.[0])
+              : undefined
+          }
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.transportMode.label).toString()}
+          value={state.context.transportMode}
+          onChange={(value) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'transportMode',
+              value: value as TransportModeType,
+            })
+          }
+          error={
+            state.context?.errorMessages['transportMode']?.[0]
+              ? t(state.context?.errorMessages['transportMode']?.[0])
+              : undefined
+          }
+          valueToText={(val: TransportModeType) =>
+            t(ComponentText.TransportMode.modes[val])
+          }
+          valueToId={(val: TransportModeType) => val}
+          options={['bus', 'water'] as TransportModeType[]}
+          placeholder={t(
+            PageText.Contact.inputFields.transportMode.optionLabel,
+          )}
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.line.label)}
+          value={state.context.line}
+          disabled={!state.context.transportMode}
+          onChange={(value: Line | undefined) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'line',
+              value: value,
+            });
+          }}
+          options={getLinesByMode(
+            state.context.transportMode as TransportModeType,
+          )}
+          valueToId={(line: Line) => line.id}
+          valueToText={(line: Line) => line.name}
+          placeholder={t(PageText.Contact.inputFields.line.optionLabel)}
+          error={
+            state.context?.errorMessages['line']?.[0]
+              ? t(state.context?.errorMessages['line']?.[0])
+              : undefined
+          }
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.fromStop.label)}
+          value={state.context.fromStop}
+          disabled={!state.context.line}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'fromStop',
+              value: value,
+            });
+          }}
+          options={
+            state.context.line?.id ? getQuaysByLine(state.context.line.id) : []
+          }
+          placeholder={t(PageText.Contact.inputFields.fromStop.optionLabel)}
+          error={
+            state.context?.errorMessages['fromStop']?.[0]
+              ? t(state.context?.errorMessages['fromStop']?.[0])
+              : undefined
+          }
+          valueToId={(quay: Line['quays'][0]) => quay.id}
+          valueToText={(quay: Line['quays'][0]) => quay.name}
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.toStop.label)}
+          value={state.context.toStop}
+          disabled={!state.context.line}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'toStop',
+              value: value,
+            });
+          }}
+          placeholder={t(PageText.Contact.inputFields.toStop.optionLabel)}
+          options={
+            state.context.line?.id ? getQuaysByLine(state.context.line.id) : []
+          }
+          error={
+            state.context?.errorMessages['toStop']?.[0]
+              ? t(state.context?.errorMessages['toStop']?.[0])
+              : undefined
+          }
+          valueToId={(quay: Line['quays'][0]) => quay.id}
+          valueToText={(quay: Line['quays'][0]) => quay.name}
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.date}
+          type="date"
+          name="date"
+          value={state.context.date}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'date',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.plannedDepartureTime}
+          type="time"
+          name="time"
+          value={state.context.plannedDepartureTime}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'plannedDepartureTime',
+              value: e.target.value,
+            })
+          }
+        />
+      </SectionCard>
+
+      <SectionCard title={PageText.Contact.inputFields.feedback.title}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.inputFields.feedback.description)}
+        </Typo.p>
+        <Textarea
+          value={state.context.feedback}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'feedback',
+              value: e.target.value,
+            })
+          }
+          error={
+            state.context.errorMessages['feedback']?.[0]
+              ? t(state.context.errorMessages['feedback']?.[0]).toString()
+              : undefined
+          }
+        />
+        <FileInput
+          name="attachments"
+          label={t(PageText.Contact.inputFields.feedback.attachment)}
+          onChange={(files) => {
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'attachments',
+              value: files,
+            });
+          }}
+        />
+      </SectionCard>
+      <SectionCard title={PageText.Contact.aboutYouInfo.optionalTitle}>
+        <Input
+          label={PageText.Contact.inputFields.firstName.label}
+          type="text"
+          name="firstName"
+          value={state.context.firstName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'firstName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.lastName.label}
+          type="text"
+          name="lastName"
+          value={state.context.lastName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'lastName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.inputFields.email.wantsToBeContacted.question)}
+        </Typo.p>
+
+        <RadioInput
+          label={t(PageText.Contact.inputFields.email.wantsToBeContacted.yes)}
+          name="wantsToBeContacted"
+          checked={state.context.wantsToBeContacted}
+          onChange={() =>
+            send({
+              type: 'TOGGLE',
+              field: 'wantsToBeContacted',
+            })
+          }
+        />
+        <RadioInput
+          label={t(PageText.Contact.inputFields.email.wantsToBeContacted.no)}
+          name="wantsToBeContacted"
+          checked={!state.context.wantsToBeContacted}
+          onChange={() =>
+            send({
+              type: 'TOGGLE',
+              field: 'wantsToBeContacted',
+            })
+          }
+        />
+        {state.context.wantsToBeContacted && (
+          <Input
+            label={PageText.Contact.inputFields.email.wantsToBeContacted.label}
+            type="email"
+            name="email"
+            value={state.context.email}
+            onChange={(e) =>
+              send({
+                type: 'UPDATE_FIELD',
+                field: 'email',
+                value: e.target.value,
+              })
+            }
+          />
+        )}
+      </SectionCard>
+    </div>
+  );
+};
+
+export default DriverForm;
diff --git a/src/page-modules/contact/means-of-transport/forms/index.ts b/src/page-modules/contact/means-of-transport/forms/index.ts
new file mode 100644
index 00000000..77c358d4
--- /dev/null
+++ b/src/page-modules/contact/means-of-transport/forms/index.ts
@@ -0,0 +1,6 @@
+export { default as DelayForm } from './delayForm';
+export { default as DriverForm } from './driverForm';
+export { default as InjuryForm } from './injuryForm';
+export { default as ServiceOfferingForm } from './serviceOfferingForm';
+export { default as StopForm } from './stopForm';
+export { default as TransportationForm } from './transportationForm';
diff --git a/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx b/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx
new file mode 100644
index 00000000..03571912
--- /dev/null
+++ b/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx
@@ -0,0 +1,297 @@
+import { PageText, useTranslation } from '@atb/translations';
+import { ContextProps } from '../means-of-transport-form-machine';
+import { useLines } from '../../lines/use-lines';
+import { SectionCard } from '../../components/section-card';
+import { Typo } from '@atb/components/typography';
+import Select from '../../components/input/select';
+import { ComponentText } from '@atb/translations';
+import { Input } from '../../components/input';
+import { TransportModeType } from '@atb-as/config-specs';
+import { Line } from '../..';
+import { FileInput } from '../../components/input/file';
+import { Textarea } from '../../components/input/textarea';
+import { RadioInput } from '../../components/input/radio';
+import { machineEvents } from '../../machineEvents';
+
+type InjuryFormProps = {
+  state: {
+    hasTag(arg0: string): boolean | undefined;
+    context: ContextProps;
+  };
+  send: (event: typeof machineEvents) => void;
+};
+
+export const InjuryForm = ({ state, send }: InjuryFormProps) => {
+  const { t } = useTranslation();
+  const { getLinesByMode, getQuaysByLine } = useLines();
+
+  return (
+    <div>
+      <SectionCard title={PageText.Contact.modeOfTransport.injury.description}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.injury.info)}
+        </Typo.p>
+      </SectionCard>
+      <SectionCard title={PageText.Contact.modeOfTransport.injury.about.title}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.injury.about.description)}
+        </Typo.p>
+
+        <Select
+          label={t(PageText.Contact.inputFields.area.label).toString()}
+          value={state.context.area}
+          valueToId={(option) => option.id}
+          valueToText={(option) => t(option.name)}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'area',
+              value: value,
+            });
+          }}
+          placeholder={t(PageText.Contact.inputFields.area.optionLabel)}
+          options={PageText.Contact.inputFields.area.options}
+          error={
+            state.context?.errorMessages['area']?.[0]
+              ? t(state.context?.errorMessages['area']?.[0])
+              : undefined
+          }
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.transportMode.label).toString()}
+          value={state.context.transportMode}
+          onChange={(value) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'transportMode',
+              value: value as TransportModeType,
+            })
+          }
+          error={
+            state.context?.errorMessages['transportMode']?.[0]
+              ? t(state.context?.errorMessages['transportMode']?.[0])
+              : undefined
+          }
+          valueToText={(val: TransportModeType) =>
+            t(ComponentText.TransportMode.modes[val])
+          }
+          valueToId={(val: TransportModeType) => val}
+          options={['bus', 'water'] as TransportModeType[]}
+          placeholder={t(
+            PageText.Contact.inputFields.transportMode.optionLabel,
+          )}
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.line.label)}
+          value={state.context.line}
+          disabled={!state.context.transportMode}
+          onChange={(value: Line | undefined) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'line',
+              value: value,
+            });
+          }}
+          options={getLinesByMode(
+            state.context.transportMode as TransportModeType,
+          )}
+          valueToId={(line: Line) => line.id}
+          valueToText={(line: Line) => line.name}
+          placeholder={t(PageText.Contact.inputFields.line.optionLabel)}
+          error={
+            state.context?.errorMessages['line']?.[0]
+              ? t(state.context?.errorMessages['line']?.[0])
+              : undefined
+          }
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.fromStop.label)}
+          value={state.context.fromStop}
+          disabled={!state.context.line}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'fromStop',
+              value: value,
+            });
+          }}
+          options={
+            state.context.line?.id ? getQuaysByLine(state.context.line.id) : []
+          }
+          placeholder={t(PageText.Contact.inputFields.fromStop.optionLabel)}
+          error={
+            state.context?.errorMessages['fromStop']?.[0]
+              ? t(state.context?.errorMessages['fromStop']?.[0])
+              : undefined
+          }
+          valueToId={(quay: Line['quays'][0]) => quay.id}
+          valueToText={(quay: Line['quays'][0]) => quay.name}
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.toStop.label)}
+          value={state.context.toStop}
+          disabled={!state.context.line}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'toStop',
+              value: value,
+            });
+          }}
+          placeholder={t(PageText.Contact.inputFields.toStop.optionLabel)}
+          options={
+            state.context.line?.id ? getQuaysByLine(state.context.line.id) : []
+          }
+          error={
+            state.context?.errorMessages['toStop']?.[0]
+              ? t(state.context?.errorMessages['toStop']?.[0])
+              : undefined
+          }
+          valueToId={(quay: Line['quays'][0]) => quay.id}
+          valueToText={(quay: Line['quays'][0]) => quay.name}
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.date}
+          type="date"
+          name="date"
+          value={state.context.date}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'date',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.plannedDepartureTime}
+          type="time"
+          name="time"
+          value={state.context.plannedDepartureTime}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'plannedDepartureTime',
+              value: e.target.value,
+            })
+          }
+        />
+      </SectionCard>
+
+      <SectionCard title={PageText.Contact.inputFields.feedback.title}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.inputFields.feedback.description)}
+        </Typo.p>
+        <Textarea
+          value={state.context.feedback}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'feedback',
+              value: e.target.value,
+            })
+          }
+          error={
+            state.context.errorMessages['feedback']?.[0]
+              ? t(state.context.errorMessages['feedback']?.[0]).toString()
+              : undefined
+          }
+        />
+        <FileInput
+          name="attachments"
+          label={t(PageText.Contact.inputFields.feedback.attachment)}
+          onChange={(files) => {
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'attachments',
+              value: files,
+            });
+          }}
+        />
+      </SectionCard>
+      <SectionCard title={PageText.Contact.aboutYouInfo.optionalTitle}>
+        <Input
+          label={PageText.Contact.inputFields.firstName.label}
+          type="text"
+          name="firstName"
+          value={state.context.firstName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'firstName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.lastName.label}
+          type="text"
+          name="lastName"
+          value={state.context.lastName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'lastName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.inputFields.email.wantsToBeContacted.question)}
+        </Typo.p>
+
+        <RadioInput
+          label={t(PageText.Contact.inputFields.email.wantsToBeContacted.yes)}
+          name="wantsToBeContacted"
+          checked={state.context.wantsToBeContacted}
+          onChange={() =>
+            send({
+              type: 'TOGGLE',
+              field: 'wantsToBeContacted',
+            })
+          }
+        />
+        <RadioInput
+          label={t(PageText.Contact.inputFields.email.wantsToBeContacted.no)}
+          name="wantsToBeContacted"
+          checked={!state.context.wantsToBeContacted}
+          onChange={() =>
+            send({
+              type: 'TOGGLE',
+              field: 'wantsToBeContacted',
+            })
+          }
+        />
+        {state.context.wantsToBeContacted && (
+          <Input
+            label={PageText.Contact.inputFields.email.wantsToBeContacted.label}
+            type="email"
+            name="email"
+            value={state.context.email}
+            onChange={(e) =>
+              send({
+                type: 'UPDATE_FIELD',
+                field: 'email',
+                value: e.target.value,
+              })
+            }
+          />
+        )}
+      </SectionCard>
+    </div>
+  );
+};
+
+export default InjuryForm;
diff --git a/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx b/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx
new file mode 100644
index 00000000..fc5273ee
--- /dev/null
+++ b/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx
@@ -0,0 +1,186 @@
+import { PageText, useTranslation } from '@atb/translations';
+import { ContextProps } from '../means-of-transport-form-machine';
+import { useLines } from '../../lines/use-lines';
+import { SectionCard } from '../../components/section-card';
+import { Typo } from '@atb/components/typography';
+import Select from '../../components/input/select';
+import { ComponentText } from '@atb/translations';
+import { Input } from '../../components/input';
+import { TransportModeType } from '@atb-as/config-specs';
+import { Line } from '../..';
+import { FileInput } from '../../components/input/file';
+import { Textarea } from '../../components/input/textarea';
+import { machineEvents } from '../../machineEvents';
+
+type ServiceOfferingFormProps = {
+  state: {
+    hasTag(arg0: string): boolean | undefined;
+    context: ContextProps;
+  };
+  send: (event: typeof machineEvents) => void;
+};
+
+export const ServiceOfferingForm = ({
+  state,
+  send,
+}: ServiceOfferingFormProps) => {
+  const { t } = useTranslation();
+  const { getLinesByMode, getQuaysByLine } = useLines();
+
+  return (
+    <div>
+      <SectionCard
+        title={PageText.Contact.modeOfTransport.serviceOffering.description}
+      >
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.serviceOffering.info)}
+        </Typo.p>
+      </SectionCard>
+
+      <SectionCard
+        title={PageText.Contact.modeOfTransport.serviceOffering.about.title}
+      >
+        <Typo.p textType="body__primary">
+          {t(
+            PageText.Contact.modeOfTransport.serviceOffering.about.description,
+          )}
+        </Typo.p>
+
+        <Select
+          label={t(PageText.Contact.inputFields.area.label).toString()}
+          value={state.context.area}
+          valueToId={(option) => option.id}
+          valueToText={(option) => t(option.name)}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'area',
+              value: value,
+            });
+          }}
+          placeholder={t(PageText.Contact.inputFields.area.optionLabel)}
+          options={PageText.Contact.inputFields.area.options}
+          error={
+            state.context?.errorMessages['area']?.[0]
+              ? t(state.context?.errorMessages['area']?.[0])
+              : undefined
+          }
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.transportMode.label).toString()}
+          value={state.context.transportMode}
+          onChange={(value) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'transportMode',
+              value: value as TransportModeType,
+            })
+          }
+          error={
+            state.context?.errorMessages['transportMode']?.[0]
+              ? t(state.context?.errorMessages['transportMode']?.[0])
+              : undefined
+          }
+          valueToText={(val: TransportModeType) =>
+            t(ComponentText.TransportMode.modes[val])
+          }
+          valueToId={(val: TransportModeType) => val}
+          options={['bus', 'water'] as TransportModeType[]}
+          placeholder={t(
+            PageText.Contact.inputFields.transportMode.optionLabel,
+          )}
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.line.label)}
+          value={state.context.line}
+          disabled={!state.context.transportMode}
+          onChange={(value: Line | undefined) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'line',
+              value: value,
+            });
+          }}
+          options={getLinesByMode(
+            state.context.transportMode as TransportModeType,
+          )}
+          valueToId={(line: Line) => line.id}
+          valueToText={(line: Line) => line.name}
+          placeholder={t(PageText.Contact.inputFields.line.optionLabel)}
+          error={
+            state.context?.errorMessages['line']?.[0]
+              ? t(state.context?.errorMessages['line']?.[0])
+              : undefined
+          }
+        />
+      </SectionCard>
+
+      <SectionCard title={PageText.Contact.inputFields.feedback.title}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.inputFields.feedback.description)}
+        </Typo.p>
+        <Textarea
+          value={state.context.feedback}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'feedback',
+              value: e.target.value,
+            })
+          }
+          error={
+            state.context.errorMessages['feedback']?.[0]
+              ? t(state.context.errorMessages['feedback']?.[0]).toString()
+              : undefined
+          }
+        />
+        <FileInput
+          name="attachments"
+          label={t(PageText.Contact.inputFields.feedback.attachment)}
+          onChange={(files) => {
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'attachments',
+              value: files,
+            });
+          }}
+        />
+      </SectionCard>
+      <SectionCard title={PageText.Contact.aboutYouInfo.optionalTitle}>
+        <Input
+          label={PageText.Contact.inputFields.firstName.label}
+          type="text"
+          name="firstName"
+          value={state.context.firstName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'firstName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.lastName.label}
+          type="text"
+          name="lastName"
+          value={state.context.lastName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'lastName',
+              value: e.target.value,
+            })
+          }
+        />
+      </SectionCard>
+    </div>
+  );
+};
+
+export default ServiceOfferingForm;
diff --git a/src/page-modules/contact/means-of-transport/forms/stopForm.tsx b/src/page-modules/contact/means-of-transport/forms/stopForm.tsx
new file mode 100644
index 00000000..cf88c52c
--- /dev/null
+++ b/src/page-modules/contact/means-of-transport/forms/stopForm.tsx
@@ -0,0 +1,210 @@
+import { PageText, useTranslation } from '@atb/translations';
+import { ContextProps } from '../means-of-transport-form-machine';
+import { useLines } from '../../lines/use-lines';
+import { SectionCard } from '../../components/section-card';
+import { Typo } from '@atb/components/typography';
+import Select from '../../components/input/select';
+import { ComponentText } from '@atb/translations';
+import { Input } from '../../components/input';
+import { TransportModeType } from '@atb-as/config-specs';
+import { Line } from '../..';
+import { FileInput } from '../../components/input/file';
+import { Textarea } from '../../components/input/textarea';
+import { machineEvents } from '../../machineEvents';
+
+type StopFormProps = {
+  state: {
+    hasTag(arg0: string): boolean | undefined;
+    context: ContextProps;
+  };
+  send: (event: typeof machineEvents) => void;
+};
+
+export const StopForm = ({ state, send }: StopFormProps) => {
+  const { t } = useTranslation();
+  const { getLinesByMode, getQuaysByLine } = useLines();
+
+  return (
+    <div>
+      <SectionCard title={PageText.Contact.modeOfTransport.stop.description}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.stop.info)}
+        </Typo.p>
+      </SectionCard>
+
+      <SectionCard title={PageText.Contact.modeOfTransport.stop.about.title}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.stop.about.description)}
+        </Typo.p>
+
+        <Select
+          label={t(PageText.Contact.inputFields.transportMode.label).toString()}
+          value={state.context.transportMode}
+          onChange={(value) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'transportMode',
+              value: value as TransportModeType,
+            })
+          }
+          error={
+            state.context?.errorMessages['transportMode']?.[0]
+              ? t(state.context?.errorMessages['transportMode']?.[0])
+              : undefined
+          }
+          valueToText={(val: TransportModeType) =>
+            t(ComponentText.TransportMode.modes[val])
+          }
+          valueToId={(val: TransportModeType) => val}
+          options={['bus', 'water'] as TransportModeType[]}
+          placeholder={t(
+            PageText.Contact.inputFields.transportMode.optionLabel,
+          )}
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.line.label)}
+          value={state.context.line}
+          disabled={!state.context.transportMode}
+          onChange={(value: Line | undefined) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'line',
+              value: value,
+            });
+          }}
+          options={getLinesByMode(
+            state.context.transportMode as TransportModeType,
+          )}
+          valueToId={(line: Line) => line.id}
+          valueToText={(line: Line) => line.name}
+          placeholder={t(PageText.Contact.inputFields.line.optionLabel)}
+          error={
+            state.context?.errorMessages['line']?.[0]
+              ? t(state.context?.errorMessages['line']?.[0])
+              : undefined
+          }
+        />
+
+        <Select
+          label={t(
+            PageText.Contact.inputFields.fromStop.labelWhitoutSpecification,
+          )}
+          value={state.context.fromStop}
+          disabled={!state.context.line}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'fromStop',
+              value: value,
+            });
+          }}
+          options={
+            state.context.line?.id ? getQuaysByLine(state.context.line.id) : []
+          }
+          placeholder={t(PageText.Contact.inputFields.fromStop.optionLabel)}
+          error={
+            state.context?.errorMessages['fromStop']?.[0]
+              ? t(state.context?.errorMessages['fromStop']?.[0])
+              : undefined
+          }
+          valueToId={(quay: Line['quays'][0]) => quay.id}
+          valueToText={(quay: Line['quays'][0]) => quay.name}
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.date}
+          type="date"
+          name="date"
+          value={state.context.date}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'date',
+              value: e.target.value,
+            })
+          }
+        />
+      </SectionCard>
+
+      <SectionCard title={PageText.Contact.inputFields.feedback.title}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.inputFields.feedback.description)}
+        </Typo.p>
+        <Textarea
+          value={state.context.feedback}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'feedback',
+              value: e.target.value,
+            })
+          }
+          error={
+            state.context.errorMessages['feedback']?.[0]
+              ? t(state.context.errorMessages['feedback']?.[0]).toString()
+              : undefined
+          }
+        />
+        <FileInput
+          name="attachments"
+          label={t(PageText.Contact.inputFields.feedback.attachment)}
+          onChange={(files) => {
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'attachments',
+              value: files,
+            });
+          }}
+        />
+      </SectionCard>
+      <SectionCard title={PageText.Contact.aboutYouInfo.optionalTitle}>
+        <Input
+          label={PageText.Contact.inputFields.firstName.label}
+          type="text"
+          name="firstName"
+          value={state.context.firstName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'firstName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.lastName.label}
+          type="text"
+          name="lastName"
+          value={state.context.lastName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'lastName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.email.label}
+          type="email"
+          name="email"
+          value={state.context.email}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'email',
+              value: e.target.value,
+            })
+          }
+        />
+      </SectionCard>
+    </div>
+  );
+};
+
+export default StopForm;
diff --git a/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx b/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx
new file mode 100644
index 00000000..0a99722b
--- /dev/null
+++ b/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx
@@ -0,0 +1,283 @@
+import { PageText, useTranslation } from '@atb/translations';
+import { ContextProps } from '../means-of-transport-form-machine';
+import { useLines } from '../../lines/use-lines';
+import { SectionCard } from '../../components/section-card';
+import { Typo } from '@atb/components/typography';
+import Select from '../../components/input/select';
+import { ComponentText } from '@atb/translations';
+import { Input } from '../../components/input';
+import { TransportModeType } from '@atb-as/config-specs';
+import { Line } from '../..';
+import { FileInput } from '../../components/input/file';
+import { Textarea } from '../../components/input/textarea';
+import { RadioInput } from '../../components/input/radio';
+import { machineEvents } from '../../machineEvents';
+
+type TransportationFormProps = {
+  state: {
+    hasTag(arg0: string): boolean | undefined;
+    context: ContextProps;
+  };
+  send: (event: typeof machineEvents) => void;
+};
+
+export const TransportationForm = ({
+  state,
+  send,
+}: TransportationFormProps) => {
+  const { t } = useTranslation();
+  const { getLinesByMode, getQuaysByLine } = useLines();
+
+  return (
+    <div>
+      <SectionCard
+        title={PageText.Contact.modeOfTransport.transportation.description}
+      >
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.transportation.info)}
+        </Typo.p>
+      </SectionCard>
+
+      <SectionCard
+        title={PageText.Contact.modeOfTransport.transportation.about.title}
+      >
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.modeOfTransport.transportation.about.description)}
+        </Typo.p>
+
+        <Select
+          label={t(PageText.Contact.inputFields.transportMode.label).toString()}
+          value={state.context.transportMode}
+          onChange={(value) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'transportMode',
+              value: value as TransportModeType,
+            })
+          }
+          error={
+            state.context?.errorMessages['transportMode']?.[0]
+              ? t(state.context?.errorMessages['transportMode']?.[0])
+              : undefined
+          }
+          valueToText={(val: TransportModeType) =>
+            t(ComponentText.TransportMode.modes[val])
+          }
+          valueToId={(val: TransportModeType) => val}
+          options={['bus', 'water'] as TransportModeType[]}
+          placeholder={t(
+            PageText.Contact.inputFields.transportMode.optionLabel,
+          )}
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.line.label)}
+          value={state.context.line}
+          disabled={!state.context.transportMode}
+          onChange={(value: Line | undefined) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'line',
+              value: value,
+            });
+          }}
+          options={getLinesByMode(
+            state.context.transportMode as TransportModeType,
+          )}
+          valueToId={(line: Line) => line.id}
+          valueToText={(line: Line) => line.name}
+          placeholder={t(PageText.Contact.inputFields.line.optionLabel)}
+          error={
+            state.context?.errorMessages['line']?.[0]
+              ? t(state.context?.errorMessages['line']?.[0])
+              : undefined
+          }
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.fromStop.label)}
+          value={state.context.fromStop}
+          disabled={!state.context.line}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'fromStop',
+              value: value,
+            });
+          }}
+          options={
+            state.context.line?.id ? getQuaysByLine(state.context.line.id) : []
+          }
+          placeholder={t(PageText.Contact.inputFields.fromStop.optionLabel)}
+          error={
+            state.context?.errorMessages['fromStop']?.[0]
+              ? t(state.context?.errorMessages['fromStop']?.[0])
+              : undefined
+          }
+          valueToId={(quay: Line['quays'][0]) => quay.id}
+          valueToText={(quay: Line['quays'][0]) => quay.name}
+        />
+
+        <Select
+          label={t(PageText.Contact.inputFields.toStop.label)}
+          value={state.context.toStop}
+          disabled={!state.context.line}
+          onChange={(value) => {
+            if (!value) return;
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'toStop',
+              value: value,
+            });
+          }}
+          placeholder={t(PageText.Contact.inputFields.toStop.optionLabel)}
+          options={
+            state.context.line?.id ? getQuaysByLine(state.context.line.id) : []
+          }
+          error={
+            state.context?.errorMessages['toStop']?.[0]
+              ? t(state.context?.errorMessages['toStop']?.[0])
+              : undefined
+          }
+          valueToId={(quay: Line['quays'][0]) => quay.id}
+          valueToText={(quay: Line['quays'][0]) => quay.name}
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.date}
+          type="date"
+          name="date"
+          value={state.context.date}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'date',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.plannedDepartureTime}
+          type="time"
+          name="time"
+          value={state.context.plannedDepartureTime}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'plannedDepartureTime',
+              value: e.target.value,
+            })
+          }
+        />
+      </SectionCard>
+
+      <SectionCard title={PageText.Contact.inputFields.feedback.title}>
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.inputFields.feedback.description)}
+        </Typo.p>
+        <Textarea
+          value={state.context.feedback}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'feedback',
+              value: e.target.value,
+            })
+          }
+          error={
+            state.context.errorMessages['feedback']?.[0]
+              ? t(state.context.errorMessages['feedback']?.[0]).toString()
+              : undefined
+          }
+        />
+        <FileInput
+          name="attachments"
+          label={t(PageText.Contact.inputFields.feedback.attachment)}
+          onChange={(files) => {
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'attachments',
+              value: files,
+            });
+          }}
+        />
+      </SectionCard>
+      <SectionCard title={PageText.Contact.aboutYouInfo.optionalTitle}>
+        <Input
+          label={PageText.Contact.inputFields.firstName.label}
+          type="text"
+          name="firstName"
+          value={state.context.firstName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'firstName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.lastName.label}
+          type="text"
+          name="lastName"
+          value={state.context.lastName}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'lastName',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Typo.p textType="body__primary">
+          {t(PageText.Contact.inputFields.email.wantsToBeContacted.question)}
+        </Typo.p>
+
+        <RadioInput
+          label={t(PageText.Contact.inputFields.email.wantsToBeContacted.yes)}
+          name="wantsToBeContacted"
+          checked={state.context.wantsToBeContacted}
+          onChange={() =>
+            send({
+              type: 'TOGGLE',
+              field: 'wantsToBeContacted',
+            })
+          }
+        />
+        <RadioInput
+          label={t(PageText.Contact.inputFields.email.wantsToBeContacted.no)}
+          name="wantsToBeContacted"
+          checked={!state.context.wantsToBeContacted}
+          onChange={() =>
+            send({
+              type: 'TOGGLE',
+              field: 'wantsToBeContacted',
+            })
+          }
+        />
+        {state.context.wantsToBeContacted && (
+          <Input
+            label={PageText.Contact.inputFields.email.wantsToBeContacted.label}
+            type="email"
+            name="email"
+            value={state.context.email}
+            onChange={(e) =>
+              send({
+                type: 'UPDATE_FIELD',
+                field: 'email',
+                value: e.target.value,
+              })
+            }
+          />
+        )}
+      </SectionCard>
+    </div>
+  );
+};
+
+export default TransportationForm;
diff --git a/src/page-modules/contact/means-of-transport/index.tsx b/src/page-modules/contact/means-of-transport/index.tsx
new file mode 100644
index 00000000..f7679ce0
--- /dev/null
+++ b/src/page-modules/contact/means-of-transport/index.tsx
@@ -0,0 +1,93 @@
+import { useMachine } from '@xstate/react';
+import {
+  FormType,
+  meansOfTransportFormMachine,
+} from './means-of-transport-form-machine';
+import {
+  DelayForm,
+  DriverForm,
+  InjuryForm,
+  ServiceOfferingForm,
+  StopForm,
+  TransportationForm,
+} from './forms';
+import { Button } from '@atb/components/button';
+import { PageText, useTranslation } from '@atb/translations';
+import { FormEventHandler, useState } from 'react';
+import { SectionCard } from '../components/section-card';
+import { RadioInput } from '../components/input/radio';
+import style from '../contact.module.css';
+
+export const MeansOfTransportContent = () => {
+  const { t } = useTranslation();
+  const [state, send] = useMachine(meansOfTransportFormMachine);
+
+  // Local state to force re-render to display errors.
+  const [forceRerender, setForceRerender] = useState(false);
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+    send({ type: 'VALIDATE' });
+
+    // Force a re-render with dummy state.
+    if (Object.keys(state.context.errorMessages).length > 0) {
+      setForceRerender(!forceRerender);
+    }
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      <SectionCard title={PageText.Contact.travelGuarantee.title}>
+        <ul className={style.form_options__list}>
+          {Object.values(FormType).map((formType) => (
+            <li key={formType}>
+              <RadioInput
+                label={t(
+                  PageText.Contact.modeOfTransport[formType].description,
+                )}
+                value={formType}
+                checked={state.context.formType === formType}
+                onChange={(e) =>
+                  send({
+                    type: 'UPDATE_FIELD',
+                    field: 'formType',
+                    value: e.target.value,
+                  })
+                }
+              />
+            </li>
+          ))}
+        </ul>
+      </SectionCard>
+
+      {state.context.formType === 'driver' && (
+        <DriverForm state={state} send={send} />
+      )}
+      {state.context.formType === 'transportation' && (
+        <TransportationForm state={state} send={send} />
+      )}
+      {state.context.formType === 'delay' && (
+        <DelayForm state={state} send={send} />
+      )}
+      {state.context.formType === 'stop' && (
+        <StopForm state={state} send={send} />
+      )}
+      {state.context.formType === 'serviceOffering' && (
+        <ServiceOfferingForm state={state} send={send} />
+      )}
+      {state.context.formType === 'injury' && (
+        <InjuryForm state={state} send={send} />
+      )}
+      {state.context.formType && (
+        <Button
+          title={t(PageText.Contact.submit)}
+          mode={'interactive_0--bordered'}
+          buttonProps={{ type: 'submit' }}
+        />
+      )}
+      {state.hasTag('success') && <div>success!</div>}
+    </form>
+  );
+};
+
+export default MeansOfTransportContent;
diff --git a/src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts b/src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts
new file mode 100644
index 00000000..03884d3d
--- /dev/null
+++ b/src/page-modules/contact/means-of-transport/means-of-transport-form-machine.ts
@@ -0,0 +1,252 @@
+import { TransportModeType } from '@atb-as/config-specs';
+import { assign, fromPromise, setup } from 'xstate';
+import { Line } from '../server/journey-planner/validators';
+import { machineEvents, Area } from '../machineEvents';
+import { InputErrorMessages, commonFieldValidator } from '../validation';
+import {
+  convertFilesToBase64,
+  getCurrentDateString,
+  getCurrentTimeString,
+} from '../utils';
+
+export enum FormType {
+  Driver = 'driver',
+  Transportation = 'transportation',
+  Delay = 'delay',
+  Stop = 'stop',
+  ServiceOffering = 'serviceOffering',
+  Injury = 'injury',
+}
+
+type submitInput = {
+  formType: string;
+  areaName: string;
+  transportMode: string;
+  lineName: string;
+  fromStopName: string;
+  toStopName: string;
+  date: string;
+  plannedDepartureTime: string;
+  feedback: string;
+  attachments?: File[];
+  firstName: string;
+  lastName: string;
+  email: string;
+};
+
+export type ContextProps = {
+  formType: FormType | undefined;
+  area: Area | undefined;
+  transportMode: TransportModeType | undefined;
+  line: Line | undefined;
+  fromStop: Line['quays'][0] | undefined;
+  toStop: Line['quays'][0] | undefined;
+  date: string;
+  plannedDepartureTime: string;
+  feedback: string;
+  attachments?: File[];
+  firstName: string;
+  lastName: string;
+  email: string;
+  target?: string;
+  isContactInfoOptional: boolean;
+  wantsToBeContacted: boolean;
+  errorMessages: InputErrorMessages;
+};
+
+export const meansOfTransportFormMachine = setup({
+  types: {
+    context: {} as ContextProps,
+    events: machineEvents,
+  },
+  guards: {
+    validateInputs: ({ context }) => commonFieldValidator(context),
+  },
+  actions: {
+    updateField: assign(({ context, event }) => {
+      if (event.type === 'UPDATE_FIELD') {
+        const { field, value } = event;
+
+        // Remove all errorMessages if changing form type.
+        // Else, remove errorMessages related to type.
+        if (field === 'formType') {
+          context.errorMessages = {};
+        } else {
+          context.errorMessages[field] = [];
+        }
+        return {
+          ...context,
+          [field]: value,
+        };
+      }
+      return context;
+    }),
+
+    toggleField: assign(({ context, event }: any) => {
+      if (event.type === 'TOGGLE') {
+        const { field } = event;
+        return {
+          [field]: !context[field],
+        };
+      }
+      return context;
+    }),
+  },
+  actors: {
+    submit: fromPromise(
+      async ({
+        input: {
+          formType,
+          areaName,
+          transportMode,
+          lineName,
+          fromStopName,
+          toStopName,
+          date,
+          plannedDepartureTime,
+          feedback,
+          attachments,
+          firstName,
+          lastName,
+          email,
+        },
+      }: {
+        input: submitInput;
+      }) => {
+        const base64EncodedAttachments = await convertFilesToBase64(
+          attachments || [],
+        );
+        return await fetch('api/contact/means-of-transport', {
+          method: 'POST',
+          body: JSON.stringify({
+            formType: formType,
+            area: areaName,
+            transportMode: transportMode,
+            line: lineName,
+            fromStop: fromStopName,
+            toStop: toStopName,
+            date: date,
+            plannedDepartureTime: plannedDepartureTime,
+            additionalInfo: feedback,
+            firstName: firstName,
+            lastName: lastName,
+            email: email,
+            attachments: base64EncodedAttachments,
+          }),
+        }).then((response) => {
+          // throw an error to force onError
+          if (!response.ok) throw new Error('Failed to call API');
+          return response.ok;
+        });
+      },
+    ),
+  },
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOlwgBswBiAZQFUAhAWQEkAVAbQAYBdRUAAcA9rFwAXXMPwCQAD0QBGAGzcSAZgCsATnXLlAJi2rN6gDQgAnkoDsmktxsAObstN7FN5eoC+Pi2hYeISk5FTU7ADyAOLRADIAojz8SCAiYpLSsgoIACyKJNpFxSUlFtYIRvZO6rUqBg3c3Fp+ARg4BMRklDTsAIIAGqzJsukSUjKpOSpqWrr6VSbmVojqueoaBk6K3AbOqjYGyq0ggR0hJJDj+FB0TGxcfKOi41lTiJqaBdyKmoaKTmcTkB2nKtnsjhcblqyk83hOZ2CXSukhudAS7AA+uwAEp9ABytAACpEcVjmJEACJJJ6pMaZSagHJ2NSKXKudnqGw7TSAsGVdTaEhOYpOTQ2ZqmZS5BHtJGkCjCdAQAi3CDSMBkfAAN2EAGtNYjOgqlSqbggCLrMOgGckRnSXgzsh8vg5fv9AcCQfztiRcsVnHpuO4bLKgsaSIrlarqGAAE5x4RxkiCCg2gBmSdQJCNFyjZqgFp1wmttr49qEjomzoQn2+7oMAKB3pWlQM9nF20cn20nj8-hA+GEEDgslzxGeGWr7wQAFplA4mkvl8ubPz52Hzl0wmBJ69GfIPkLcgZtMpudovmze6DW7UbH7FGzT9wnA12TKB+PSCjVXunTO2wPq47anmK3DaGKuT8msBS5M4EFit4Ng2OoBifm04Z5qaf4OlObxMqsmi5H6TjrGRhwoV4wb8r8BgOAh5FNCo56bvKJCwAArpgmBwPAeH7jWQEOIYmhgZoiHEbRzQkKY2jBl83C5GKnihv2QA */
+  initial: 'editing',
+  context: {
+    formType: undefined,
+    area: undefined,
+    transportMode: undefined,
+    line: undefined,
+    fromStop: undefined,
+    toStop: undefined,
+    date: getCurrentDateString(),
+    plannedDepartureTime: getCurrentTimeString(),
+    feedback: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+    isContactInfoOptional: true,
+    wantsToBeContacted: false,
+    errorMessages: {},
+  },
+  states: {
+    editing: {
+      initial: 'idle',
+      on: {
+        TOGGLE: {
+          actions: 'toggleField',
+        },
+
+        UPDATE_FIELD: {
+          actions: 'updateField',
+        },
+
+        VALIDATE: {
+          guard: 'validateInputs',
+          target: 'editing.readyForSubmit',
+        },
+      },
+
+      states: {
+        idle: {},
+        readyForSubmit: {
+          type: 'final',
+        },
+      },
+
+      onDone: {
+        target: 'submitting',
+      },
+    },
+
+    submitting: {
+      invoke: {
+        src: 'submit',
+        input: ({ context }) => {
+          const {
+            formType,
+            area,
+            transportMode,
+            line,
+            fromStop,
+            toStop,
+            date,
+            plannedDepartureTime,
+            feedback,
+            firstName,
+            lastName,
+            email,
+          } = context;
+          if (
+            !formType ||
+            !area ||
+            !transportMode ||
+            !line ||
+            !fromStop ||
+            !toStop
+          ) {
+            throw new Error(`Missing required field(s)`);
+          }
+          return {
+            formType: formType,
+            areaName: area.name.no,
+            transportMode: transportMode,
+            lineName: line.name,
+            fromStopName: fromStop.name,
+            toStopName: toStop.name,
+            date: date,
+            plannedDepartureTime: plannedDepartureTime,
+            feedback: feedback,
+            firstName: firstName,
+            lastName: lastName,
+            email: email,
+          };
+        },
+
+        onDone: {
+          target: 'success',
+        },
+
+        onError: {
+          target: 'editing',
+        },
+      },
+    },
+
+    success: {
+      type: 'final',
+    },
+  },
+});
diff --git a/src/page-modules/contact/ticket-control/feedback/feedbackformMachine.ts b/src/page-modules/contact/ticket-control/feedback/feedbackformMachine.ts
index 65516e70..4d2fb4c4 100644
--- a/src/page-modules/contact/ticket-control/feedback/feedbackformMachine.ts
+++ b/src/page-modules/contact/ticket-control/feedback/feedbackformMachine.ts
@@ -3,7 +3,11 @@ import { Line } from '../../server/journey-planner/validators';
 import { assign, fromPromise, setup } from 'xstate';
 import { commonFieldValidator, InputErrorMessages } from '../../validation';
 import { machineEvents } from '../../machineEvents';
-import { convertFilesToBase64 } from '../../utils';
+import {
+  convertFilesToBase64,
+  getCurrentDateString,
+  getCurrentTimeString,
+} from '../../utils';
 
 type APIParams = {
   transportMode: TransportModeType | undefined;
@@ -108,8 +112,8 @@ export const formMachine = setup({
     line: undefined,
     fromStop: undefined,
     toStop: undefined,
-    date: new Date().toISOString().split('T')[0],
-    plannedDepartureTime: `${String(new Date().getHours()).padStart(2, '0')}:${String(new Date().getMinutes()).padStart(2, '0')}`,
+    date: getCurrentDateString(),
+    plannedDepartureTime: getCurrentTimeString(),
     feedback: '',
     firstName: '',
     lastName: '',
diff --git a/src/page-modules/contact/travel-guarantee/travelGuaranteeFormMachine.ts b/src/page-modules/contact/travel-guarantee/travelGuaranteeFormMachine.ts
index 2c58b69b..6f6901a9 100644
--- a/src/page-modules/contact/travel-guarantee/travelGuaranteeFormMachine.ts
+++ b/src/page-modules/contact/travel-guarantee/travelGuaranteeFormMachine.ts
@@ -6,6 +6,7 @@ import {
   InputErrorMessages,
   travelGuaranteeFieldValidator,
 } from '../validation';
+import { getCurrentDateString, getCurrentTimeString } from '../utils';
 
 type APIParams = {
   transportMode: TransportModeType | undefined;
@@ -154,8 +155,8 @@ export const fetchMachine = setup({
     line: undefined,
     fromStop: undefined,
     toStop: undefined,
-    date: new Date().toISOString().split('T')[0],
-    plannedDepartureTime: `${String(new Date().getHours()).padStart(2, '0')}:${String(new Date().getMinutes()).padStart(2, '0')}`,
+    date: getCurrentDateString(),
+    plannedDepartureTime: getCurrentTimeString(),
     reasonForTransportFailure: undefined,
     kilometersDriven: '',
     feedback: '',
diff --git a/src/page-modules/contact/utils.ts b/src/page-modules/contact/utils.ts
index 9f8fd869..80d066c6 100644
--- a/src/page-modules/contact/utils.ts
+++ b/src/page-modules/contact/utils.ts
@@ -30,3 +30,9 @@ export const convertFilesToBase64 = (
 
   return Promise.all(filePromises);
 };
+
+export const getCurrentDateString = (): string =>
+  new Date().toISOString().split('T')[0];
+
+export const getCurrentTimeString = (): string =>
+  `${String(new Date().getHours()).padStart(2, '0')}:${String(new Date().getMinutes()).padStart(2, '0')}`;
diff --git a/src/page-modules/contact/validation/commonFieldValidator.ts b/src/page-modules/contact/validation/commonFieldValidator.ts
index 1ba77814..d1166d9d 100644
--- a/src/page-modules/contact/validation/commonFieldValidator.ts
+++ b/src/page-modules/contact/validation/commonFieldValidator.ts
@@ -6,17 +6,18 @@ export const commonFieldValidator = (context: any) => {
   const inputFieldRules = [
     {
       field: 'firstName',
-      validCondition: context.firstName,
+      validCondition: context.firstName || context.isContactInfoOptional,
+
       errorMessage: PageText.Contact.inputFields.firstName.errorMessages.empty,
     },
     {
       field: 'lastName',
-      validCondition: context.lastName,
+      validCondition: context.lastName || context.isContactInfoOptional,
       errorMessage: PageText.Contact.inputFields.lastName.errorMessages.empty,
     },
     {
       field: 'email',
-      validCondition: context.email,
+      validCondition: context.email || context.isContactInfoOptional,
       errorMessage: PageText.Contact.inputFields.email.errorMessages.empty,
     },
     {
@@ -47,6 +48,11 @@ export const commonFieldValidator = (context: any) => {
       errorMessage:
         PageText.Contact.inputFields.bankAccountNumber.errorMessages.empty,
     },
+    {
+      field: 'area',
+      validCondition: context.area,
+      errorMessage: PageText.Contact.inputFields.area.errorMessages.empty,
+    },
     {
       field: 'transportMode',
       validCondition: context.transportMode,
diff --git a/src/pages/contact/means-of-transport/index.tsx b/src/pages/contact/means-of-transport/index.tsx
new file mode 100644
index 00000000..090d84b6
--- /dev/null
+++ b/src/pages/contact/means-of-transport/index.tsx
@@ -0,0 +1,24 @@
+import DefaultLayout from '@atb/layouts/default';
+import { withGlobalData, WithGlobalData } from '@atb/layouts/global-data';
+import {
+  ContactPageLayout,
+  ContactPageLayoutProps,
+  MeansOfTransportContent,
+} from '@atb/page-modules/contact';
+import { NextPage } from 'next';
+
+export type MeansOfTransportPageProps = WithGlobalData<ContactPageLayoutProps>;
+
+const MeansOfTransportPage: NextPage<MeansOfTransportPageProps> = (props) => {
+  return (
+    <DefaultLayout {...props}>
+      <ContactPageLayout {...props}>
+        <MeansOfTransportContent />
+      </ContactPageLayout>
+    </DefaultLayout>
+  );
+};
+
+export default MeansOfTransportPage;
+
+export const getServerSideProps = withGlobalData();
diff --git a/src/translations/pages/contact.ts b/src/translations/pages/contact.ts
index c8f8901f..46358ed4 100644
--- a/src/translations/pages/contact.ts
+++ b/src/translations/pages/contact.ts
@@ -1,4 +1,7 @@
-import { ReasonForTransportFailure } from '@atb/page-modules/contact/machineEvents';
+import {
+  ReasonForTransportFailure,
+  Area,
+} from '@atb/page-modules/contact/machineEvents';
 import { translation as _ } from '@atb/translations/commons';
 
 export const Contact = {
@@ -344,13 +347,142 @@ export const Contact = {
       },
     },
   },
+
   modeOfTransport: {
     title: _(
       'Transportmiddel og stoppested',
       'Means of transport and stopping place',
       'Transportmiddel og stoppested',
     ),
+
+    driver: {
+      description: _(
+        'Tilbakemelding på sjåfør/mannskap',
+        'Feedback on driver/crew',
+        'Tilbakemelding på sjåfør/mannskap',
+      ),
+      info: _(
+        'Har du opplevd uansvarlig kjøring, eller reagert på hvordan mannskapet gjorde jobben sin, kan du gi tilbakemelding her. Har du hatt en ekstra hyggelig opplevelse, vil vi gjerne høre om det også.',
+        'If you have experienced irresponsible driving, or reacted to how the crew did their job, you can give feedback here. If you have had an extra pleasant experience, we would like to hear about it too.',
+        'Har du opplevd uforsvarleg køyring, eller reagert på korleis mannskapet gjorde jobben sin, kan du gi tilbakemelding her. Har du hatt ei ekstra hyggeleg oppleving, vil vi gjerne høyre om det også.',
+      ),
+      about: {
+        title: _('Om reisen', 'About the trip', 'Om reisa'),
+        description: _(
+          'Vi trenger å vite litt om reisen din. Da er det lettere for oss å følge opp saken.',
+          'We need to know a bit about your journey. Then it is easier for us to follow up on the case.',
+          'Vi treng å vite litt om reisa di. Då er det enklare for oss å følgje opp saka.',
+        ),
+      },
+    },
+    transportation: {
+      description: _(
+        'Tilbakemelding på transportmiddel',
+        'Feedback on transport vehicle',
+        'Tilbakemelding på transportmiddel',
+      ),
+      info: _(
+        'Har du opplevd noe som ikke var som det skulle på transportmiddelet, kan du gi tilbakemelding her. Har du hatt en ekstra hyggelig opplevelse, vil vi gjerne høre om det også.',
+        'If you have experienced something that was not as it should be on the means of transport, you can give feedback here. If you have had an extra pleasant experience, we would like to hear about it too.',
+        'Har du opplevd noko som ikkje var som det skulle på transportmiddelet, kan du gi tilbakemelding her. Har du hatt ei ekstra hyggeleg oppleving, vil vi gjerne høyre om det også.',
+      ),
+      about: {
+        title: _('Om reisen', 'About the trip', 'Om reisa'),
+        description: _(
+          'Vi trenger å vite litt om reisen din. Da er det lettere for oss å følge opp saken.',
+          'We need to know a bit about your journey. Then it is easier for us to follow up on the case.',
+          'Vi treng å vite litt om reisa di. Då er det enklare for oss å følgje opp saka.',
+        ),
+      },
+    },
+    delay: {
+      description: _(
+        'Forinkelse, kjørt for tidlig eller innstilt',
+        'Delay, driven too early or cancelled',
+        'Forseinking, køyrd for tidleg eller innstilt',
+      ),
+      info: _(
+        'Hvis transportmiddelet ditt er forsinket, for tidlig ute, ikke stoppet, manglet plass eller hvis du ikke fikk tilstrekkelig informasjon om planlakte avvik, kan du gi tilbakemelding her.',
+        'If your means of transport is delayed, left too early, did not stop, lacked space or if you did not receive sufficient information about planned deviations, you can give feedback here.',
+        'Viss transportmiddelet ditt er forseinka, for tidleg ute, ikkje stoppa, mangla plass eller viss du ikkje fekk tilstrekkeleg informasjon om planlagde avvik, kan du gi tilbakemelding her. ',
+      ),
+      about: {
+        title: _('Om reisen', 'About the trip', 'Om reisa'),
+        description: _(
+          'Vi trenger å vite litt om reisen din. Da er det lettere for oss å følge opp saken.',
+          'We need to know a bit about your journey. Then it is easier for us to follow up on the case.',
+          'Vi treng å vite litt om reisa di. Då er det enklare for oss å følgje opp saka.',
+        ),
+      },
+    },
+    stop: {
+      description: _(
+        'Tilbakemelding på holdeplass/kai',
+        'Feedback on stop/dock',
+        'Tilbakemelding på haldeplass/kai',
+      ),
+      info: _(
+        'Har du opplevd en feil eller manglende stopp? Eksempler kan være skade på leseskur, søppel, feil med sanntidsskilt eller lignende.',
+        'Have you experienced an error or lack of a stop? Examples could be damage to reading sheds, litter, errors with real-time signs, or the like.',
+        'Har du opplevd ein feil eller mangel på stoppestaden? Eksempel kan vere skader på leskur, søppel, feil med sanntidsskilt, eller liknande.',
+      ),
+      about: {
+        title: _(
+          'Om holdeplassen/kaia',
+          'About the stop/dock',
+          'Om haldeplassen/kaia',
+        ),
+        description: _(
+          'Vi trenger å vite litt om reisen din. Da er det lettere for oss å følge opp saken.',
+          'We need to know a bit about your journey. Then it is easier for us to follow up on the case.',
+          'Vi treng å vite litt om reisa di. Då er det enklare for oss å følgje opp saka.',
+        ),
+      },
+    },
+    serviceOffering: {
+      description: _(
+        'Tilbakemelding på rutetilbudet',
+        'Feedback on route offering',
+        'Tilbakemelding på rutetilbodet',
+      ),
+      info: _(
+        'Har du et forslag til ruteendring, eller vil du gi tilbakemelding på tilbudet vårt? Gi oss gjerne tilbakemelding her. Alle oppføringer lagres og systematiseres og inngår i den årlige ruteendringsprosessen. Vi kan ikke gi individuell tilbakemelding på hvilke innspill/forslag som innføres.',
+        'Do you have a suggestion for a route change, or would you like to give feedback on our offer? Feel free to give us feedback here. All entries are stored and systematized and are included in the annual route change process. We cannot give individual feedback on which input/suggestions are introduced.',
+        'Har du eit forslag til ruteendring, eller ønsker du å gi tilbakemelding på tilbodet vårt? Gi oss gjerne tilbakemelding her. Alle innspel blir lagra og systematisert og blir tatt med i den årlege ruteendringsprosessen. Vi kan ikkje gi individuelle tilbakemeldingar på kva innspel/forslag som blir innførte. ',
+      ),
+
+      about: {
+        title: _('Om reisen', 'About the trip', 'Om reisa'),
+        description: _(
+          'Vi trenger å vite litt om reisen din. Da er det lettere for oss å følge opp saken.',
+          'We need to know a bit about your journey. Then it is easier for us to follow up on the case.',
+          'Vi treng å vite litt om reisa di. Då er det enklare for oss å følgje opp saka.',
+        ),
+      },
+    },
+    injury: {
+      description: _(
+        'Melde fra om personskade eller ulykke',
+        'Report of personal injury or accident',
+        'Melde frå om personskade eller ulykke',
+      ),
+      info: _(
+        'Har du skadet deg selv eller noe du eier om bord på et av våre transportmidler eller ved kai/brygge? Gi tilbakemelding her, så tar vi saken videre med det aktuelle busselskapet eller ledergruppen.',
+        'Did you injure yourself or something you own on board one of our means of transport or at a dock? Give feedback here, and we will take the matter further with the relevant bus company or management team.',
+        'Skada du deg sjølv eller noko du eig om bord på eit av våre transportmiddel eller på haldeplass/kai? Gi tilbakemelding her, så tar vi saka vidare med aktuelt busselskap eller reiarlag.',
+      ),
+
+      about: {
+        title: _('Om reisen', 'About the trip', 'Om reisa'),
+        description: _(
+          'Vi trenger å vite litt om reisen din. Da er det lettere for oss å følge opp saken.',
+          'We need to know a bit about your journey. Then it is easier for us to follow up on the case.',
+          'Vi treng å vite litt om reisa di. Då er det enklare for oss å følgje opp saka.',
+        ),
+      },
+    },
   },
+
   ticketsApp: {
     title: _('Billetter og app', 'Tickets and app', 'Billettar og app'),
   },
@@ -366,6 +498,11 @@ export const Contact = {
       'Information about you',
       'Informasjon om deg',
     ),
+    optionalTitle: _(
+      'Informasjon om deg (valgfritt)',
+      'Information about you (optinal)',
+      'Informasjon om deg  (valfritt)',
+    ),
 
     firstname: _(
       'Fornavn og mellomnavn',
@@ -430,6 +567,21 @@ export const Contact = {
 
     email: {
       label: _('E-post', 'Email', 'E-post'),
+      wantsToBeContacted: {
+        label: _(
+          'E-post (må fylles ut hvis du vil ha svar)',
+          'Email (must be entered if you want to receive an answer)',
+          'E-post (må fyllast ut viss du vil ha svar)',
+        ),
+        question: _(
+          'Ønsker du svar på angåande saka?',
+          'Ønsker du svar på angåande saka?',
+          'Ønsker du svar på angåande saka?',
+        ),
+
+        yes: _('Ja', 'Yes', 'Ja'),
+        no: _('Nei', 'No', 'Nei'),
+      },
       errorMessages: {
         empty: _(
           'Vennligst fyll ut informasjon om deg',
@@ -506,14 +658,18 @@ export const Contact = {
     },
 
     transportMode: {
-      label: _('Reisemåte', 'Transport mode', 'Reisemåte'),
+      label: _('Transportmiddel', 'Transport mode', 'Transportmiddel'),
       optionLabel: _(
-        'Velg reisemåte',
+        'Velg transportmiddel',
         'Select transport mode',
-        'Velg reisemåte',
+        'Velg transportmiddel',
       ),
       errorMessages: {
-        empty: _('Velg reisemåte', 'Select transport mode', 'Velg reisemåte'),
+        empty: _(
+          'Velg transportmiddel',
+          'Select transport mode',
+          'Velg transportmiddel',
+        ),
       },
     },
 
@@ -526,7 +682,12 @@ export const Contact = {
     },
 
     fromStop: {
-      label: _('Avreisested', 'Departure location', 'Avreisested'),
+      label: _('Fra holdeplass/kai', 'From stop/harbor', 'Frå haldeplass/kai'),
+      labelWhitoutSpecification: _(
+        'Holdeplass/kai',
+        'Stop/harbor',
+        'Haldeplass/kai',
+      ),
       optionLabel: _(
         'Velg avreisested',
         'Select departure loation',
@@ -542,7 +703,7 @@ export const Contact = {
     },
 
     toStop: {
-      label: _('Ankomststed', 'Arrival location', 'Ankomststed'),
+      label: _('Til holdeplass/kai', 'To stop/harbor', 'Til haldeplass/kai'),
       optionLabel: _(
         'Velg anskomststed',
         'Select arrival location',
@@ -557,7 +718,11 @@ export const Contact = {
       },
     },
     date: _('Dato', 'Date', 'Dato'),
-    plannedDepartureTime: _('Avgangstid', 'Departure time', 'Avgangstid'),
+    plannedDepartureTime: _(
+      'Planlagt avgangstid',
+      'Planned departure time',
+      'Planlagd avgangstid',
+    ),
     reasonForTransportFailure: {
       label: _('Mulige valg', 'Options', 'Moglege val'),
       optionLabel: _('Velg årsak', 'Select reason', 'Vel åtsak'),
@@ -718,6 +883,12 @@ export const Contact = {
         'Ønsker du å fortelje oss noko meir? (valfritt)',
       ),
 
+      description: _(
+        'Unngå å oppgi personlig informasjon som bankkortnummer eller helseopplysninger. Vi vil spørre deg senere om det er nødvendig.',
+        'Avoid providing personal information such as bank card numbers or health information. We will ask you later if it is necessary.',
+        'Unngå å oppgi personopplysningar som bankkortnummer eller helseopplysningar. Vi spør deg seinare viss det er nødvendig.',
+      ),
+
       attachment: _(
         'Last opp vedlegg',
         'Upload attachments',
@@ -731,5 +902,78 @@ export const Contact = {
         ),
       },
     },
+    area: {
+      label: _('Område', 'Area', 'Område'),
+      optionLabel: _('Velg område', 'Select area', 'Vel område'),
+      options: [
+        {
+          id: 'rp1',
+          name: _(
+            'Ålesund, Giske, Sula (RP1)',
+            'Ålesund, Giske, Sula (RP1)',
+            'Ålesund, Giske, Sula (RP1)',
+          ),
+        },
+        {
+          id: 'rp2',
+          name: _(
+            'Kristiansund, Averøy, Aure, Smøla (RP2)',
+            'Kristiansund, Averøy, Aure, Smøla (RP2)',
+            'Kristiansund, Averøy, Aure, Smøla (RP2)',
+          ),
+        },
+        {
+          id: 'rp3',
+          name: _(
+            'Molde (unntatt Skåla), Gjemnes (RP3)',
+            'Molde (except Skåla), Gjemnes (RP3)',
+            'Molde (unntatt Skåla), Gjemnes (RP3)',
+          ),
+        },
+        {
+          id: 'rp4',
+          name: _(
+            'Sunnmøre nord (RP4)',
+            'Sunnmøre nord (RP4)',
+            'Sunnmøre nord (RP4)',
+          ),
+        },
+        {
+          id: 'rp5',
+          name: _(
+            'Sunnmøre sør (RP5)',
+            'Sunnmøre sør (RP5)',
+            'Sunnmøre sør (RP5)',
+          ),
+        },
+        {
+          id: 'rp6',
+          name: _(
+            'Sunndalsøra, Surnadal, Trondheim, Oppdal (RP6)',
+            'Sunndalsøra, Surnadal, Trondheim, Oppdal (RP6)',
+            'Sunndalsøra, Surnadal, Trondheim, Oppdal (RP6)',
+          ),
+        },
+        {
+          id: 'rp7',
+          name: _(
+            'Rauma, Vestnes, Skåla (RP7)',
+            'Rauma, Vestnes, Skåla (RP7)',
+            'Rauma, Vestnes, Skåla (RP7)',
+          ),
+        },
+        {
+          id: 'rp8',
+          name: _(
+            'Hustadvika, Midsund, Aukra (RP8)',
+            'Hustadvika, Midsund, Aukra (RP8)',
+            'Hustadvika, Midsund, Aukra (RP8)',
+          ),
+        },
+      ] as Area[],
+      errorMessages: {
+        empty: _('Område mangler', 'Area is missing', 'Område mangler'),
+      },
+    },
   },
 };