amend

package.json

@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "@faker-js/faker": "^8.1.0",
-    "@marker.io/browser": "^0.19.0",
     "@next/env": "^12.3.2",
     "@react-hook/media-query": "^1.1.1",
     "@sourceflow-uk/job-search": "^2.0",
@@ -35,7 +34,6 @@
     "react-bootstrap": "^2.7.2",
     "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
-    "react-scroll-parallax": "^3.4.2",
     "react-share": "^4.4.1",
     "react-slide-fade-in": "^1.0.9",
     "react-visibility-sensor": "^5.1.1",

src/pages/_app.page.js

@@ -1,10 +1,9 @@
 import "@/scss/styles.scss";
-import { ParallaxProvider } from "react-scroll-parallax";
 import { getGlobal } from "@/getters/getGlobal";
 import { getHeaderMenu } from "@/getters/getHeaderMenu";
 import { getFooterMenu } from "@/getters/getFooterMenu";
 import { Suspense } from "react";
-import { SiteFooter, SiteHeader } from "@/ui";
+import { SiteFooter, SiteHead, SiteHeader } from "@/ui";
 import { getAsset } from "@/getters/getAsset";
 
 export default function App({ Component, pageProps }) {
@@ -37,14 +36,12 @@ export default function App({ Component, pageProps }) {
 
   return (
     <Suspense>
-      <ParallaxProvider>
-        {/*<SiteHead meta={pageProps?.meta} />*/}
-        <SiteHeader {...headerProps} />
-        <main className="flex-grow-1">
-          <Component {...pageProps} />
-        </main>
-        <SiteFooter {...footerProps} />
-      </ParallaxProvider>
+      <SiteHead meta={pageProps?.meta} />
+      <SiteHeader {...headerProps} />
+      <main className="flex-grow-1">
+        <Component {...pageProps} />
+      </main>
+      <SiteFooter {...footerProps} />
     </Suspense>
   );
 }

src/pages/contact-us/__components/ContactPageContent/index.jsx

@@ -29,10 +29,7 @@ export default function ContactPageContent({ className }) {
               icon={<Location width={22} height={30} />}
               value={<a href={getRoute("branches")}>Branch finder</a>}
             />
-            <Detail
-              icon={<Contact width={22} height={22} />}
-              value={<a href="#getInTouch">Send us a message (below)</a>}
-            />
+            <Detail icon={<Contact width={22} height={22} />} value={<a href="#form">Send us a message (below)</a>} />
           </Col>
           <Col xs={12} md={4}>
             <SocialLinks />

src/pages/contact-us/__components/ContactPageForm/index.jsx

@@ -0,0 +1,29 @@
+import PropTypes from "prop-types";
+import clsx from "classnames";
+import { Container } from "react-bootstrap";
+import { Form, Title } from "@/ui";
+import { getGlobal } from "@/getters/getGlobal";
+
+export default function ContactPageForm({ className, title }) {
+  const global = getGlobal();
+
+  return (
+    <>
+      <a id="form" />
+      <div className={clsx(className)}>
+        <Container>
+          <Title title={title} />
+          <Form formId={global["_theme.contact.form.id"]} />
+        </Container>
+      </div>
+    </>
+  );
+}
+
+ContactPageForm.defaultProps = {
+  className: "py-5",
+};
+
+ContactPageForm.propTypes = {
+  className: PropTypes.string,
+};

src/pages/contact-us/__components/index.jsx

@@ -1,3 +1,4 @@
 import { lazy } from "react";
 
 export const ContactPageContent = lazy(() => import("./ContactPageContent"));
+export const ContactPageForm = lazy(() => import("./ContactPageForm"));

src/pages/contact-us/index.page.js

@@ -35,9 +35,16 @@ export async function getStaticProps() {
             },
           },
         },
+        { component: "ContactPageContent" },
         {
-          component: "ContactPageContent",
-          props: {},
+          component: "ContactPageForm",
+          props: {
+            className: "bg-light py-5",
+            title: {
+              path: "page.contact.component.ContactPageForm.title",
+              placeholder: "Send us a message",
+            },
+          },
         },
       ],
     },

src/ui/Detail/index.jsx

@@ -24,8 +24,8 @@ Detail.defaultProps = {
 
 Detail.propTypes = {
   className: PropTypes.string,
-  value: PropTypes.string,
-  icon: PropTypes.string,
+  value: PropTypes.any,
+  icon: PropTypes.any,
   label: PropTypes.string,
   hideLabel: PropTypes.bool,
 };

src/ui/Form/index.jsx

@@ -0,0 +1,33 @@
+import SourceFlowForm from "@sourceflow-uk/sourceflowform";
+import SourceFlowApplicationForm from "@sourceflow-uk/sourceflowapplicationform";
+import { Helmet } from "react-helmet";
+import classes from "./styles.module.scss";
+import clsx from "classnames";
+
+/**
+ *
+ * @param id
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function Form({ className, formId = null, jobId = null, onSubmitDone = () => {} }) {
+  if (formId === null && jobId == null) {
+    return null;
+  }
+
+  // noinspection JSUnresolvedLibraryURL
+  return (
+    <>
+      <Helmet>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
+      </Helmet>
+      <div className={clsx(className, classes.form)}>
+        {jobId ? (
+          <SourceFlowApplicationForm jobId={jobId} onSubmitDone={onSubmitDone} />
+        ) : (
+          <SourceFlowForm formId={formId} onSubmitDone={onSubmitDone} />
+        )}
+      </div>
+    </>
+  );
+}

src/ui/Form/styles.module.scss

@@ -0,0 +1,4 @@
+@import "src/scss/module";
+
+.form {
+}

src/ui/SiteHead/index.jsx

@@ -1,9 +1,7 @@
 import SourceFlowHead from "@sourceflow-uk/sourceflow-head";
-// import metaObject from "../../.sourceflow/metadata.json";
+import metaObject from "../../../.sourceflow/metadata.json";
 
 export default function SiteHead({ meta }) {
-  let metaObject = {}; // TODO remove
-
   return (
     <SourceFlowHead metaObject={metaObject} addTracker={true} cookieExpiryTime={3000}>
       {meta?.title && <title>{meta.title}</title>}

src/ui/index.jsx

@@ -14,6 +14,7 @@ export const Detail = lazy(() => import("./Detail"));
 export const DynamicHtml = lazy(() => import("./DynamicHtml"));
 export const DynamicText = lazy(() => import("./DynamicText"));
 export const FeaturedEmployerCard = lazy(() => import("./FeaturedEmployerCard"));
+export const Form = lazy(() => import("./Form"));
 export const HeroButton = lazy(() => import("./HeroButton"));
 export const HeroCarouselCard = lazy(() => import("./HeroCarouselCard"));
 export const JobCard = lazy(() => import("./JobCard"));