diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
new file mode 100644
index 000000000..823520a35
--- /dev/null
+++ b/web/src/elements/forms/Form.ts
@@ -0,0 +1,58 @@
+import "@polymer/paper-input/paper-input";
+import "@polymer/iron-form/iron-form";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import { showMessage } from "../../elements/messages/MessageContainer";
+import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
+
+export interface ErrorResponse {
+    [key: string]: string[];
+}
+
+@customElement("ak-form")
+export class Form extends LitElement {
+
+    @property()
+    successMessage = "";
+
+    @property()
+    send!: (data: Record<string, unknown>) => Promise<unknown>;
+
+    submit(ev: Event): void {
+        ev.preventDefault();
+        const ironForm = this.shadowRoot?.querySelector("iron-form");
+        if (!ironForm) {
+            return;
+        }
+        const data = ironForm.serializeForm();
+        this.send(data).then(() => {
+            showMessage({
+                level_tag: "success",
+                message: this.successMessage
+            });
+        }).catch((ex: Response) => {
+            if (ex.status > 399 && ex.status < 500) {
+                return ex.json();
+            }
+            return ex;
+        }).then((errorMessage?: ErrorResponse) => {
+            if (!errorMessage) return;
+            const elements: PaperInputElement[] = ironForm._getSubmittableElements();
+            elements.forEach((element) => {
+                const elementName = element.name;
+                if (!elementName) return;
+                if (elementName in errorMessage) {
+                    element.errorMessage = errorMessage[elementName].join(", ");
+                    element.invalid = true;
+                }
+            });
+        });
+    }
+
+    render(): TemplateResult {
+        return html`<iron-form
+            @iron-form-presubmit=${(ev: Event) => { this.submit(ev); }}>
+            <slot></slot>
+        </iron-form>`;
+    }
+
+}
diff --git a/web/src/pages/users/UserDetailsPage.ts b/web/src/pages/users/UserDetailsPage.ts
index 9ef3fb26c..6547dbccd 100644
--- a/web/src/pages/users/UserDetailsPage.ts
+++ b/web/src/pages/users/UserDetailsPage.ts
@@ -14,61 +14,7 @@ import { FlowURLManager } from "../../api/legacy";
 import "@polymer/paper-input/paper-input";
 import "@polymer/iron-form/iron-form";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
-import { showMessage } from "../../elements/messages/MessageContainer";
-
-export interface ErrorResponse {
-    [key: string]: string[];
-}
-
-@customElement("ak-form")
-export class Form extends LitElement {
-
-    @property()
-    successMessage = "";
-
-    @property()
-    send!: (data: Record<string, unknown>) => Promise<unknown>;
-
-    submit(ev: Event): void {
-        ev.preventDefault();
-        const ironForm = this.shadowRoot?.querySelector("iron-form");
-        if (!ironForm) {
-            return;
-        }
-        const data = ironForm.serializeForm();
-        this.send(data).then(() => {
-            showMessage({
-                level_tag: "success",
-                message: this.successMessage
-            });
-        }).catch((ex: Response) => {
-            if (ex.status > 399 && ex.status < 500) {
-                return ex.json();
-            }
-            return ex;
-        }).then((errorMessage?: ErrorResponse) => {
-            if (!errorMessage) return;
-            const elements: PaperInputElement[] = ironForm._getSubmittableElements();
-            elements.forEach((element) => {
-                const elementName = element.name;
-                if (!elementName) return;
-                if (elementName in errorMessage) {
-                    element.errorMessage = errorMessage[elementName].join(", ");
-                    element.invalid = true;
-                }
-            });
-        });
-    }
-
-    render(): TemplateResult {
-        return html`<iron-form
-            @iron-form-presubmit=${(ev: Event) => { this.submit(ev); }}>
-            <slot></slot>
-        </iron-form>`;
-    }
-
-}
+import "../../elements/forms/Form";
 
 @customElement("ak-user-details")
 export class UserDetailsPage extends LitElement {