feat(contact): integrate contact with payload form builder

2025-02-05 16:24:08 +07:00 · 2025-02-05 16:24:08 +07:00 · 518aff8c5c
commit 518aff8c5c
parent 20ec5e90b1
52 changed files with 3451 additions and 87 deletions
--- a/1
+++ b/1
@ -13,3 +13,4 @@ S3_ACCESS_KEY_ID=97394cd503ae9973efa25168ed980e51
 S3_SECRET_ACCESS_KEY=9b4e412850582aab32ffdadbe23bb7ea972b39aaf79c34da0c19d3fcafe11dd0
 S3_REGION=ap-southeast-1
 S3_ENDPOINT=https://jswmbraeandqttpcdfmj.supabase.co/storage/v1/s3
+NEXT_PUBLIC_PAYLOAD_URL=http://localhost:3000
--- a/package-lock.json
+++ b/package-lock.json
@ -11,6 +11,7 @@
        "@payloadcms/db-postgres": "^3.20.0",
        "@payloadcms/next": "^3.20.0",
        "@payloadcms/payload-cloud": "^3.20.0",
+        "@payloadcms/plugin-form-builder": "^3.20.0",
        "@payloadcms/richtext-lexical": "^3.20.0",
        "@payloadcms/storage-s3": "^3.20.0",
        "@popperjs/core": "2.11.8",
@ -25,6 +26,7 @@
        "photoswipe": "^5.4.4",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
+        "react-hook-form": "^7.54.2",
        "react-modal-video": "^2.0.2",
        "react-photoswipe-gallery": "^3.0.1",
        "rellax": "^1.12.1",
@ -3369,6 +3371,21 @@
        "payload": "3.20.0"
      }
    },
+    "node_modules/@payloadcms/plugin-form-builder": {
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/@payloadcms/plugin-form-builder/-/plugin-form-builder-3.20.0.tgz",
+      "integrity": "sha512-te29bejvFeH2xw4HtE9JA5DDZycKPuLZOPTGnoShwj+DeqZn5k3SfzewLam1fxPqxHHJhNzTO273lkPsCSxlPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@payloadcms/ui": "3.20.0",
+        "escape-html": "^1.0.3"
+      },
+      "peerDependencies": {
+        "payload": "3.20.0",
+        "react": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020",
+        "react-dom": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020"
+      }
+    },
    "node_modules/@payloadcms/richtext-lexical": {
      "version": "3.20.0",
      "resolved": "https://registry.npmjs.org/@payloadcms/richtext-lexical/-/richtext-lexical-3.20.0.tgz",
@ -10532,6 +10549,22 @@
        "react": ">=16.13.1"
      }
    },
