Modify 404 page

src/app/components/pages/Contact.tsx

@@ -64,12 +64,20 @@ const determineUrlQueryPresets = (user?: Immutable<PotentialUser> | null) => {
     }
   };
 
+  const setPageNotFoundPresets = () => {
+    presetSubject = `Page not found "${urlQuery.page ?? ""}"`;
+    presetUrl = `Page link: ${urlQuery.url}`;
+    presetPlaceholder = "Please describe how you reached this page and what you expected to see.";
+  };
+
   if (urlQuery?.preset == "teacherRequest" && user?.loggedIn && !isTeacherOrAbove(user)) {
     setTeacherRequestPresets(user);
   } else if (urlQuery?.preset == "accountDeletion" && user?.loggedIn) {
     setAccountDeletionPresets(user);
   } else if (urlQuery?.preset == "contentProblem") {
     setContentProblemPresets();
+  } else if (urlQuery?.preset == "pageNotFound") {
+    setPageNotFoundPresets();
   }
 
   return [

src/app/components/pages/NotFound.tsx

@@ -5,14 +5,29 @@ import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
 
 export const NotFound = () => {
   const { pathname, state } = useLocation<{ overridePathname?: string }>();
+  const missingPageId = state?.overridePathname || pathname;
+  const contactUrl =
+    `/contact?preset=pageNotFound&page=${encodeURIComponent(missingPageId)}` +
+    `&url=${encodeURIComponent(globalThis.location.href)}`;
   return (
     <Container>
       <div>
-        <TitleAndBreadcrumb breadcrumbTitleOverride="Unknown page" currentPageTitle="Page not found" />
+        <TitleAndBreadcrumb breadcrumbTitleOverride="Unknown page" currentPageTitle="Page not found (404)" />
         <h3 className="my-4">
           <small>
-            {"We're sorry, page not found: "}
-            <code>{(state && state.overridePathname) || pathname}</code>
+            <p>
+              {"Sorry, we couldn't find the page you were looking for: "}
+              <code>{missingPageId}</code>
+            </p>
+            <p>{"If you entered a web address, check it was correct."}</p>
+            <p>{"If you pasted the web address, check you copied the entire address."}</p>
+            <p>
+              {"If the web address is correct or you selected a link or button, please"}{" "}
+              <a href={contactUrl} style={{ textDecoration: "none", color: "#2B77B4" }}>
+                contact us
+              </a>{" "}
+              {"to let us know."}
+            </p>
           </small>
         </h3>
       </div>

src/test/pages/Contact.test.tsx

@@ -213,6 +213,26 @@ describe("Contact form presets", () => {
     );
   });
 
+  it("shows page-not-found subject when pageNotFound preset is provided", async () => {
+    renderContactUs();
+    setLocation("?preset=pageNotFound&page=%2Fmissing-page");
+    const { firstName, subject } = formFields;
+    await waitFor(() => expect(firstName()).not.toHaveValue(""));
+    expect(subject()).toHaveValue('Page not found "/missing-page"');
+  });
+
+  it("includes the page URL in the message if submitting a form with pageNotFound preset", async () => {
+    renderContactUs();
+    setLocation("?preset=pageNotFound&page=%2Fmissing-page&url=https://example.com/missing-page");
+    const { firstName, message } = formFields;
+    await waitFor(() => expect(firstName()).not.toHaveValue(""));
+    await userEvent.type(message(), "Test message");
+    await clickButton("Submit");
+    expect(contactFormSubmitSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ message: expect.stringContaining("https://example.com/missing-page") }),
+    );
+  });
+
   const testFields = ["subject", "message"];
 
   it.each(testFields)("includes a custom %s if provided in the URL", async (field) => {

src/test/pages/NotFound.test.tsx

@@ -0,0 +1,18 @@
+import { screen } from "@testing-library/react";
+import { renderTestEnvironment } from "../utils";
+import { NotFound } from "../../app/components/pages/NotFound";
+
+describe("NotFound page", () => {
+  it("links to contact form using pageNotFound preset and page id", () => {
+    renderTestEnvironment({
+      PageComponent: NotFound,
+      initialRouteEntries: ["/missing-page"],
+    });
+
+    const contactLink = screen.getByRole("link", { name: /contact us/i });
+    expect(contactLink).toHaveAttribute(
+      "href",
+      expect.stringContaining("/contact?preset=pageNotFound&page=%2Fmissing-page&url="),
+    );
+  });
+});