diff --git a/docs/data/material/components/dialogs/FormDialog.js b/docs/data/material/components/dialogs/FormDialog.js
index 2cf67d3f023852..bbb38b86dcd9a3 100644
--- a/docs/data/material/components/dialogs/FormDialog.js
+++ b/docs/data/material/components/dialogs/FormDialog.js
@@ -23,7 +23,21 @@ export default function FormDialog() {
       <Button variant="outlined" onClick={handleClickOpen}>
         Open form dialog
       </Button>
-      <Dialog open={open} onClose={handleClose}>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        PaperProps={{
+          component: 'form',
+          onSubmit: (event) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const formJson = Object.fromEntries(formData.entries());
+            const email = formJson.email;
+            console.log(email);
+            handleClose();
+          },
+        }}
+      >
         <DialogTitle>Subscribe</DialogTitle>
         <DialogContent>
           <DialogContentText>
@@ -32,8 +46,10 @@ export default function FormDialog() {
           </DialogContentText>
           <TextField
             autoFocus
+            required
             margin="dense"
             id="name"
+            name="email"
             label="Email Address"
             type="email"
             fullWidth
@@ -42,7 +58,7 @@ export default function FormDialog() {
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose}>Cancel</Button>
-          <Button onClick={handleClose}>Subscribe</Button>
+          <Button type="submit">Subscribe</Button>
         </DialogActions>
       </Dialog>
     </React.Fragment>
diff --git a/docs/data/material/components/dialogs/FormDialog.tsx b/docs/data/material/components/dialogs/FormDialog.tsx
index 2cf67d3f023852..de732f649c43b6 100644
--- a/docs/data/material/components/dialogs/FormDialog.tsx
+++ b/docs/data/material/components/dialogs/FormDialog.tsx
@@ -23,7 +23,21 @@ export default function FormDialog() {
       <Button variant="outlined" onClick={handleClickOpen}>
         Open form dialog
       </Button>
-      <Dialog open={open} onClose={handleClose}>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        PaperProps={{
+          component: 'form',
+          onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const formJson = Object.fromEntries((formData as any).entries());
+            const email = formJson.email;
+            console.log(email);
+            handleClose();
+          },
+        }}
+      >
         <DialogTitle>Subscribe</DialogTitle>
         <DialogContent>
           <DialogContentText>
@@ -32,8 +46,10 @@ export default function FormDialog() {
           </DialogContentText>
           <TextField
             autoFocus
+            required
             margin="dense"
             id="name"
+            name="email"
             label="Email Address"
             type="email"
             fullWidth
@@ -42,7 +58,7 @@ export default function FormDialog() {
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose}>Cancel</Button>
-          <Button onClick={handleClose}>Subscribe</Button>
+          <Button type="submit">Subscribe</Button>
         </DialogActions>
       </Dialog>
     </React.Fragment>