+    "node_modules/react-hook-form": {
+      "version": "7.54.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
+      "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
    "node_modules/react-image-crop": {
      "version": "10.1.8",
      "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz",
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "@payloadcms/db-postgres": "^3.20.0",
    "@payloadcms/next": "^3.20.0",
    "@payloadcms/payload-cloud": "^3.20.0",
+    "@payloadcms/plugin-form-builder": "^3.20.0",
    "@payloadcms/richtext-lexical": "^3.20.0",
    "@payloadcms/storage-s3": "^3.20.0",
    "@popperjs/core": "2.11.8",
@ -30,6 +31,7 @@
    "photoswipe": "^5.4.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
    "react-modal-video": "^2.0.2",
    "react-photoswipe-gallery": "^3.0.1",
    "rellax": "^1.12.1",
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@ -2494,9 +2494,9 @@ textarea:-webkit-autofill:focus {
  color: var(--color-dark-mode-gray-1) !important;
 }

-.form-control {
+/* .form-control {
  border-radius: 0;
-}
+} */

 /*
 * Input underline
--- a/src/app/(main)/contact/page.tsx
+++ b/src/app/(main)/contact/page.tsx
@ -1,4 +1,5 @@
 import Contact from "@/components/Contacts/Contact";
+import { fetchForm } from "@/services/payload/form";
 import Image from "next/image";

 export const metadata = {
@ -6,7 +7,9 @@ export const metadata = {
  description: "Contact - Cochise Oncology",
 };

-export default function SlickContactPageDark() {
+export default async function SlickContactPageDark() {
+  const formRes = await fetchForm(1);
+
  return (
    <>
      <section
@ -36,7 +39,7 @@ export default function SlickContactPageDark() {
      </section>

      <section className="page-section scrollSpysection" id="contact">
-        <Contact />
+        <Contact form={formRes} />
      </section>
    </>
  );
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@ -4,13 +4,13 @@ import { useEffect } from "react";
 import { init_wow } from "@/utils/initWow";
 import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
 import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
+import "@/app/globals.css";
 import "swiper/css";
 import "jarallax/dist/jarallax.min.css";
 import "swiper/css/effect-fade";
 import "react-modal-video/css/modal-video.css";
 import "photoswipe/dist/photoswipe.css";
 import "tippy.js/dist/tippy.css";
-
 import "@public/assets/css/styles.css";
 import Image from "next/image";
 import Header from "@/components/Header";
--- a/src/app/(payload)/admin/importMap.js
+++ b/src/app/(payload)/admin/importMap.js
@ -20,6 +20,7 @@ import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93
 import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { default as default_382980007b1adf7b8e8832707f1169fb } from '@/components/Logo/AdminLogo'

 export const importMap = {
@ -45,5 +46,6 @@ export const importMap = {
  "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
  "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
  "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
  "/components/Logo/AdminLogo#default": default_382980007b1adf7b8e8832707f1169fb
 }
--- a/src/blocks/Form.ts
+++ b/src/blocks/Form.ts
@ -0,0 +1,33 @@
+import type { Block } from "payload";
+
+export const FormBlock: Block = {
+  slug: "formBlock",
+  fields: [
+    {
+      name: "form",
+      type: "relationship",
+      relationTo: "forms",
+      required: true,
+    },
+    {
+      name: "enableIntro",
+      type: "checkbox",
+      label: "Enable Intro Content",
+    },
+    {
+      name: "introContent",
+      type: "richText",
+      admin: {
+        condition: (_, { enableIntro }) => Boolean(enableIntro),
+      },
+      label: "Intro Content",
+    },
+  ],
+  graphQL: {
+    singularName: "FormBlock",
+  },
+  labels: {
+    plural: "Form Blocks",
+    singular: "Form Block",
+  },
+};
--- a/src/components/Blocks/Form/Button/index.tsx
+++ b/src/components/Blocks/Form/Button/index.tsx
@ -0,0 +1,54 @@
+import type { ElementType } from "react";
+
+import Link from "next/link";
+import React from "react";
+
+export type Props = {
+  appearance?: "default" | "primary" | "secondary";
+  className?: string;
+  el?: "a" | "button" | "link";
+  form?: string;
+  href?: string;
+  label?: string;
+  newTab?: boolean | null;
+  onClick?: () => void;
+};
+
+export const Button: React.FC<Props> = ({
+  className: classNameFromProps,
+  el = "button",
+  form,
+  href,
+  label,
+  newTab,
+}) => {
+  const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {};
+  const Element: ElementType = el;
+  const className = [classNameFromProps].filter(Boolean).join(" ");
+
+  const elementProps = {
+    ...newTabProps,
+    className,
+    form,
+    href,
+  };
+
+  const content = (
+    <div className="btn btn-mod btn-color btn-large btn-full btn-circle btn-hover-anim">
+      <span>{label}</span>
+    </div>
+  );
+
+  return (
+    <Element {...elementProps}>
+      <React.Fragment>
+        {(el === "link" || el === "a") && (
+          <Link {...newTabProps} href={href || ""}>
+            {content}
+          </Link>
+        )}
+        {el === "button" && content}
+      </React.Fragment>
+    </Element>
+  );
+};
--- a/src/components/Blocks/Form/Checkbox/index.tsx
+++ b/src/components/Blocks/Form/Checkbox/index.tsx
@ -0,0 +1,38 @@
+import type { CheckboxField } from "@payloadcms/plugin-form-builder/types";
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from "react-hook-form";
+
+import React from "react";
+
+import { Error } from "../Error";
+import { Width } from "../Width";
+
+export const Checkbox: React.FC<
+  {
+    errors: Partial<
+      FieldErrorsImpl<{
+        [x: string]: any;
+      }>
+    >;
+    getValues: any;
+    register: UseFormRegister<any & FieldValues>;
+    setValue: any;
+  } & CheckboxField
+> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
+  return (
+    <Width width={width}>
+      <div className="form-group pr-4">
+        <div className="flex">
+          <input
+            className="form-check-input mr-2"
+            type="checkbox"
+            {...register(name, { required: requiredFromProps })}
+          />
+          <label className="form-check-label" htmlFor={name}>
+            {label}
+          </label>
+        </div>
+        {requiredFromProps && errors[name] && <Error />}
+      </div>
+    </Width>
+  );
+};
--- a/src/components/Blocks/Form/Country/index.module.scss
+++ b/src/components/Blocks/Form/Country/index.module.scss
@ -0,0 +1,123 @@
+@use '../shared.scss';
+
+.select {
+  position: relative;
+  margin-bottom: var(--base);
+}
+
+.label {
+  margin-bottom: 10px;
+  display: block;
+}
+
+.reactSelect {
+  display: flex;
+
+  :global {
+    div.rs__control {
+      @include shared.formInput;
+      height: auto;
+    }
+
+    .rs__input-container {
+      color: var(--color-black);
+    }
+
+    .rs__value-container {
+      padding: 0;
+      > * {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    .rs__single-value {
+      color: var(--color-black);
+    }
+
+    .rs__indicators {
+      position: absolute;
+      top: calc(var(--base) * 0.9);
+      right: calc(var(--base) * 0.9);
+      .arrow {
+        transform: rotate(90deg);
+      }
+    }
+
+    .rs__indicator {
+      padding: 0px 4px;
+      cursor: pointer;
+
+      svg path {
+        fill: var(--color-dark-gray);
+      }
+
+      &:hover {
+        svg path {
+          fill: var(--color-dark-gray);
+        }
+      }
+    }
+
+    .rs__indicator-separator {
+      display: none;
+    }
+
+    .rs__menu {
+      color: var(--color-black);
+      background-color: var(--color-white);
+      z-index: 2;
+      border-radius: 0;
+      box-shadow: 0 4px 11px hsl(0deg 0% 0% / 10%);
+    }
+
+    .rs__menu-list {
+      padding: calc(var(--base) / 4) 0;
+    }
+
+    .rs__group-heading {
+      margin-bottom: calc(var(--base) / 2);
+    }
+
+    .rs__option {
+      font-size: 1rem;
+      padding: calc(var(--base) / 2) var(--base);
+
+      &--is-focused {
+        background-color: var(--color-light-gray);
+        color: var(--color-black);
+      }
+
+      &--is-selected {
+        background-color: var(--color-light-gray);
+        color: var(--color-black);
+      }
+    }
+
+    .rs__multi-value {
+      padding: 0;
+      background: var(--color-light-gray);
+    }
+
+    .rs__multi-value__label {
+      max-width: 150px;
+      color: var(--color-black);
+      padding: calc(var(--base) / 8) calc(var(--base) / 4);
+    }
+
+    .rs__multi-value__remove {
+      cursor: pointer;
+
+      &:hover {
+        color: var(--color-black);
+        background: var(--color-light-gray);
+      }
+    }
+
+    .rs__clear-indicator {
+      cursor: pointer;
+    }
+  }
+}
--- a/src/components/Blocks/Form/Country/index.tsx
+++ b/src/components/Blocks/Form/Country/index.tsx
@ -0,0 +1,50 @@
+import type { CountryField } from '@payloadcms/plugin-form-builder/types'
+import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
+
+import React from 'react'
+import { Controller } from 'react-hook-form'
+import ReactSelect from 'react-select'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+import classes from './index.module.scss'
+import { countryOptions } from './options'
+
+export const Country: React.FC<
+  {
+    control: Control<FieldValues, any>
+    errors: Partial<
+      FieldErrorsImpl<{
+        [x: string]: any
+      }>
+    >
+  } & CountryField
+> = ({ name, control, errors, label, required, width }) => {
+  return (
+    <Width width={width}>
+      <div className={classes.select}>
+        <label className={classes.label} htmlFor={name}>
+          {label}
+        </label>
+        <Controller
+          control={control}
+          defaultValue=""
+          name={name}
+          render={({ field: { onChange, value } }) => (
+            <ReactSelect
+              className={classes.reactSelect}
+              classNamePrefix="rs"
+              inputId={name}
+              instanceId={name}
+              onChange={(val) => onChange(val ? val.value : '')}
+              options={countryOptions}
+              value={countryOptions.find((c) => c.value === value)}
+            />
+          )}
+          rules={{ required }}
+        />
+        {required && errors[name] && <Error />}
+      </div>
+    </Width>
+  )
+}
--- a/src/components/Blocks/Form/Country/options.ts
+++ b/src/components/Blocks/Form/Country/options.ts
@ -0,0 +1,982 @@
+export const countryOptions = [
+  {
+    label: 'Afghanistan',
+    value: 'AF',
+  },
+  {
+    label: 'Åland Islands',
+    value: 'AX',
+  },
+  {
+    label: 'Albania',
+    value: 'AL',
+  },
+  {
+    label: 'Algeria',
+    value: 'DZ',
+  },
+  {
+    label: 'American Samoa',
+    value: 'AS',
+  },
+  {
+    label: 'Andorra',
+    value: 'AD',
+  },
+  {
+    label: 'Angola',
+    value: 'AO',
+  },
+  {
+    label: 'Anguilla',
+    value: 'AI',
+  },
+  {
+    label: 'Antarctica',
+    value: 'AQ',
+  },
+  {
+    label: 'Antigua and Barbuda',
+    value: 'AG',
+  },
+  {
+    label: 'Argentina',
+    value: 'AR',
+  },
+  {
+    label: 'Armenia',
+    value: 'AM',
+  },
+  {
+    label: 'Aruba',
+    value: 'AW',
+  },
+  {
+    label: 'Australia',
+    value: 'AU',
+  },
+  {
+    label: 'Austria',
+    value: 'AT',
+  },
+  {
+    label: 'Azerbaijan',
+    value: 'AZ',
+  },
+  {
+    label: 'Bahamas',
+    value: 'BS',
+  },
+  {
+    label: 'Bahrain',
+    value: 'BH',
+  },
+  {
+    label: 'Bangladesh',
+    value: 'BD',
+  },
+  {
+    label: 'Barbados',
+    value: 'BB',
+  },
+  {
+    label: 'Belarus',
+    value: 'BY',
+  },
+  {
+    label: 'Belgium',
+    value: 'BE',
+  },
+  {
+    label: 'Belize',
+    value: 'BZ',
+  },
+  {
+    label: 'Benin',
+    value: 'BJ',
+  },
+  {
+    label: 'Bermuda',
+    value: 'BM',
+  },
+  {
+    label: 'Bhutan',
+    value: 'BT',
+  },
+  {
+    label: 'Bolivia',
+    value: 'BO',
+  },
+  {
+    label: 'Bosnia and Herzegovina',
+    value: 'BA',
+  },
+  {
+    label: 'Botswana',
+    value: 'BW',
+  },
+  {
+    label: 'Bouvet Island',
+    value: 'BV',
+  },
+  {
+    label: 'Brazil',
+    value: 'BR',
+  },
+  {
+    label: 'British Indian Ocean Territory',
+    value: 'IO',
+  },
+  {
+    label: 'Brunei Darussalam',
+    value: 'BN',
+  },
+  {
+    label: 'Bulgaria',
+    value: 'BG',
+  },
+  {
+    label: 'Burkina Faso',
+    value: 'BF',
+  },
+  {
+    label: 'Burundi',
+    value: 'BI',
+  },
+  {
+    label: 'Cambodia',
+    value: 'KH',
+  },
+  {
+    label: 'Cameroon',
+    value: 'CM',
+  },
+  {
+    label: 'Canada',
+    value: 'CA',
+  },
+  {
+    label: 'Cape Verde',
+    value: 'CV',
+  },
+  {
+    label: 'Cayman Islands',
+    value: 'KY',
+  },
+  {
+    label: 'Central African Republic',
+    value: 'CF',
+  },
+  {
+    label: 'Chad',
+    value: 'TD',
+  },
+  {
+    label: 'Chile',
+    value: 'CL',
+  },
+  {
+    label: 'China',
+    value: 'CN',
+  },
+  {
+    label: 'Christmas Island',
+    value: 'CX',
+  },
+  {
+    label: 'Cocos (Keeling) Islands',
+    value: 'CC',
+  },
+  {
+    label: 'Colombia',
+    value: 'CO',
+  },
+  {
+    label: 'Comoros',
+    value: 'KM',
+  },
+  {
+    label: 'Congo',
+    value: 'CG',
+  },
+  {
+    label: 'Congo, The Democratic Republic of the',
+    value: 'CD',
+  },
+  {
+    label: 'Cook Islands',
+    value: 'CK',
+  },
+  {
+    label: 'Costa Rica',
+    value: 'CR',
+  },
+  {
+    label: "Cote D'Ivoire",
+    value: 'CI',
+  },
+  {
+    label: 'Croatia',
+    value: 'HR',
+  },
+  {
+    label: 'Cuba',
+    value: 'CU',
+  },
+  {
+    label: 'Cyprus',
+    value: 'CY',
+  },
+  {
+    label: 'Czech Republic',
+    value: 'CZ',
+  },
+  {
+    label: 'Denmark',
+    value: 'DK',
+  },
+  {
+    label: 'Djibouti',
+    value: 'DJ',
+  },
+  {
+    label: 'Dominica',
+    value: 'DM',
+  },
+  {
+    label: 'Dominican Republic',
+    value: 'DO',
+  },
+  {
+    label: 'Ecuador',
+    value: 'EC',
+  },
+  {
+    label: 'Egypt',
+    value: 'EG',
+  },
+  {
+    label: 'El Salvador',
+    value: 'SV',
+  },
+  {
+    label: 'Equatorial Guinea',
+    value: 'GQ',
+  },
+  {
+    label: 'Eritrea',
+    value: 'ER',
+  },
+  {
+    label: 'Estonia',
+    value: 'EE',
+  },
+  {
+    label: 'Ethiopia',
+    value: 'ET',
+  },
+  {
+    label: 'Falkland Islands (Malvinas)',
+    value: 'FK',
+  },
+  {
+    label: 'Faroe Islands',
+    value: 'FO',
+  },
+  {
+    label: 'Fiji',
+    value: 'FJ',
+  },
+  {
+    label: 'Finland',
+    value: 'FI',
+  },
+  {
+    label: 'France',
+    value: 'FR',
+  },
+  {
+    label: 'French Guiana',
+    value: 'GF',
+  },
+  {
+    label: 'French Polynesia',
+    value: 'PF',
+  },
+  {
+    label: 'French Southern Territories',
+    value: 'TF',
+  },
+  {
+    label: 'Gabon',
+    value: 'GA',
+  },
+  {
+    label: 'Gambia',
+    value: 'GM',
+  },
+  {
+    label: 'Georgia',
+    value: 'GE',
+  },
+  {
+    label: 'Germany',
+    value: 'DE',
+  },
+  {
+    label: 'Ghana',
+    value: 'GH',
+  },
+  {
+    label: 'Gibraltar',
+    value: 'GI',
+  },
+  {
+    label: 'Greece',
+    value: 'GR',
+  },
+  {
+    label: 'Greenland',
+    value: 'GL',
+  },
+  {
+    label: 'Grenada',
+    value: 'GD',
+  },
+  {
+    label: 'Guadeloupe',
+    value: 'GP',
+  },
+  {
+    label: 'Guam',
+    value: 'GU',
+  },
+  {
+    label: 'Guatemala',
+    value: 'GT',
+  },
+  {
+    label: 'Guernsey',
+    value: 'GG',
+  },
+  {
+    label: 'Guinea',
+    value: 'GN',
+  },
+  {
+    label: 'Guinea-Bissau',
+    value: 'GW',
+  },
+  {
+    label: 'Guyana',
+    value: 'GY',
+  },
+  {
+    label: 'Haiti',
+    value: 'HT',
+  },
+  {
+    label: 'Heard Island and Mcdonald Islands',
+    value: 'HM',
+  },
+  {
+    label: 'Holy See (Vatican City State)',
+    value: 'VA',
+  },
+  {
+    label: 'Honduras',
+    value: 'HN',
+  },
+  {
+    label: 'Hong Kong',
+    value: 'HK',
+  },
+  {
+    label: 'Hungary',
+    value: 'HU',
+  },
+  {
+    label: 'Iceland',
+    value: 'IS',
+  },
+  {
+    label: 'India',
+    value: 'IN',
+  },
+  {
+    label: 'Indonesia',
+    value: 'ID',
+  },
+  {
+    label: 'Iran, Islamic Republic Of',
+    value: 'IR',
+  },
+  {
+    label: 'Iraq',
+    value: 'IQ',
+  },
+  {
+    label: 'Ireland',
+    value: 'IE',
+  },
+  {
+    label: 'Isle of Man',
+    value: 'IM',
+  },
+  {
+    label: 'Israel',
+    value: 'IL',
+  },
+  {
+    label: 'Italy',
+    value: 'IT',
+  },
+  {
+    label: 'Jamaica',
+    value: 'JM',
+  },
+  {
+    label: 'Japan',
+    value: 'JP',
+  },
+  {
+    label: 'Jersey',
+    value: 'JE',
+  },
+  {
+    label: 'Jordan',
+    value: 'JO',
+  },
+  {
+    label: 'Kazakhstan',
+    value: 'KZ',
+  },
+  {
+    label: 'Kenya',
+    value: 'KE',
+  },
+  {
+    label: 'Kiribati',
+    value: 'KI',
+  },
+  {
+    label: "Democratic People's Republic of Korea",
+    value: 'KP',
+  },
+  {
+    label: 'Korea, Republic of',
+    value: 'KR',
+  },
+  {
+    label: 'Kosovo',
+    value: 'XK',
+  },
+  {
+    label: 'Kuwait',
+    value: 'KW',
+  },
+  {
+    label: 'Kyrgyzstan',
+    value: 'KG',
+  },
+  {
+    label: "Lao People's Democratic Republic",
+    value: 'LA',
+  },
+  {
+    label: 'Latvia',
+    value: 'LV',
+  },
+  {
+    label: 'Lebanon',
+    value: 'LB',
+  },
+  {
+    label: 'Lesotho',
+    value: 'LS',
+  },
+  {
+    label: 'Liberia',
+    value: 'LR',
+  },
+  {
+    label: 'Libyan Arab Jamahiriya',
+    value: 'LY',
+  },
+  {
+    label: 'Liechtenstein',
+    value: 'LI',
+  },
+  {
+    label: 'Lithuania',
+    value: 'LT',
+  },
+  {
+    label: 'Luxembourg',
+    value: 'LU',
+  },
+  {
+    label: 'Macao',
+    value: 'MO',
+  },
+  {
+    label: 'Macedonia, The Former Yugoslav Republic of',
+    value: 'MK',
+  },
+  {
+    label: 'Madagascar',
+    value: 'MG',
+  },
+  {
+    label: 'Malawi',
+    value: 'MW',
+  },
+  {
+    label: 'Malaysia',
+    value: 'MY',
+  },
+  {
+    label: 'Maldives',
+    value: 'MV',
+  },
+  {
+    label: 'Mali',
+    value: 'ML',
+  },
+  {
+    label: 'Malta',
+    value: 'MT',
+  },
+  {
+    label: 'Marshall Islands',
+    value: 'MH',
+  },
+  {
+    label: 'Martinique',
+    value: 'MQ',
+  },
+  {
+    label: 'Mauritania',
+    value: 'MR',
+  },
+  {
+    label: 'Mauritius',
+    value: 'MU',
+  },
+  {
+    label: 'Mayotte',
+    value: 'YT',
+  },
+  {
+    label: 'Mexico',
+    value: 'MX',
+  },
+  {
+    label: 'Micronesia, Federated States of',
+    value: 'FM',
+  },
+  {
+    label: 'Moldova, Republic of',
+    value: 'MD',
+  },
+  {
+    label: 'Monaco',
+    value: 'MC',
+  },
+  {
+    label: 'Mongolia',
+    value: 'MN',
+  },
+  {
+    label: 'Montenegro',
+    value: 'ME',
+  },
+  {
+    label: 'Montserrat',
+    value: 'MS',
+  },
+  {
+    label: 'Morocco',
+    value: 'MA',
+  },
+  {
+    label: 'Mozambique',
+    value: 'MZ',
+  },
+  {
+    label: 'Myanmar',
+    value: 'MM',
+  },
+  {
+    label: 'Namibia',
+    value: 'NA',
+  },
+  {
+    label: 'Nauru',
+    value: 'NR',
+  },
+  {
+    label: 'Nepal',
+    value: 'NP',
+  },
+  {
+    label: 'Netherlands',
+    value: 'NL',
+  },
+  {
+    label: 'Netherlands Antilles',
+    value: 'AN',
+  },
+  {
+    label: 'New Caledonia',
+    value: 'NC',
+  },
+  {
+    label: 'New Zealand',
+    value: 'NZ',
+  },
+  {
+    label: 'Nicaragua',
+    value: 'NI',
+  },
+  {
+    label: 'Niger',
+    value: 'NE',
+  },
+  {
+    label: 'Nigeria',
+    value: 'NG',
+  },
+  {
+    label: 'Niue',
+    value: 'NU',
+  },
+  {
+    label: 'Norfolk Island',
+    value: 'NF',
+  },
+  {
+    label: 'Northern Mariana Islands',
+    value: 'MP',
+  },
+  {
+    label: 'Norway',
+    value: 'NO',
+  },
+  {
+    label: 'Oman',
+    value: 'OM',
+  },
+  {
+    label: 'Pakistan',
+    value: 'PK',
+  },
+  {
+    label: 'Palau',
+    value: 'PW',
+  },
+  {
+    label: 'Palestinian Territory, Occupied',
+    value: 'PS',
+  },
+  {
+    label: 'Panama',
+    value: 'PA',
+  },
+  {
+    label: 'Papua New Guinea',
+    value: 'PG',
+  },
+  {
+    label: 'Paraguay',
+    value: 'PY',
+  },
+  {
+    label: 'Peru',
+    value: 'PE',
+  },
+  {
+    label: 'Philippines',
+    value: 'PH',
+  },
+  {
+    label: 'Pitcairn',
+    value: 'PN',
+  },
+  {
+    label: 'Poland',
+    value: 'PL',
+  },
+  {
+    label: 'Portugal',
+    value: 'PT',
+  },
+  {
+    label: 'Puerto Rico',
+    value: 'PR',
+  },
+  {
+    label: 'Qatar',
+    value: 'QA',
+  },
+  {
+    label: 'Reunion',
+    value: 'RE',
+  },
+  {
+    label: 'Romania',
+    value: 'RO',
+  },
+  {
+    label: 'Russian Federation',
+    value: 'RU',
+  },
+  {
+    label: 'Rwanda',
+    value: 'RW',
+  },
+  {
+    label: 'Saint Helena',
+    value: 'SH',
+  },
+  {
+    label: 'Saint Kitts and Nevis',
+    value: 'KN',
+  },
+  {
+    label: 'Saint Lucia',
+    value: 'LC',
+  },
+  {
+    label: 'Saint Pierre and Miquelon',
+    value: 'PM',
+  },
+  {
+    label: 'Saint Vincent and the Grenadines',
+    value: 'VC',
+  },
+  {
+    label: 'Samoa',
+    value: 'WS',
+  },
+  {
+    label: 'San Marino',
+    value: 'SM',
+  },
+  {
+    label: 'Sao Tome and Principe',
+    value: 'ST',
+  },
+  {
+    label: 'Saudi Arabia',
+    value: 'SA',
+  },
+  {
+    label: 'Senegal',
+    value: 'SN',
+  },
+  {
+    label: 'Serbia',
+    value: 'RS',
+  },
+  {
+    label: 'Seychelles',
+    value: 'SC',
+  },
+  {
+    label: 'Sierra Leone',
+    value: 'SL',
+  },
+  {
+    label: 'Singapore',
+    value: 'SG',
+  },
+  {
+    label: 'Slovakia',
+    value: 'SK',
+  },
+  {
+    label: 'Slovenia',
+    value: 'SI',
+  },
+  {
+    label: 'Solomon Islands',
+    value: 'SB',
+  },
+  {
+    label: 'Somalia',
+    value: 'SO',
+  },
+  {
+    label: 'South Africa',
+    value: 'ZA',
+  },
+  {
+    label: 'South Georgia and the South Sandwich Islands',
+    value: 'GS',
+  },
+  {
+    label: 'Spain',
+    value: 'ES',
+  },
+  {
+    label: 'Sri Lanka',
+    value: 'LK',
+  },
+  {
+    label: 'Sudan',
+    value: 'SD',
+  },
+  {
+    label: 'Suriname',
+    value: 'SR',
+  },
+  {
+    label: 'Svalbard and Jan Mayen',
+    value: 'SJ',
+  },
+  {
+    label: 'Swaziland',
+    value: 'SZ',
+  },
+  {
+    label: 'Sweden',
+    value: 'SE',
+  },
+  {
+    label: 'Switzerland',
+    value: 'CH',
+  },
+  {
+    label: 'Syrian Arab Republic',
+    value: 'SY',
+  },
+  {
+    label: 'Taiwan',
+    value: 'TW',
+  },
+  {
+    label: 'Tajikistan',
+    value: 'TJ',
+  },
+  {
+    label: 'Tanzania, United Republic of',
+    value: 'TZ',
+  },
+  {
+    label: 'Thailand',
+    value: 'TH',
+  },
+  {
+    label: 'Timor-Leste',
+    value: 'TL',
+  },
+  {
+    label: 'Togo',
+    value: 'TG',
+  },
+  {
+    label: 'Tokelau',
+    value: 'TK',
+  },
+  {
+    label: 'Tonga',
+    value: 'TO',
+  },
+  {
+    label: 'Trinidad and Tobago',
+    value: 'TT',
+  },
+  {
+    label: 'Tunisia',
+    value: 'TN',
+  },
+  {
+    label: 'Turkey',
+    value: 'TR',
+  },
+  {
+    label: 'Turkmenistan',
+    value: 'TM',
+  },
+  {
+    label: 'Turks and Caicos Islands',
+    value: 'TC',
+  },
+  {
+    label: 'Tuvalu',
+    value: 'TV',
+  },
+  {
+    label: 'Uganda',
+    value: 'UG',
+  },
+  {
+    label: 'Ukraine',
+    value: 'UA',
+  },
+  {
+    label: 'United Arab Emirates',
+    value: 'AE',
+  },
+  {
+    label: 'United Kingdom',
+    value: 'GB',
+  },
+  {
+    label: 'United States',
+    value: 'US',
+  },
+  {
+    label: 'United States Minor Outlying Islands',
+    value: 'UM',
+  },
+  {
+    label: 'Uruguay',
+    value: 'UY',
+  },
+  {
+    label: 'Uzbekistan',
+    value: 'UZ',
+  },
+  {
+    label: 'Vanuatu',
+    value: 'VU',
+  },
+  {
+    label: 'Venezuela',
+    value: 'VE',
+  },
+  {
+    label: 'Viet Nam',
+    value: 'VN',
+  },
+  {
+    label: 'Virgin Islands, British',
+    value: 'VG',
+  },
+  {
+    label: 'Virgin Islands, U.S.',
+    value: 'VI',
+  },
+  {
+    label: 'Wallis and Futuna',
+    value: 'WF',
+  },
+  {
+    label: 'Western Sahara',
+    value: 'EH',
+  },
+  {
+    label: 'Yemen',
+    value: 'YE',
+  },
+  {
+    label: 'Zambia',
+    value: 'ZM',
+  },
+  {
+    label: 'Zimbabwe',
+    value: 'ZW',
+  },
+]
--- a/src/components/Blocks/Form/Email/index.tsx
+++ b/src/components/Blocks/Form/Email/index.tsx
@ -0,0 +1,33 @@
+import type { EmailField } from "@payloadcms/plugin-form-builder/types";
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from "react-hook-form";
+
+import React from "react";
+
+import { Error } from "../Error";
+import { Width } from "../Width";
+
+export const Email: React.FC<
+  {
+    errors: Partial<
+      FieldErrorsImpl<{
+        [x: string]: any;
+      }>
+    >;
+    register: UseFormRegister<any & FieldValues>;
+  } & EmailField
+> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
+  return (
+    <Width width={width}>
+      <div className="form-group pr-4">
+        <label htmlFor={name}>{label}</label>
+        <input
+          type="email"
+          id={name}
+          className="input-lg input-circle form-control"
+          {...register(name, { pattern: /^\S[^\s@]*@\S+$/, required: requiredFromProps })}
+        />
+        {requiredFromProps && errors[name] && <Error />}
+      </div>
+    </Width>
+  );
+};
--- a/src/components/Blocks/Form/Error/index.module.scss
+++ b/src/components/Blocks/Form/Error/index.module.scss
@ -0,0 +1,4 @@
+.error {
+  margin-top: 5px;
+  color: var(--color-red);
+}
--- a/src/components/Blocks/Form/Error/index.tsx
+++ b/src/components/Blocks/Form/Error/index.tsx
@ -0,0 +1,5 @@
+import * as React from "react";
+
+export const Error: React.FC = () => {
+  return <div className="text-danger">This field is required</div>;
+};
--- a/src/components/Blocks/Form/Gutter/index.module.scss
+++ b/src/components/Blocks/Form/Gutter/index.module.scss
@ -0,0 +1,7 @@
+.gutterLeft {
+  padding-left: var(--gutter-h);
+}
+
+.gutterRight {
+  padding-right: var(--gutter-h);
+}
--- a/src/components/Blocks/Form/Gutter/index.tsx
+++ b/src/components/Blocks/Form/Gutter/index.tsx
@ -0,0 +1,26 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+type Props = {
+  children: React.ReactNode
+  className?: string
+  left?: boolean
+  ref?: React.Ref<HTMLDivElement>
+  right?: boolean
+}
+
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
+  const { children, className, left = true, right = true, ref } = props
+
+  return (
+    <div
+      className={[left && classes.gutterLeft, right && classes.gutterRight, className]
+        .filter(Boolean)
+        .join(' ')}
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+}
--- a/src/components/Blocks/Form/Link/index.tsx
+++ b/src/components/Blocks/Form/Link/index.tsx
@ -0,0 +1,72 @@
+import Link from "next/link";
+import React from "react";
+
+// @ts-ignore
+import type { Page } from "@/payload-types";
+
+import { Button } from "../Button";
+
+export type CMSLinkType = {
+  appearance?: "default" | "primary" | "secondary";
+  children?: React.ReactNode;
+  className?: string;
+  label?: string;
+  newTab?: boolean | null;
+  reference?: {
+    relationTo: "pages";
+    value: number | Page | string;
+  } | null;
+  type?: "custom" | "reference" | null;
+  url?: null | string;
+};
+
+export const CMSLink: React.FC<CMSLinkType> = ({
+  type,
+  appearance,
+  children,
+  className,
+  label,
+  newTab,
+  reference,
+  url,
+}) => {
+  const href =
+    type === "reference" && typeof reference?.value === "object" && reference.value.slug
+      ? `${reference?.relationTo !== "pages" ? `/${reference?.relationTo}` : ""}/${reference.value.slug}`
+      : url;
+
+  if (!href) {
+    return null;
+  }
+
+  if (!appearance) {
+    const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {};
+
+    if (type === "custom") {
+      return (
+        <a href={url || ""} {...newTabProps} className={className}>
+          {label && label}
+          {children ? <>{children}</> : null}
+        </a>
+      );
+    }
+
+    if (href) {
+      return (
+        <Link href={href} {...newTabProps} className={className} prefetch={false}>
+          {label && label}
+          {children ? <>{children}</> : null}
+        </Link>
+      );
+    }
+  }
+
+  const buttonProps = {
+    appearance,
+    href,
+    label,
+    newTab,
+  };
+
+  return <Button className={className} {...buttonProps} el="link" />;
+};
--- a/src/components/Blocks/Form/Message/index.module.scss
+++ b/src/components/Blocks/Form/Message/index.module.scss
@ -0,0 +1,9 @@
+@use "../../css/queries.scss" as *;
+
+.message {
+  margin: var(--base) 0 var(--base) 0;
+
+  @include mid-break {
+    margin: calc(var(--base) * 0.5) 0 calc(var(--base) * 0.5) 0;
+  }
+}
--- a/src/components/Blocks/Form/Message/index.tsx
+++ b/src/components/Blocks/Form/Message/index.tsx
@ -0,0 +1,15 @@
+import type { MessageField } from "@payloadcms/plugin-form-builder/types";
+
+import React from "react";
+
+import RichText from "../RichText";
+import { Width } from "../Width";
+import classes from "./index.module.scss";
+
+export const Message: React.FC<MessageField> = ({ message }) => {
+  return (
+    <Width width={100}>
+      <RichText className={classes.message} content={message} />
+    </Width>
+  );
+};
--- a/src/components/Blocks/Form/Number/index.module.scss
+++ b/src/components/Blocks/Form/Number/index.module.scss
@ -0,0 +1,15 @@
+@use '../shared.scss';
+
+.wrap {
+  position: relative;
+  margin-bottom: var(--base);
+}
+
+.input {
+  @include shared.formInput;
+}
+
+.label {
+  margin-bottom: 10px;
+  display: block;
+}
--- a/src/components/Blocks/Form/Number/index.tsx
+++ b/src/components/Blocks/Form/Number/index.tsx
@ -0,0 +1,31 @@
+import type { TextField } from "@payloadcms/plugin-form-builder/types";
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from "react-hook-form";
+
+import React from "react";
+
+import { Error } from "../Error";
+import { Width } from "../Width";
+import classes from "./index.module.scss";
+
+export const Number: React.FC<
+  {
+    errors: Partial<
+      FieldErrorsImpl<{
+        [x: string]: any;
+      }>
+    >;
+    register: UseFormRegister<any & FieldValues>;
+  } & TextField
+> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
+  return (
+    <Width width={width}>
+      <div className={classes.wrap}>
+        <label className={classes.label} htmlFor={name}>
+          {label}
+        </label>
+        <input className={classes.input} id={name} type="number" {...register(name, { required: requiredFromProps })} />
+        {requiredFromProps && errors[name] && <Error />}
+      </div>
+    </Width>
+  );
+};
--- a/src/components/Blocks/Form/RichText/index.tsx
+++ b/src/components/Blocks/Form/RichText/index.tsx
@ -0,0 +1,24 @@
+import React from 'react'
+
+import { serializeLexical } from './serialize'
+
+const RichText: React.FC<{ className?: string; content: any; enableGutter?: boolean }> = ({
+  className,
+  content,
+}) => {
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div className={[className].filter(Boolean).join(' ')}>
+      {content &&
+        !Array.isArray(content) &&
+        typeof content === 'object' &&
+        'root' in content &&
+        serializeLexical({ nodes: content?.root?.children })}
+    </div>
+  )
+}
+
+export default RichText
--- a/src/components/Blocks/Form/RichText/nodeFormat.tsx
+++ b/src/components/Blocks/Form/RichText/nodeFormat.tsx
@ -0,0 +1,126 @@
+// @ts-nocheck
+//This copy-and-pasted from lexical here here: https://github.com/facebook/lexical/blob/c2ceee223f46543d12c574e62155e619f9a18a5d/packages/lexical/src/LexicalConstants.ts
+
+import type { ElementFormatType, TextFormatType } from '@payloadcms/richtext-lexical/lexical'
+import type { TextDetailType, TextModeType } from 'lexical/nodes/LexicalTextNode'
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// DOM
+export const DOM_ELEMENT_TYPE = 1
+export const DOM_TEXT_TYPE = 3
+
+// Reconciling
+export const NO_DIRTY_NODES = 0
+export const HAS_DIRTY_NODES = 1
+export const FULL_RECONCILE = 2
+
+// Text node modes
+export const IS_NORMAL = 0
+export const IS_TOKEN = 1
+export const IS_SEGMENTED = 2
+// IS_INERT = 3
+
+// Text node formatting
+export const IS_BOLD = 1
+export const IS_ITALIC = 1 << 1
+export const IS_STRIKETHROUGH = 1 << 2
+export const IS_UNDERLINE = 1 << 3
+export const IS_CODE = 1 << 4
+export const IS_SUBSCRIPT = 1 << 5
+export const IS_SUPERSCRIPT = 1 << 6
+export const IS_HIGHLIGHT = 1 << 7
+
+export const IS_ALL_FORMATTING =
+  IS_BOLD |
+  IS_ITALIC |
+  IS_STRIKETHROUGH |
+  IS_UNDERLINE |
+  IS_CODE |
+  IS_SUBSCRIPT |
+  IS_SUPERSCRIPT |
+  IS_HIGHLIGHT
+
+// Text node details
+export const IS_DIRECTIONLESS = 1
+export const IS_UNMERGEABLE = 1 << 1
+
+// Element node formatting
+export const IS_ALIGN_LEFT = 1
+export const IS_ALIGN_CENTER = 2
+export const IS_ALIGN_RIGHT = 3
+export const IS_ALIGN_JUSTIFY = 4
+export const IS_ALIGN_START = 5
+export const IS_ALIGN_END = 6
+
+// Reconciliation
+export const NON_BREAKING_SPACE = '\u00A0'
+const ZERO_WIDTH_SPACE = '\u200b'
+
+export const DOUBLE_LINE_BREAK = '\n\n'
+
+// For FF, we need to use a non-breaking space, or it gets composition
+// in a stuck state.
+
+const RTL = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC'
+const LTR =
+  'A-Za-z\u00C0-\u00D6\u00D8-\u00F6' +
+  '\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C' +
+  '\uFE00-\uFE6F\uFEFD-\uFFFF'
+
+// eslint-disable-next-line
+export const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']')
+// eslint-disable-next-line
+export const LTR_REGEX = new RegExp('^[^' + RTL + ']*[' + LTR + ']')
+
+export const TEXT_TYPE_TO_FORMAT: Record<string | TextFormatType, number> = {
+  bold: IS_BOLD,
+  code: IS_CODE,
+  highlight: IS_HIGHLIGHT,
+  italic: IS_ITALIC,
+  strikethrough: IS_STRIKETHROUGH,
+  subscript: IS_SUBSCRIPT,
+  superscript: IS_SUPERSCRIPT,
+  underline: IS_UNDERLINE,
+}
+
+export const DETAIL_TYPE_TO_DETAIL: Record<string | TextDetailType, number> = {
+  directionless: IS_DIRECTIONLESS,
+  unmergeable: IS_UNMERGEABLE,
+}
+
+export const ELEMENT_TYPE_TO_FORMAT: Record<Exclude<ElementFormatType, ''>, number> = {
+  center: IS_ALIGN_CENTER,
+  end: IS_ALIGN_END,
+  justify: IS_ALIGN_JUSTIFY,
+  left: IS_ALIGN_LEFT,
+  right: IS_ALIGN_RIGHT,
+  start: IS_ALIGN_START,
+}
+
+export const ELEMENT_FORMAT_TO_TYPE: Record<number, ElementFormatType> = {
+  [IS_ALIGN_CENTER]: 'center',
+  [IS_ALIGN_END]: 'end',
+  [IS_ALIGN_JUSTIFY]: 'justify',
+  [IS_ALIGN_LEFT]: 'left',
+  [IS_ALIGN_RIGHT]: 'right',
+  [IS_ALIGN_START]: 'start',
+}
+
+export const TEXT_MODE_TO_TYPE: Record<TextModeType, 0 | 1 | 2> = {
+  normal: IS_NORMAL,
+  segmented: IS_SEGMENTED,
+  token: IS_TOKEN,
+}
+
+export const TEXT_TYPE_TO_MODE: Record<number, TextModeType> = {
+  [IS_NORMAL]: 'normal',
+  [IS_SEGMENTED]: 'segmented',
+  [IS_TOKEN]: 'token',
+}
--- a/src/components/Blocks/Form/RichText/serialize.tsx
+++ b/src/components/Blocks/Form/RichText/serialize.tsx
@ -0,0 +1,174 @@
+// @ts-nocheck
+import type { LinkFields, SerializedLinkNode } from "@payloadcms/richtext-lexical";
+import type {
+  SerializedElementNode,
+  SerializedLexicalNode,
+  SerializedTextNode,
+} from "@payloadcms/richtext-lexical/lexical";
+import type { SerializedListItemNode, SerializedListNode } from "@payloadcms/richtext-lexical/lexical/list";
+import type { SerializedHeadingNode } from "@payloadcms/richtext-lexical/lexical/rich-text";
+import type { JSX } from "react";
+
+import React, { Fragment } from "react";
+
+import { CMSLink } from "../Link";
+import {
+  IS_BOLD,
+  IS_CODE,
+  IS_ITALIC,
+  IS_STRIKETHROUGH,
+  IS_SUBSCRIPT,
+  IS_SUPERSCRIPT,
+  IS_UNDERLINE,
+} from "./nodeFormat";
+
+interface Props {
+  nodes: SerializedLexicalNode[];
+}
+
+export function serializeLexical({ nodes }: Props): JSX.Element {
+  return (
+    <Fragment>
+      {nodes?.map((_node, index): JSX.Element | null => {
+        if (_node.type === "text") {
+          const node = _node as SerializedTextNode;
+          let text = <React.Fragment key={index}>{node.text}</React.Fragment>;
+          if (node.format & IS_BOLD) {
+            text = <strong key={index}>{text}</strong>;
+          }
+          if (node.format & IS_ITALIC) {
+            text = <em key={index}>{text}</em>;
+          }
+          if (node.format & IS_STRIKETHROUGH) {
+            text = (
+              <span key={index} style={{ textDecoration: "line-through" }}>
+                {text}
+              </span>
+            );
+          }
+          if (node.format & IS_UNDERLINE) {
+            text = (
+              <span key={index} style={{ textDecoration: "underline" }}>
+                {text}
+              </span>
+            );
+          }
+          if (node.format & IS_CODE) {
+            text = <code key={index}>{node.text}</code>;
+          }
+          if (node.format & IS_SUBSCRIPT) {
+            text = <sub key={index}>{text}</sub>;
+          }
+          if (node.format & IS_SUPERSCRIPT) {
+            text = <sup key={index}>{text}</sup>;
+          }
+
+          return text;
+        }
+
+        if (_node == null) {
+          return null;
+        }
+
+        // NOTE: Hacky fix for
+        // https://github.com/facebook/lexical/blob/d10c4e6e55261b2fdd7d1845aed46151d0f06a8c/packages/lexical-list/src/LexicalListItemNode.ts#L133
+        // which does not return checked: false (only true - i.e. there is no prop for false)
+        const serializedChildrenFn = (node: SerializedElementNode): JSX.Element | null => {
+          if (node.children == null) {
+            return null;
+          } else {
+            if (node?.type === "list" && (node as SerializedListNode)?.listType === "check") {
+              for (const item of node.children) {
+                if ("checked" in item) {
+                  if (!item?.checked) {
+                    item.checked = false;
+                  }
+                }
+              }
+              return serializeLexical({ nodes: node.children });
+            } else {
+              return serializeLexical({ nodes: node.children });
+            }
+          }
+        };
+
+        const serializedChildren = "children" in _node ? serializedChildrenFn(_node as SerializedElementNode) : "";
+
+        switch (_node.type) {
+          case "heading": {
+            const node = _node as SerializedHeadingNode;
+
+            type Heading = Extract<keyof JSX.IntrinsicElements, "h1" | "h2" | "h3" | "h4" | "h5">;
+            const Tag = node?.tag as Heading;
+            return <Tag key={index}>{serializedChildren}</Tag>;
+          }
+          case "linebreak": {
+            return <br key={index} />;
+          }
+          case "link": {
+            const node = _node as SerializedLinkNode;
+
+            const fields: LinkFields = node.fields;
+
+            return (
+              <CMSLink
+                key={index}
+                newTab={Boolean(fields?.newTab)}
+                reference={fields.doc as any}
+                type={fields.linkType === "internal" ? "reference" : "custom"}
+                url={fields.url}
+              >
+                {serializedChildren}
+              </CMSLink>
+            );
+          }
+          case "list": {
+            const node = _node as SerializedListNode;
+
+            type List = Extract<keyof JSX.IntrinsicElements, "ol" | "ul">;
+            const Tag = node?.tag as List;
+            return (
+              <Tag className="list" key={index}>
+                {serializedChildren}
+              </Tag>
+            );
+          }
+          case "listitem": {
+            const node = _node as SerializedListItemNode;
+
+            if (node?.checked != null) {
+              return (
+                <li
+                  aria-checked={node.checked ? "true" : "false"}
+                  className={` ${node.checked ? "" : ""}`}
+                  key={index}
+                  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+                  role="checkbox"
+                  tabIndex={-1}
+                  value={node?.value}
+                >
+                  {serializedChildren}
+                </li>
+              );
+            } else {
+              return (
+                <li key={index} value={node?.value}>
+                  {serializedChildren}
+                </li>
+              );
+            }
+          }
+          case "paragraph": {
+            return <p key={index}>{serializedChildren}</p>;
+          }
+          case "quote": {
+            return <blockquote key={index}>{serializedChildren}</blockquote>;
+          }
+
+          default:
+            return null;
+        }
+      })}
+    </Fragment>
+  );
+}
--- a/src/components/Blocks/Form/Select/index.tsx
+++ b/src/components/Blocks/Form/Select/index.tsx
@ -0,0 +1,45 @@
+import type { SelectField } from "@payloadcms/plugin-form-builder/types";
+import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";
+
+import React from "react";
+import { Controller } from "react-hook-form";
+import ReactSelect from "react-select";
+
+import { Error } from "../Error";
+import { Width } from "../Width";
+
+export const Select: React.FC<
+  {
+    control: Control<FieldValues, any>;
+    errors: Partial<
+      FieldErrorsImpl<{
+        [x: string]: any;
+      }>
+    >;
+  } & SelectField
+> = ({ name, control, errors, label, options, required, width }) => {
+  return (
+    <Width width={width}>
+      <div className="form-group pr-4">
+        <label htmlFor={name}>{label}</label>
+        <Controller
+          control={control}
+          defaultValue=""
+          name={name}
+          render={({ field: { onChange, value } }) => (
+            <ReactSelect
+              classNamePrefix="rs"
+              inputId={name}
+              instanceId={name}
+              onChange={(val) => onChange(val ? val.value : "")}
+              options={options}
+              value={options.find((s) => s.value === value)}
+            />
+          )}
+          rules={{ required }}
+        />
+        {required && errors[name] && <Error />}
+      </div>
+    </Width>
+  );
+};
--- a/src/components/Blocks/Form/State/index.module.scss
+++ b/src/components/Blocks/Form/State/index.module.scss
@ -0,0 +1,123 @@
+@use '../shared.scss';
+
+.select {
+  position: relative;
+  margin-bottom: var(--base);
+}
+
+.label {
+  margin-bottom: 10px;
+  display: block;
+}
+
+.reactSelect {
+  display: flex;
+
+  :global {
+    div.rs__control {
+      @include shared.formInput;
+      height: auto;
+    }
+
+    .rs__input-container {
+      color: var(--color-black);
+    }
+
+    .rs__value-container {
+      padding: 0;
+      > * {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    .rs__single-value {
+      color: var(--color-black);
+    }
+
+    .rs__indicators {
+      position: absolute;
+      top: calc(var(--base) * 0.9);
+      right: calc(var(--base) * 0.9);
+      .arrow {
+        transform: rotate(90deg);
+      }
+    }
+
+    .rs__indicator {
+      padding: 0px 4px;
+      cursor: pointer;
+
+      svg path {
+        fill: var(--color-dark-gray);
+      }
+
+      &:hover {
+        svg path {
+          fill: var(--color-dark-gray);
+        }
+      }
+    }
+
+    .rs__indicator-separator {
+      display: none;
+    }
+
+    .rs__menu {
+      color: var(--color-black);
+      background-color: var(--color-white);
+      z-index: 2;
+      border-radius: 0;
+      box-shadow: 0 4px 11px hsl(0deg 0% 0% / 10%);
+    }
+
+    .rs__menu-list {
+      padding: calc(var(--base) / 4) 0;
+    }
+
+    .rs__group-heading {
+      margin-bottom: calc(var(--base) / 2);
+    }
+
+    .rs__option {
+      font-size: 1rem;
+      padding: calc(var(--base) / 2) var(--base);
+
+      &--is-focused {
+        background-color: var(--color-light-gray);
+        color: var(--color-black);
+      }
+
+      &--is-selected {
+        background-color: var(--color-light-gray);
+        color: var(--color-black);
+      }
+    }
+
+    .rs__multi-value {
+      padding: 0;
+      background: var(--color-light-gray);
+    }
+
+    .rs__multi-value__label {
+      max-width: 150px;
+      color: var(--color-black);
+      padding: calc(var(--base) / 8) calc(var(--base) / 4);
+    }
+
+    .rs__multi-value__remove {
+      cursor: pointer;
+
+      &:hover {
+        color: var(--color-black);
+        background: var(--color-light-gray);
+      }
+    }
+
+    .rs__clear-indicator {
+      cursor: pointer;
+    }
+  }
+}
--- a/src/components/Blocks/Form/State/index.tsx
+++ b/src/components/Blocks/Form/State/index.tsx
@ -0,0 +1,50 @@
+import type { StateField } from '@payloadcms/plugin-form-builder/types'
+import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
+
+import React from 'react'
+import { Controller } from 'react-hook-form'
+import ReactSelect from 'react-select'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+import classes from './index.module.scss'
+import { stateOptions } from './options'
+
+export const State: React.FC<
+  {
+    control: Control<FieldValues, any>
+    errors: Partial<
+      FieldErrorsImpl<{
+        [x: string]: any
+      }>
+    >
+  } & StateField
+> = ({ name, control, errors, label, required, width }) => {
+  return (
+    <Width width={width}>
+      <div className={classes.select}>
+        <label className={classes.label} htmlFor={name}>
+          {label}
+        </label>
+        <Controller
+          control={control}
+          defaultValue=""
+          name={name}
+          render={({ field: { onChange, value } }) => (
+            <ReactSelect
+              className={classes.reactSelect}
+              classNamePrefix="rs"
+              id={name}
+              instanceId={name}
+              onChange={(val) => onChange(val ? val.value : '')}
+              options={stateOptions}
+              value={stateOptions.find((t) => t.value === value)}
+            />
+          )}
+          rules={{ required }}
+        />
+        {required && errors[name] && <Error />}
+      </div>
+    </Width>
+  )
+}
--- a/src/components/Blocks/Form/State/options.ts
+++ b/src/components/Blocks/Form/State/options.ts
@ -0,0 +1,52 @@
+export const stateOptions = [
+  { label: 'Alabama', value: 'AL' },
+  { label: 'Alaska', value: 'AK' },
+  { label: 'Arizona', value: 'AZ' },
+  { label: 'Arkansas', value: 'AR' },
+  { label: 'California', value: 'CA' },
+  { label: 'Colorado', value: 'CO' },
+  { label: 'Connecticut', value: 'CT' },
+  { label: 'Delaware', value: 'DE' },
+  { label: 'Florida', value: 'FL' },
+  { label: 'Georgia', value: 'GA' },
+  { label: 'Hawaii', value: 'HI' },
+  { label: 'Idaho', value: 'ID' },
+  { label: 'Illinois', value: 'IL' },
+  { label: 'Indiana', value: 'IN' },
+  { label: 'Iowa', value: 'IA' },
+  { label: 'Kansas', value: 'KS' },
+  { label: 'Kentucky', value: 'KY' },
+  { label: 'Louisiana', value: 'LA' },
+  { label: 'Maine', value: 'ME' },
+  { label: 'Maryland', value: 'MD' },
+  { label: 'Massachusetts', value: 'MA' },
+  { label: 'Michigan', value: 'MI' },
+  { label: 'Minnesota', value: 'MN' },
+  { label: 'Mississippi', value: 'MS' },
+  { label: 'Missouri', value: 'MO' },
+  { label: 'Montana', value: 'MT' },
+  { label: 'Nebraska', value: 'NE' },
+  { label: 'Nevada', value: 'NV' },
+  { label: 'New Hampshire', value: 'NH' },
+  { label: 'New Jersey', value: 'NJ' },
+  { label: 'New Mexico', value: 'NM' },
+  { label: 'New York', value: 'NY' },
+  { label: 'North Carolina', value: 'NC' },
+  { label: 'North Dakota', value: 'ND' },
+  { label: 'Ohio', value: 'OH' },
+  { label: 'Oklahoma', value: 'OK' },
+  { label: 'Oregon', value: 'OR' },
+  { label: 'Pennsylvania', value: 'PA' },
+  { label: 'Rhode Island', value: 'RI' },
+  { label: 'South Carolina', value: 'SC' },
+  { label: 'South Dakota', value: 'SD' },
+  { label: 'Tennessee', value: 'TN' },
+  { label: 'Texas', value: 'TX' },
+  { label: 'Utah', value: 'UT' },
+  { label: 'Vermont', value: 'VT' },
+  { label: 'Virginia', value: 'VA' },
+  { label: 'Washington', value: 'WA' },
+  { label: 'West Virginia', value: 'WV' },
+  { label: 'Wisconsin', value: 'WI' },
+  { label: 'Wyoming', value: 'WY' },
+]
--- a/src/components/Blocks/Form/Text/index.tsx
+++ b/src/components/Blocks/Form/Text/index.tsx
@ -0,0 +1,33 @@
+import type { TextField } from "@payloadcms/plugin-form-builder/types";
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from "react-hook-form";
+
+import React from "react";
+
+import { Error } from "../Error";
+import { Width } from "../Width";
+
+export const Text: React.FC<
+  {
+    errors: Partial<
+      FieldErrorsImpl<{
+        [x: string]: any;
+      }>
+    >;
+    register: UseFormRegister<any & FieldValues>;
+  } & TextField
+> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
+  return (
+    <Width width={width}>
+      <div className="form-group pr-4">
+        <label htmlFor={name}>{label}</label>
+        <input
+          type="text"
+          id={name}
+          className="input-lg input-circle form-control"
+          {...register(name, { required: requiredFromProps })}
+        />
+        {requiredFromProps && errors[name] && <Error />}
+      </div>
+    </Width>
+  );
+};
--- a/src/components/Blocks/Form/Textarea/index.tsx
+++ b/src/components/Blocks/Form/Textarea/index.tsx
@ -0,0 +1,34 @@
+import type { TextField } from "@payloadcms/plugin-form-builder/types";
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from "react-hook-form";
+
+import React from "react";
+
+import { Error } from "../Error";
+import { Width } from "../Width";
+
+export const Textarea: React.FC<
+  {
+    errors: Partial<
+      FieldErrorsImpl<{
+        [x: string]: any;
+      }>
+    >;
+    register: UseFormRegister<any & FieldValues>;
+    rows?: number;
+  } & TextField
+> = ({ name, errors, label, register, required: requiredFromProps, rows = 3, width }) => {
+  return (
+    <Width width={width}>
+      <div className="form-group pr-4">
+        <label htmlFor={name}>{label}</label>
+        <textarea
+          className="input-lg input-circle form-control"
+          id={name}
+          rows={rows}
+          {...register(name, { required: requiredFromProps })}
+        />
+        {requiredFromProps && errors[name] && <Error />}
+      </div>
+    </Width>
+  );
+};
--- a/src/components/Blocks/Form/VerticalPadding/index.module.scss
+++ b/src/components/Blocks/Form/VerticalPadding/index.module.scss
@ -0,0 +1,23 @@
+.top-large {
+  padding-top: var(--block-padding);
+}
+
+.top-medium {
+  padding-top: calc(var(--block-padding) / 2);
+}
+
+.top-small {
+  padding-top: calc(var(--block-padding) / 3);
+}
+
+.bottom-large {
+  padding-bottom: var(--block-padding);
+}
+
+.bottom-medium {
+  padding-bottom: calc(var(--block-padding) / 2);
+}
+
+.bottom-small {
+  padding-bottom: calc(var(--block-padding) / 3);
+}
--- a/src/components/Blocks/Form/VerticalPadding/index.tsx
+++ b/src/components/Blocks/Form/VerticalPadding/index.tsx
@ -0,0 +1,29 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+export type VerticalPaddingOptions = 'large' | 'medium' | 'none' | 'small'
+
+type Props = {
+  bottom?: VerticalPaddingOptions
+  children: React.ReactNode
+  className?: string
+  top?: VerticalPaddingOptions
+}
+
+export const VerticalPadding: React.FC<Props> = ({
+  bottom = 'medium',
+  children,
+  className,
+  top = 'medium',
+}) => {
+  return (
+    <div
+      className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  )
+}
--- a/src/components/Blocks/Form/Width/index.module.scss
+++ b/src/components/Blocks/Form/Width/index.module.scss
@ -0,0 +1,10 @@
+@use "../../css/queries.scss" as *;
+
+.width {
+  padding-left: calc(var(--base) * 0.5);
+  padding-right: calc(var(--base) * 0.5);
+
+  @include mid-break {
+    width: 100% !important;
+  }
+}
--- a/src/components/Blocks/Form/Width/index.tsx
+++ b/src/components/Blocks/Form/Width/index.tsx
@ -0,0 +1,14 @@
+import * as React from 'react'
+
+import classes from './index.module.scss'
+
+export const Width: React.FC<{
+  children: React.ReactNode
+  width?: number
+}> = ({ children, width }) => {
+  return (
+    <div className={classes.width} style={{ width: width ? `${width}%` : undefined }}>
+      {children}
+    </div>
+  )
+}
--- a/src/components/Blocks/Form/buildInitialFormState.tsx
+++ b/src/components/Blocks/Form/buildInitialFormState.tsx
@ -0,0 +1,43 @@
+// @ts-nocheck
+import type { FormFieldBlock } from "@payloadcms/plugin-form-builder/types";
+
+export const buildInitialFormState = (fields: FormFieldBlock[]) => {
+  return fields.reduce((initialSchema, field) => {
+    if (field.blockType === "checkbox") {
+      return {
+        ...initialSchema,
+        [field.name]: false,
+      };
+    }
+    if (field.blockType === "country") {
+      return {
+        ...initialSchema,
+        [field.name]: "",
+      };
+    }
+    if (field.blockType === "email") {
+      return {
+        ...initialSchema,
+        [field.name]: "",
+      };
+    }
+    if (field.blockType === "text") {
+      return {
+        ...initialSchema,
+        [field.name]: "",
+      };
+    }
+    if (field.blockType === "select") {
+      return {
+        ...initialSchema,
+        [field.name]: "",
+      };
+    }
+    if (field.blockType === "state") {
+      return {
+        ...initialSchema,
+        [field.name]: "",
+      };
+    }
+  }, {});
+};
--- a/src/components/Blocks/Form/fields.tsx
+++ b/src/components/Blocks/Form/fields.tsx
@ -0,0 +1,21 @@
+import { Checkbox } from './Checkbox'
+import { Country } from './Country'
+import { Email } from './Email'
+import { Message } from './Message'
+import { Number } from './Number'
+import { Select } from './Select'
+import { State } from './State'
+import { Text } from './Text'
+import { Textarea } from './Textarea'
+
+export const fields = {
+  checkbox: Checkbox,
+  country: Country,
+  email: Email,
+  message: Message,
+  number: Number,
+  select: Select,
+  state: State,
+  text: Text,
+  textarea: Textarea,
+}
--- a/src/components/Blocks/Form/index.module.scss
+++ b/src/components/Blocks/Form/index.module.scss
@ -0,0 +1,69 @@
+@use "../css/queries.scss" as *;
+
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.hasSubmitted {
+  align-items: center;
+  justify-content: center;
+  height: 80vh;
+
+  @include small-break {
+    height: 100%;
+  }
+}
+
+.intro {
+  margin-bottom: var(--base);
+
+  @include mid-break {
+    margin-bottom: var(--base);
+  }
+}
+
+.confirmationMessage {
+  max-width: 800px;
+  text-align: center;
+
+  * {
+    margin: 0;
+  }
+}
+
+.fieldWrap {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(var(--base) * -0.5);
+  margin-right: calc(var(--base) * -0.5);
+  width: calc(100% + #{var(--base)});
+
+  > * {
+    width: 100%;
+  }
+}
+
+.Select {
+  & label {
+    position: absolute;
+    top: calc(var(--base) * -0.5);
+  }
+}
+
+.sidebarContent {
+  @include mid-break {
+    display: none;
+  }
+}
+
+.mobileSidebar {
+  display: none;
+
+  @include mid-break {
+    display: block;
+    margin-bottom: calc(var(--base) * 2);
+  }
+}
--- a/src/components/Blocks/Form/index.tsx
+++ b/src/components/Blocks/Form/index.tsx
@ -0,0 +1,169 @@
+// @ts-nocheck
+"use client";
+
+import type { Form as FormType } from "@payloadcms/plugin-form-builder/types";
+
+import { useRouter } from "next/navigation";
+import React, { useCallback, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import { Form } from "@/payload-types";
+import { Button } from "./Button";
+import RichText from "./RichText";
+import { buildInitialFormState } from "./buildInitialFormState";
+import { fields } from "./fields";
+
+export type Value = unknown;
+
+export interface Property {
+  [key: string]: Value;
+}
+
+export interface Data {
+  [key: string]: Property | Property[] | Value;
+}
+
+export type FormBlockType = {
+  blockName?: string;
+  blockType?: "formBlock";
+  enableIntro: boolean;
+  form: FormType | Form;
+  introContent?: {
+    [k: string]: unknown;
+  }[];
+};
+
+export const FormBlock: React.FC<
+  FormBlockType & {
+    id?: string;
+  }
+> = (props) => {
+  const {
+    enableIntro,
+    form: formFromProps,
+    form: { id: formID, confirmationMessage, confirmationType, redirect, submitButtonLabel } = {},
+    introContent,
+  } = props;
+
+  const formMethods = useForm({
+    defaultValues: buildInitialFormState(formFromProps.fields),
+  });
+  const {
+    control,
+    formState: { errors },
+    getValues,
+    handleSubmit,
+    register,
+    setValue,
+  } = formMethods;
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasSubmitted, setHasSubmitted] = useState<boolean>();
+  const [error, setError] = useState<{ message: string; status?: string } | undefined>();
+  const router = useRouter();
+
+  const onSubmit = useCallback(
+    (data: Data) => {
+      let loadingTimerID: ReturnType<typeof setTimeout>;
+      const submitForm = async () => {
+        setError(undefined);
+
+        const dataToSend = Object.entries(data).map(([name, value]) => ({
+          field: name,
+          value,
+        }));
+
+        // delay loading indicator by 1s
+        loadingTimerID = setTimeout(() => {
+          setIsLoading(true);
+        }, 1000);
+
+        try {
+          const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, {
+            body: JSON.stringify({
+              form: formID,
+              submissionData: dataToSend,
+            }),
+            headers: {
+              "Content-Type": "application/json",
+            },
+            method: "POST",
+          });
+
+          const res = await req.json();
+
+          clearTimeout(loadingTimerID);
+
+          if (req.status >= 400) {
+            setIsLoading(false);
+
+            setError({
+              message: res.errors?.[0]?.message || "Internal Server Error",
+              status: res.status,
+            });
+
+            return;
+          }
+
+          setIsLoading(false);
+          setHasSubmitted(true);
+
+          if (confirmationType === "redirect" && redirect) {
+            const { url } = redirect;
+
+            const redirectUrl = url;
+
+            if (redirectUrl) router.push(redirectUrl);
+          }
+        } catch (err) {
+          console.warn(err);
+          setIsLoading(false);
+          setError({
+            message: "Something went wrong.",
+          });
+        }
+      };
+
+      void submitForm();
+    },
+    [router, formID, redirect, confirmationType]
+  );
+
+  return (
+    <div>
+      <div>
+        {enableIntro && introContent && !hasSubmitted && <RichText content={introContent} />}
+        {!isLoading && hasSubmitted && confirmationType === "message" && <RichText content={confirmationMessage} />}
+        {isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
+        {error && <div className="text-red-500">{`${error.status || "500"}: ${error.message || ""}`}</div>}
+        {!hasSubmitted && (
+          <form id={formID} onSubmit={handleSubmit(onSubmit)}>
+            <div className="form">
+              {formFromProps &&
+                formFromProps.fields &&
+                formFromProps.fields.map((field, index) => {
+                  const Field: React.FC<any> = fields?.[field.blockType];
+                  if (Field) {
+                    return (
+                      <React.Fragment key={index}>
+                        <Field
+                          form={formFromProps}
+                          {...field}
+                          {...formMethods}
+                          control={control}
+                          errors={errors}
+                          register={register}
+                        />
+                      </React.Fragment>
+                    );
+                  }
+                  return null;
+                })}
+            </div>
+            <Button appearance="primary" el="button" form={formID} label={submitButtonLabel} />
+          </form>
+        )}
+      </div>
+    </div>
+  );
+};
--- a/src/components/Blocks/Form/shared.scss
+++ b/src/components/Blocks/Form/shared.scss
@ -0,0 +1,42 @@
+@use "../css/common.scss" as *;
+
+@mixin formInput() {
+  all: unset;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  font-family: var(--font-body);
+  width: 100%;
+  border: 1px solid var(--color-black);
+  background: var(--color-white);
+  color: var(--color-black);
+  font-size: 1rem;
+  height: calc(var(--base) * 2.5);
+  line-height: var(--base);
+  padding: calc(var(--base) * 0.75);
+
+  &::-moz-placeholder,
+  &::-webkit-input-placeholder {
+    color: var(--color-mid-gray);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &:hover {
+    border-color: var(--color-mid-gray);
+  }
+
+  &:focus,
+  &:active {
+    border-color: var(--color-gray);
+    outline: 0;
+  }
+
+  &:disabled {
+    background: var(--color-light-gray);
+    color: var(--color-gray);
+
+    &:hover {
+      border-color: var(--color-light-gray);
+    }
+  }
+}
--- a/src/components/Blocks/css/app.scss
+++ b/src/components/Blocks/css/app.scss
@ -0,0 +1,129 @@
+@use './queries.scss' as *;
+@use './colors.scss' as *;
+@use './type.scss' as *;
+
+:root {
+  --breakpoint-xs-width: #{$breakpoint-xs-width};
+  --breakpoint-s-width: #{$breakpoint-s-width};
+  --breakpoint-m-width: #{$breakpoint-m-width};
+  --breakpoint-l-width: #{$breakpoint-l-width};
+  --scrollbar-width: 17px;
+
+  --base: 24px;
+  --font-body: system-ui;
+  --font-mono: 'Roboto Mono', monospace;
+
+  --gutter-h: 180px;
+  --block-padding: 120px;
+
+  --header-z-index: 100;
+  --modal-z-index: 90;
+
+  @include large-break {
+    --gutter-h: 144px;
+    --block-padding: 96px;
+  }
+
+  @include mid-break {
+    --gutter-h: 24px;
+    --block-padding: 60px;
+  }
+}
+
+/////////////////////////////
+// GLOBAL STYLES
+/////////////////////////////
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @extend %body;
+  background: var(--color-white);
+  -webkit-font-smoothing: antialiased;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  color: var(--color-black);
+  margin: 0;
+}
+
+::selection {
+  background: var(--color-green);
+  color: var(--color-black);
+}
+
+::-moz-selection {
+  background: var(--color-green);
+  color: var(--color-black);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  @extend %h1;
+}
+
+h2 {
+  @extend %h2;
+}
+
+h3 {
+  @extend %h3;
+}
+
+h4 {
+  @extend %h4;
+}
+
+h5 {
+  @extend %h5;
+}
+
+h6 {
+  @extend %h6;
+}
+
+p {
+  margin: var(--base) 0;
+
+  @include mid-break {
+    margin: calc(var(--base) * 0.75) 0;
+  }
+}
+
+ul,
+ol {
+  padding-left: var(--base);
+  margin: 0 0 var(--base);
+}
+
+a {
+  color: currentColor;
+
+  &:focus {
+    opacity: 0.8;
+    outline: none;
+  }
+
+  &:active {
+    opacity: 0.7;
+    outline: none;
+  }
+}
+
+svg {
+  vertical-align: middle;
+}
--- a/src/components/Blocks/css/colors.scss
+++ b/src/components/Blocks/css/colors.scss
@ -0,0 +1,10 @@
+:root {
+  --color-red: rgb(255, 0, 0);
+  --color-green: rgb(178, 255, 214);
+  --color-white: rgb(255, 255, 255);
+  --color-dark-gray: rgb(51, 52, 52);
+  --color-mid-gray: rgb(196, 196, 196);
+  --color-gray: rgb(212, 212, 212);
+  --color-light-gray: rgb(244, 244, 244);
+  --color-black: rgb(0, 0, 0);
+}
--- a/src/components/Blocks/css/common.scss
+++ b/src/components/Blocks/css/common.scss
@ -0,0 +1,2 @@
+@forward './queries.scss';
+@forward './type.scss';
--- a/src/components/Blocks/css/queries.scss
+++ b/src/components/Blocks/css/queries.scss
@ -0,0 +1,32 @@
+$breakpoint-xs-width: 400px;
+$breakpoint-s-width: 768px;
+$breakpoint-m-width: 1024px;
+$breakpoint-l-width: 1440px;
+
+////////////////////////////
+// MEDIA QUERIES
+/////////////////////////////
+
+@mixin extra-small-break {
+  @media (max-width: #{$breakpoint-xs-width}) {
+    @content;
+  }
+}
+
+@mixin small-break {
+  @media (max-width: #{$breakpoint-s-width}) {
+    @content;
+  }
+}
+
+@mixin mid-break {
+  @media (max-width: #{$breakpoint-m-width}) {
+    @content;
+  }
+}
+
+@mixin large-break {
+  @media (max-width: #{$breakpoint-l-width}) {
+    @content;
+  }
+}
--- a/src/components/Blocks/css/type.scss
+++ b/src/components/Blocks/css/type.scss
@ -0,0 +1,167 @@
+@use 'queries' as *;
+
+/////////////////////////////
+// HEADINGS
+/////////////////////////////
+
+%h1,
+%h2,
+%h3,
+%h4,
+%h5,
+%h6 {
+  font-weight: 700;
+}
+
+%h1 {
+  margin: 50px 0;
+  font-size: 84px;
+  line-height: 1;
+
+  @include mid-break {
+    font-size: 70px;
+  }
+
+  @include small-break {
+    margin: 24px 0;
+    font-size: 36px;
+    line-height: 42px;
+  }
+}
+
+%h2 {
+  margin: 32px 0;
+  font-size: 56px;
+  line-height: 1;
+
+  @include mid-break {
+    margin: 36px 0;
+    font-size: 48px;
+  }
+
+  @include small-break {
+    margin: 24px 0;
+    font-size: 28px;
+    line-height: 32px;
+  }
+}
+
+%h3 {
+  margin: 28px 0;
+  font-size: 48px;
+  line-height: 56px;
+
+  @include mid-break {
+    font-size: 40px;
+    line-height: 48px;
+  }
+
+  @include small-break {
+    margin: 24px 0;
+    font-size: 24px;
+    line-height: 30px;
+  }
+}
+
+%h4 {
+  margin: 24px 0;
+  font-size: 40px;
+  line-height: 48px;
+
+  @include mid-break {
+    font-size: 33px;
+    line-height: 36px;
+  }
+
+  @include small-break {
+    margin: 20px 0;
+    font-size: 20px;
+    line-height: 24px;
+  }
+}
+
+%h5 {
+  margin: 20px 0;
+  font-size: 32px;
+  line-height: 42px;
+
+  @include mid-break {
+    font-size: 26px;
+    line-height: 32px;
+  }
+
+  @include small-break {
+    margin: 16px 0;
+    font-size: 18px;
+    line-height: 24px;
+  }
+}
+
+%h6 {
+  margin: 20px 0;
+  font-size: 24px;
+  line-height: 28px;
+
+  @include mid-break {
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  @include small-break {
+    margin: 16px 0;
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+
+/////////////////////////////
+// TYPE STYLES
+/////////////////////////////
+
+%body {
+  font-size: 18px;
+  line-height: 32px;
+
+  @include mid-break {
+    font-size: 15px;
+    line-height: 24px;
+  }
+
+  @include small-break {
+    font-size: 13px;
+    line-height: 24px;
+  }
+}
+
+%large-body {
+  font-size: 25px;
+  line-height: 32px;
+
+  @include mid-break {
+    font-size: 22px;
+    line-height: 30px;
+  }
+
+  @include small-break {
+    font-size: 17px;
+    line-height: 24px;
+  }
+}
+
+%label {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+
+  @include mid-break {
+    font-size: 13px;
+    letter-spacing: 2.75px;
+  }
+
+  @include small-break {
+    font-size: 12px;
+    line-height: 18px;
+    letter-spacing: 2.625px;
+  }
+}
--- a/src/components/Contacts/Contact.tsx
+++ b/src/components/Contacts/Contact.tsx
@ -1,8 +1,15 @@
 "use client";
 import { contactItems } from "@/data/contact";
 import React from "react";
+import { FormBlock } from "../Blocks/Form";
+import { Form as FormType } from "@payloadcms/plugin-form-builder/types";
+import { Form } from "@/payload-types";

-export default function Contact() {
+export interface ContactProps {
+  form?: FormType | Form;
+}
+
+export default function Contact({ form }: ContactProps) {
  return (
    <div className="container position-relative">
      <div className="row">
@ -51,12 +58,12 @@ export default function Contact() {
        <div className="col-lg-8 col-xl-7 offset-xl-1 wow fadeInUp">
          <div className="row g-0">
            {/* Google Map Column */}
-            <div className="col-md-5 d-flex align-items-stretch pt-40 pt-sm-0 pb-40 pb-sm-0 mb-sm-30">
-              <div className="map-boxed-1 d-flex align-items-stretch">
+            <div className="col-12 d-flex align-items-stretch pt-40 pt-sm-0 pb-40 pb-sm-0 mb-sm-30">
+              <div className="map-boxed-1 d-flex align-items-stretch h-[400px]">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3399.869553403109!2d-110.24257920000001!3d31.555194399999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d7292ebdc13925%3A0x43d6cab7d0f93f14!2s5151%20AZ-90%2C%20Sierra%20Vista%2C%20AZ%2085635%2C%20USA!5e0!3m2!1sen!2sid!4v1738604989180!5m2!1sen!2sid"
                  width={600}
-                  height={450}
+                  height={600}
                  style={{ border: 0 }}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
@ -64,86 +71,19 @@ export default function Contact() {
              </div>
            </div>
            {/* End Google Map Column */}
-            {/* Contact Form Column */}
-            <div className="col-md-7">
-              <div className="box-shadow bg-white round p-4 p-sm-5 position-relative z-index-1">
-                <h4 className="h3 mb-40 mb-sm-30">Get in Touch</h4>
-                {/* Contact Form */}
-                <form onSubmit={(e) => e.preventDefault()} className="form contact-form" id="contact_form">
-                  {/* Name */}
-                  <div className="form-group">
-                    <label htmlFor="name" className="visually-hidden">
-                      Name
-                    </label>
-                    <input
-                      type="text"
-                      name="name"
-                      id="name"
-                      className="input-lg input-circle form-control"
-                      placeholder="Name"
-                      pattern=".{3,100}"
-                      required
-                      aria-required="true"
-                    />
-                  </div>
-                  {/* End Name */}
-                  {/* Email */}
-                  <div className="form-group">
-                    <label htmlFor="email" className="visually-hidden">
-                      Email
-                    </label>
-                    <input
-                      type="email"
-                      name="email"
-                      id="email"
-                      className="input-lg input-circle form-control"
-                      placeholder="Email"
-                      pattern=".{5,100}"
-                      required
-                      aria-required="true"
-                    />
-                  </div>
-                  {/* End Email */}
-                  {/* Message */}
-                  <div className="form-group">
-                    <label htmlFor="message" className="visually-hidden">
-                      Message
-                    </label>
-                    <textarea
-                      name="message"
-                      id="message"
-                      className="input-lg input-circle form-control"
-                      style={{ height: 130 }}
-                      placeholder="Message"
-                      defaultValue={""}
-                    />
-                  </div>
-                  {/* Send Button */}
-                  <button
-                    className="submit_btn btn btn-mod btn-color btn-large btn-full btn-circle btn-hover-anim"
-                    id="submit_btn"
-                    aria-controls="result"
-                  >
-                    <span>Send Message</span>
-                  </button>
-                  {/* End Send Button */}
-                  {/* Inform Tip */}
-                  <div className="form-tip w-100 pt-30 mt-sm-20">
-                    <i className="icon-info size-16" />
-                    All the fields are required. By sending the form you agree to the{" "}
-                    <a href="#">Terms &amp; Conditions</a> and <a href="#">Privacy Policy</a>.
-                  </div>
-                  {/* End Inform Tip */}
-                  <div id="result" role="region" aria-live="polite" aria-atomic="true" />
-                </form>
-                {/* End Contact Form */}
-              </div>
-            </div>
-            {/* End Contact Form Column */}
          </div>
        </div>
        {/* End Right Column */}
      </div>
+
+      {!!form && (
+        <div className="box-shadow bg-white round p-4 p-sm-5 position-relative z-index-1">
+          <h4 className="h3 mb-40 mb-sm-30">{form?.title ?? ""}</h4>
+          <div>
+            <FormBlock enableIntro={true} form={form} />
+          </div>
+        </div>
+      )}
    </div>
  );
 }
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@ -14,6 +14,9 @@ export interface Config {
    users: User;
    media: Media;
    blogs: Blog;
+    interests: Interest;
+    forms: Form;
+    'form-submissions': FormSubmission;
    'payload-locked-documents': PayloadLockedDocument;
    'payload-preferences': PayloadPreference;
    'payload-migrations': PayloadMigration;
@ -23,6 +26,9 @@ export interface Config {
    users: UsersSelect<false> | UsersSelect<true>;
    media: MediaSelect<false> | MediaSelect<true>;
    blogs: BlogsSelect<false> | BlogsSelect<true>;
+    interests: InterestsSelect<false> | InterestsSelect<true>;
+    forms: FormsSelect<false> | FormsSelect<true>;
+    'form-submissions': FormSubmissionsSelect<false> | FormSubmissionsSelect<true>;
    'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
    'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
    'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
@ -30,8 +36,12 @@ export interface Config {
  db: {
    defaultIDType: number;
  };
-  globals: {};
-  globalsSelect: {};
+  globals: {
+    'consultation-datetime': ConsultationDatetime;
+  };
+  globalsSelect: {
+    'consultation-datetime': ConsultationDatetimeSelect<false> | ConsultationDatetimeSelect<true>;
+  };
  locale: null;
  user: User & {
    collection: 'users';
@ -123,6 +133,188 @@ export interface Blog {
  updatedAt: string;
  createdAt: string;
 }
+/**
+ * This is the procedure interests that can be selected when request a consultation
+ *
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "interests".
+ */
+export interface Interest {
+  id: number;
+  interest: string;
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "forms".
+ */
+export interface Form {
+  id: number;
+  title: string;
+  fields?:
+    | (
+        | {
+            name: string;
+            label?: string | null;
+            width?: number | null;
+            required?: boolean | null;
+            defaultValue?: boolean | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'checkbox';
+          }
+        | {
+            name: string;
+            label?: string | null;
+            width?: number | null;
+            required?: boolean | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'country';
+          }
+        | {
+            name: string;
+            label?: string | null;
+            width?: number | null;
+            required?: boolean | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'email';
+          }
+        | {
+            name: string;
+            label?: string | null;
+            width?: number | null;
+            defaultValue?: number | null;
+            required?: boolean | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'number';
+          }
+        | {
+            name: string;
+            label?: string | null;
+            width?: number | null;
+            defaultValue?: string | null;
+            options?:
+              | {
+                  label: string;
+                  value: string;
+                  id?: string | null;
+                }[]
+              | null;
+            required?: boolean | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'select';
+          }
+        | {
+            name: string;
+            label?: string | null;
+            width?: number | null;
+            required?: boolean | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'state';
+          }
+        | {
+            name: string;
+            label?: string | null;
+            width?: number | null;
+            defaultValue?: string | null;
+            required?: boolean | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'text';
+          }
+        | {
+            name: string;
+            label?: string | null;
+            width?: number | null;
+            defaultValue?: string | null;
+            required?: boolean | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'textarea';
+          }
+      )[]
+    | null;
+  submitButtonLabel?: string | null;
+  /**
+   * Choose whether to display an on-page message or redirect to a different page after they submit the form.
+   */
+  confirmationType?: ('message' | 'redirect') | null;
+  confirmationMessage?: {
+    root: {
+      type: string;
+      children: {
+        type: string;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  } | null;
+  redirect?: {
+    url: string;
+  };
+  /**
+   * Send custom emails when the form submits. Use comma separated lists to send the same email to multiple recipients. To reference a value from this form, wrap that field's name with double curly brackets, i.e. {{firstName}}. You can use a wildcard {{*}} to output all data and {{*:table}} to format it as an HTML table in the email.
+   */
+  emails?:
+    | {
+        emailTo?: string | null;
+        cc?: string | null;
+        bcc?: string | null;
+        replyTo?: string | null;
+        emailFrom?: string | null;
+        subject: string;
+        /**
+         * Enter the message that should be sent in this email.
+         */
+        message?: {
+          root: {
+            type: string;
+            children: {
+              type: string;
+              version: number;
+              [k: string]: unknown;
+            }[];
+            direction: ('ltr' | 'rtl') | null;
+            format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+            indent: number;
+            version: number;
+          };
+          [k: string]: unknown;
+        } | null;
+        id?: string | null;
+      }[]
+    | null;
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "form-submissions".
+ */
+export interface FormSubmission {
+  id: number;
+  form: number | Form;
+  submissionData?:
+    | {
+        field: string;
+        value: string;
+        id?: string | null;
+      }[]
+    | null;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "payload-locked-documents".
@ -141,6 +333,18 @@ export interface PayloadLockedDocument {
    | ({
        relationTo: 'blogs';
        value: number | Blog;
+      } | null)
+    | ({
+        relationTo: 'interests';
+        value: number | Interest;
+      } | null)
+    | ({
+        relationTo: 'forms';
+        value: number | Form;
+      } | null)
+    | ({
+        relationTo: 'form-submissions';
+        value: number | FormSubmission;
      } | null);
  globalSlug?: string | null;
  user: {
@ -230,6 +434,156 @@ export interface BlogsSelect<T extends boolean = true> {
  updatedAt?: T;
  createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "interests_select".
+ */
+export interface InterestsSelect<T extends boolean = true> {
+  interest?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "forms_select".
+ */
+export interface FormsSelect<T extends boolean = true> {
+  title?: T;
+  fields?:
+    | T
+    | {
+        checkbox?:
+          | T
+          | {
+              name?: T;
+              label?: T;
+              width?: T;
+              required?: T;
+              defaultValue?: T;
+              id?: T;
+              blockName?: T;
+            };
+        country?:
+          | T
+          | {
+              name?: T;
+              label?: T;
+              width?: T;
+              required?: T;
+              id?: T;
+              blockName?: T;
+            };
+        email?:
+          | T
+          | {
+              name?: T;
+              label?: T;
+              width?: T;
+              required?: T;
+              id?: T;
+              blockName?: T;
+            };
+        number?:
+          | T
+          | {
+              name?: T;
+              label?: T;
+              width?: T;
+              defaultValue?: T;
+              required?: T;
+              id?: T;
+              blockName?: T;
+            };
+        select?:
+          | T
+          | {
+              name?: T;
+              label?: T;
+              width?: T;
+              defaultValue?: T;
+              options?:
+                | T
+                | {
+                    label?: T;
+                    value?: T;
+                    id?: T;
+                  };
+              required?: T;
+              id?: T;
+              blockName?: T;
+            };
+        state?:
+          | T
+          | {
+              name?: T;
+              label?: T;
+              width?: T;
+              required?: T;
+              id?: T;
+              blockName?: T;
+            };
+        text?:
+          | T
+          | {
+              name?: T;
+              label?: T;
+              width?: T;
+              defaultValue?: T;
+              required?: T;
+              id?: T;
+              blockName?: T;
+            };
+        textarea?:
+          | T
+          | {
+              name?: T;
+              label?: T;
+              width?: T;
+              defaultValue?: T;
+              required?: T;
+              id?: T;
+              blockName?: T;
+            };
+      };
+  submitButtonLabel?: T;
+  confirmationType?: T;
+  confirmationMessage?: T;
+  redirect?:
+    | T
+    | {
+        url?: T;
+      };
+  emails?:
+    | T
+    | {
+        emailTo?: T;
+        cc?: T;
+        bcc?: T;
+        replyTo?: T;
+        emailFrom?: T;
+        subject?: T;
+        message?: T;
+        id?: T;
+      };
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "form-submissions_select".
+ */
+export interface FormSubmissionsSelect<T extends boolean = true> {
+  form?: T;
+  submissionData?:
+    | T
+    | {
+        field?: T;
+        value?: T;
+        id?: T;
+      };
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "payload-locked-documents_select".
@ -262,6 +616,60 @@ export interface PayloadMigrationsSelect<T extends boolean = true> {
  updatedAt?: T;
  createdAt?: T;
 }
+/**
+ * Date and time available for consultation
+ *
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "consultation-datetime".
+ */
+export interface ConsultationDatetime {
+  id: number;
+  day?: {
+    monday?: boolean | null;
+    tuesday?: boolean | null;
+    wednesday?: boolean | null;
+    thursday?: boolean | null;
+    friday?: boolean | null;
+    saturday?: boolean | null;
+  };
+  time?:
+    | {
+        name: string;
+        start: string;
+        end: string;
+        id?: string | null;
+      }[]
+    | null;
+  updatedAt?: string | null;
+  createdAt?: string | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "consultation-datetime_select".
+ */
+export interface ConsultationDatetimeSelect<T extends boolean = true> {
+  day?:
+    | T
+    | {
+        monday?: T;
+        tuesday?: T;
+        wednesday?: T;
+        thursday?: T;
+        friday?: T;
+        saturday?: T;
+      };
+  time?:
+    | T
+    | {
+        name?: T;
+        start?: T;
+        end?: T;
+        id?: T;
+      };
+  updatedAt?: T;
+  createdAt?: T;
+  globalType?: T;
+}
 /**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "auth".
--- a/src/payload.config.ts
+++ b/src/payload.config.ts
@ -2,6 +2,7 @@
 import { postgresAdapter } from "@payloadcms/db-postgres";
 import { payloadCloudPlugin } from "@payloadcms/payload-cloud";
 import { s3Storage } from "@payloadcms/storage-s3";
+import { formBuilderPlugin } from "@payloadcms/plugin-form-builder";
 import path from "path";
 import { buildConfig } from "payload";
 import sharp from "sharp";
@ -12,6 +13,15 @@ import { Media } from "@/collections/Media";
 import { Users } from "@/collections/Users";
 import { Interests } from "@/collections/consultations/Interests";
 import { ConsultationDateTime } from "@/collections/consultations/consultation-datetime";
+import {
+  BoldFeature,
+  FixedToolbarFeature,
+  HeadingFeature,
+  InlineToolbarFeature,
+  ItalicFeature,
+  lexicalEditor,
+  LinkFeature,
+} from "@payloadcms/richtext-lexical";

 const filename = fileURLToPath(import.meta.url);
 const dirname = path.dirname(filename);
@ -48,6 +58,18 @@ export default buildConfig({
      connectionString: process.env.DATABASE_URI || "",
    },
  }),
+  editor: lexicalEditor({
+    features: () => {
+      return [
+        BoldFeature(),
+        ItalicFeature(),
+        LinkFeature({ enabledCollections: ["blogs"] }),
+        HeadingFeature({ enabledHeadingSizes: ["h1", "h2", "h3"] }),
+        FixedToolbarFeature(),
+        InlineToolbarFeature(),
+      ];
+    },
+  }),
  sharp,
  plugins: [
    payloadCloudPlugin(),
@ -69,5 +91,23 @@ export default buildConfig({
        endpoint: process.env.S3_ENDPOINT,
      },
    }),
+    // form builder
+    formBuilderPlugin({
+      fields: {
+        text: true,
+        textarea: true,
+        select: true,
+        email: true,
+        state: true,
+        country: true,
+        checkbox: true,
+        number: true,
+        message: false,
+        payment: false,
+      },
+      formOverrides: {
+        fields: undefined,
+      },
+    }),
  ],
 });
--- a/src/services/payload/form.ts
+++ b/src/services/payload/form.ts
@ -0,0 +1,12 @@
+import payloadConfig from "@/payload.config";
+import { getPayload } from "payload";
+
+export async function fetchForm(formID: number) {
+  const payload = await getPayload({ config: payloadConfig });
+  const formRes = await payload.findByID({
+    collection: "forms",
+    id: formID,
+  });
+
+  return formRes;
+}
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
--- a/src/utils/toKebabCase.ts
+++ b/src/utils/toKebabCase.ts
@ -0,0 +1,5 @@
+export const toKebabCase = (string) =>
+  string
+    ?.replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/\s+/g, '-')
+    .toLowerCase()