diff --git a/src/model/quizSettings.ts b/src/model/quizSettings.ts
index db37e5c4..4efd2ff7 100644
--- a/src/model/quizSettings.ts
+++ b/src/model/quizSettings.ts
@@ -40,7 +40,7 @@ export interface QuizConfig {
         theme: string,
         reply: string,
         replname: string,
-    }
+    };
     startpage: {
         description: string;
         button: string;
@@ -61,12 +61,8 @@ export interface QuizConfig {
     formContact: {
         title: string;
         desc: string;
-        name: FCField;
-        email: FCField;
-        phone: FCField;
-        text: FCField;
-        address: FCField;
-        button: string
+        fields: Record<FormContactFieldName, FormContactFieldData>;
+        button: string;
     };
     info: {
         phonenumber: string;
@@ -78,13 +74,20 @@ export interface QuizConfig {
     meta: string;
 }
 
-type FCField = {
-    text: string
-    innerText: string
-    key: string
-    required: boolean
-    used: boolean
-}
+export type FormContactFieldName = "name" | "email" | "phone" | "text" | "address";
+
+type FormContactFieldData = {
+    text: string;
+    innerText: string;
+    key: string;
+    required: boolean;
+    used: boolean;
+};
+
+export type FieldSettingsDrawerState = {
+    field: FormContactFieldName | "all" | "",
+    isEdit: boolean;
+};
 
 export const defaultQuizConfig: QuizConfig = {
     type: null,
@@ -127,42 +130,44 @@ export const defaultQuizConfig: QuizConfig = {
     formContact: {
         title: "",
         desc: "",
-        name: {
-            text: "",
-            innerText: "",
-            key: "",
-            required: false,
-            used: true
+        fields: {
+            name: {
+                text: "",
+                innerText: "",
+                key: "",
+                required: false,
+                used: true
+            },
+            email: {
+                text: "",
+                innerText: "",
+                key: "",
+                required: false,
+                used: true
+            },
+            phone: {
+                text: "",
+                innerText: "",
+                key: "",
+                required: false,
+                used: true
+            },
+            text: {
+                text: "",
+                innerText: "",
+                key: "",
+                required: false,
+                used: false
+            },
+            address: {
+                text: "",
+                innerText: "",
+                key: "",
+                required: false,
+                used: false
+            },
         },
-        email: {
-            text: "",
-            innerText: "",
-            key: "",
-            required: false,
-            used: true
-        },
-        phone: {
-            text: "",
-            innerText: "",
-            key: "",
-            required: false,
-            used: true
-        },
-        text: {
-            text: "",
-            innerText: "",
-            key: "",
-            required: false,
-            used: false
-        },
-        address: {
-            text: "",
-            innerText: "",
-            key: "",
-            required: false,
-            used: false
-        },
-        button: ""
+        button: "",
     },
     meta: "",
 };
diff --git a/src/pages/ContactFormPage/ContactFormPage.tsx b/src/pages/ContactFormPage/ContactFormPage.tsx
index 44e9f9e9..c225fe0e 100644
--- a/src/pages/ContactFormPage/ContactFormPage.tsx
+++ b/src/pages/ContactFormPage/ContactFormPage.tsx
@@ -2,7 +2,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme, Popover, useMediaQuery, Divider } from "@mui/material";
 import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions";
 import CustomTextField from "@ui_kit/CustomTextField";
-import React from "react";
+import React, { ReactNode, useRef, useState } from "react";
 import Info from "../../assets/icons/Info";
 import Trash from "@icons/trash";
 import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
@@ -17,287 +17,261 @@ import SwitchContactForm from "./switchContactForm";
 import GearIcon from "@icons/GearIcon";
 import { useQuestionsStore } from "@root/questions/store";
 import { useCurrentQuiz } from "@root/quizes/hooks";
+import { FieldSettingsDrawerState, FormContactFieldName } from "@model/quizSettings";
 
 
-const buttons = [
-  {
-    name: "Имя",
-    desc: "Дмитрий",
-    key: "name"
-  },
-  {
-    name: "Email",
-    desc: "mail@example.ru",
-    key: "email"
-  },
-  {
-    name: "Номер",
-    desc: "+7 900 000 00 00",
-    key: "phone"
-  },
-  {
-    name: "Фамилия",
-    desc: "Иванов",
-    key: "text"
-  },
-  {
-    name: "Адрес",
-    desc: "Москва, Лаврушинский пер., 10",
-    key: "address"
-  },
-]
+const buttons: { key: FormContactFieldName, name: string, desc: string; }[] = [
+    { name: "Имя", desc: "Дмитрий", key: "name" },
+    { name: "Email", desc: "mail@example.ru", key: "email" },
+    { name: "Номер", desc: "+7 900 000 00 00", key: "phone" },
+    { name: "Фамилия", desc: "Иванов", key: "text" },
+    { name: "Адрес", desc: "Москва, Лаврушинский пер., 10", key: "address" },
+];
 
 export default function ContactFormPage() {
-  const theme = useTheme();
+    const theme = useTheme();
+    const quiz = useCurrentQuiz();
+    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+    const [drawerNewField, setDrawerNewField] = useState<FieldSettingsDrawerState>({ field: "", isEdit: false });
+    const [drawerMessenger, setDrawerMessenger] = useState(false);
 
-  const quiz = useCurrentQuiz()
+    const drawerMessengerHC = (bool: boolean) => {
+        setDrawerMessenger(bool);
+    };
 
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000))
+    return (
+        <Box sx={{
+            p: isTablet ? "0 0 150px 0" : "0"
+        }}>
+            <Box sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: "10px",
+                m: "67px 0 41px 0",
+            }}>
+                <Link
+                    sx={{
+                        fontSize: "16px",
+                        lineHeight: "19px",
+                        color: theme.palette.brightPurple.main,
+                        textDecorationColor: theme.palette.brightPurple.main,
 
-  const [drawerNewField, setDrawerNewField] = React.useState("");
-  const [drawerMessenger, setDrawerMessenger] = React.useState(false);
-
-  const drawerNewFieldHC = (str: string) => {
-    setDrawerNewField(str);
-  };
-  const drawerMessengerHC = (bool: boolean) => {
-    setDrawerMessenger(bool);
-  };
-
-  return (
-    <Box
-      sx={{
-        p: isTablet ? "0 0 150px 0" : "0"
-      }}
-    >
-
-
-      <Box sx={{
-        display: "flex",
-        alignItems: "center",
-        gap: "10px",
-        m: "67px 0 41px 0",
-      }}>
-        <Link
-          sx={{
-            fontSize: "16px",
-            lineHeight: "19px",
-            color: theme.palette.brightPurple.main,
-            textDecorationColor: theme.palette.brightPurple.main,
-
-          }}
-        >
-          Как собрать данные посетителя
-        </Link>{" "}
-        {/* <Popover>
+                    }}
+                >
+                    Как собрать данные посетителя
+                </Link>{" "}
+                {/* <Popover>
           <Info />
         </Popover> */}
-
-      </Box>
-
-
-      {
-        !quiz?.config.formContact.name.used &&
-          !quiz?.config.formContact.email.used &&
-          !quiz?.config.formContact.phone.used &&
-          !quiz?.config.formContact.text.used &&
-          !quiz?.config.formContact.address.used ?
-          <ContactFormParent>
-            <EmptyCard drawerNewFieldHC={drawerNewFieldHC} />
-          </ContactFormParent>
-          :
-          <ContactFormParent>
-            <ButtonsCard drawerNewFieldHC={drawerNewFieldHC} />
-          </ContactFormParent>
-      }
-
-
-      <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
-        <Box sx={{ display: "flex", gap: "8px" }}>
-          <Button
-            onClick={decrementCurrentStep}
-            variant="outlined">
-            <ArrowLeft />
-          </Button>
-          <Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
-            Установка квиза
-          </Button>
+            </Box>
+            {
+                !quiz?.config.formContact.fields.name.used &&
+                    !quiz?.config.formContact.fields.email.used &&
+                    !quiz?.config.formContact.fields.phone.used &&
+                    !quiz?.config.formContact.fields.text.used &&
+                    !quiz?.config.formContact.fields.address.used ?
+                    <ContactFormParent>
+                        <EmptyCard drawerNewFieldHC={setDrawerNewField} />
+                    </ContactFormParent>
+                    :
+                    <ContactFormParent>
+                        <ButtonsCard drawerNewFieldHC={setDrawerNewField} />
+                    </ContactFormParent>
+            }
+            <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
+                <Box sx={{ display: "flex", gap: "8px" }}>
+                    <Button
+                        onClick={decrementCurrentStep}
+                        variant="outlined">
+                        <ArrowLeft />
+                    </Button>
+                    <Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
+                        Установка квиза
+                    </Button>
+                </Box>
+            </Box>
+            <DrawerNewField isOpenDrawer={drawerNewField.field} drawerNewFieldHC={() => setDrawerNewField({ field: "", isEdit: false })}>
+                <WindowNewField drawerState={drawerNewField} closeDrawer={() => setDrawerNewField({ field: "", isEdit: false })} />
+            </DrawerNewField>
         </Box>
-      </Box>
-
-
-      <DrawerNewField isOpenDrawer={drawerNewField} drawerNewFieldHC={drawerNewFieldHC}>
-        <WindowNewField type={drawerNewField} drawerNewFieldHC={drawerNewFieldHC} />
-      </DrawerNewField>
-
-    </Box>
-  );
+    );
 }
 
 interface Props {
-  outerContainerSx?: SxProps<Theme>;
-  children?: React.ReactNode;
+    outerContainerSx?: SxProps<Theme>;
+    children?: ReactNode;
 }
 
 function ContactFormParent({ outerContainerSx: sx, children }: Props) {
-  const theme = useTheme();
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000))
-  const quiz = useCurrentQuiz()
-  return (
-    <Paper
-      sx={{
-        maxWidth: "796px",
-        width: "100%",
-        borderRadius: "12px",
-        margin: "20px 0",
-        display: "flex",
-      }}
-    >
-      <Box sx={{ width: "100%", display: "flex", flexDirection: isTablet ? "column" : "row", }}>
-        <Box
-          sx={{
-            // borderRight: isTablet ? "none" : `1px solid ${theme.palette.grey2.main}`,
-            maxWidth: "386px",
-            width: "100%",
-            padding: "100px 20px 20px 20px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "20px",
-          }}
-        >
-          <CustomTextField
-            onChange={({ target }) => {
-              updateQuiz(quiz.id, (quiz) => {
-                quiz.config.formContact.title = target.value
-              })
-            }}
-            value={quiz.config.formContact.title}
-            placeholder="Заголовок формы" text={""} />
-          <TextField
+    const theme = useTheme();
+    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+    const quiz = useCurrentQuiz();
 
-            onChange={({ target }) => {
-              updateQuiz(quiz.id, (quiz) => {
-                quiz.config.formContact.desc = target.value
-              })
-            }}
-            value={quiz.config.formContact.desc}
-            id="outlined-multiline-static"
-            multiline
-            rows={8}
-            placeholder="Дополнительный текст формы"
+    if (!quiz) return null;
+
+    return (
+        <Paper
             sx={{
-              backgroundColor: theme.palette.background.default,
-
-              "& .MuiInputBase-root": {
-                borderRadius: "10px",
-                alignItems: "start",
-                color: theme.palette.grey2.main,
-              color:"black",
-              },
+                maxWidth: "796px",
+                width: "100%",
+                borderRadius: "12px",
+                margin: "20px 0",
+                display: "flex",
             }}
-          />
-        </Box>
-        <Divider sx={{
-          height: isTablet ? "1px" : "80%",
-          width: isTablet ? "80%" : "1px",
-          margin: "auto"
-        }}
-          orientation={isTablet ? "horisontal" : "vertical"}
-        />
-        {children}
-      </Box>
-    </Paper>
-  );
+        >
+            <Box sx={{ width: "100%", display: "flex", flexDirection: isTablet ? "column" : "row", }}>
+                <Box
+                    sx={{
+                        // borderRight: isTablet ? "none" : `1px solid ${theme.palette.grey2.main}`,
+                        maxWidth: "386px",
+                        width: "100%",
+                        padding: "100px 20px 20px 20px",
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "20px",
+                    }}
+                >
+                    <CustomTextField
+                        onChange={({ target }) => {
+                            updateQuiz(quiz.id, (quiz) => {
+                                quiz.config.formContact.title = target.value;
+                            });
+                        }}
+                        value={quiz.config.formContact.title}
+                        placeholder="Заголовок формы" text={""} />
+                    <TextField
+
+                        onChange={({ target }) => {
+                            updateQuiz(quiz.id, (quiz) => {
+                                quiz.config.formContact.desc = target.value;
+                            });
+                        }}
+                        value={quiz.config.formContact.desc}
+                        id="outlined-multiline-static"
+                        multiline
+                        rows={8}
+                        placeholder="Дополнительный текст формы"
+                        sx={{
+                            backgroundColor: theme.palette.background.default,
+
+                            "& .MuiInputBase-root": {
+                                borderRadius: "10px",
+                                alignItems: "start",
+                                color: theme.palette.grey2.main,
+                                color: "black",
+                            },
+                        }}
+                    />
+                </Box>
+                <Divider sx={{
+                    height: isTablet ? "1px" : "80%",
+                    width: isTablet ? "80%" : "1px",
+                    margin: "auto"
+                }}
+                    orientation={isTablet ? "horizontal" : "vertical"}
+                />
+                {children}
+            </Box>
+        </Paper>
+    );
 }
 
 
-const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: string; drawerNewFieldHC: any }) => {
-  const theme = useTheme();
-  const quiz = useCurrentQuiz()
-  return (
-    <>
-      <Typography>{quiz.config.formContact[type].text || name}</Typography>
-      <Box
-        sx={{ display: "flex", mb: "10px" }}
-      >
-        <Typography
-          sx={{
-            color: quiz.config.formContact[type].innerText ? "black" : "#9A9AAF",
-            fontSize: "20px",
-            backgroundColor: theme.palette.background.default,
-            height: "48px",
-            borderRadius: "10px",
-            border: "1px #9A9AAF solid",
-            lineHeight: "21px",
-            p: " 0 25px 0 14px ",
-            display: "flex",
-            alignItems: "center",
-            width: "100%",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            position: "relative"
-          }}
-        >
-          {quiz.config.formContact[type].innerText || placeholder}
-          <IconButton
-            onClick={() => drawerNewFieldHC(type)}
-            sx={{
-              position: "absolute",
-              right: "0"
-            }}>
-            <GearIcon height="20px" width="20px" color="#7e2aea" />
-          </IconButton>
-        </Typography>
-        <IconButton
-          onClick={() => updateQuiz(quiz?.id, (quiz) => {
-            quiz.config.formContact[type].used = false
-          })}
-          sx={{
-            width: "48px",
-            ml: "5px"
-          }}
-        >
-          <Trash />
+const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: FormContactFieldName; drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
+    const theme = useTheme();
+    const quiz = useCurrentQuiz();
 
-        </IconButton>
-      </Box>
-    </>
-  )
-}
+    if (!quiz) return null;
 
-const ButtonsCard = ({ drawerNewFieldHC }: any) => {
-  const theme = useTheme();
-  const quiz = useCurrentQuiz()
+    return (
+        <>
+            <Typography>{quiz.config.formContact.fields[type].text || name}</Typography>
+            <Box
+                sx={{ display: "flex", mb: "10px" }}
+            >
+                <Typography
+                    sx={{
+                        color: quiz.config.formContact.fields[type].innerText ? "black" : "#9A9AAF",
+                        fontSize: "20px",
+                        backgroundColor: theme.palette.background.default,
+                        height: "48px",
+                        borderRadius: "10px",
+                        border: "1px #9A9AAF solid",
+                        lineHeight: "21px",
+                        p: " 0 25px 0 14px ",
+                        display: "flex",
+                        alignItems: "center",
+                        width: "100%",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        position: "relative"
+                    }}
+                >
+                    {quiz.config.formContact.fields[type].innerText || placeholder}
+                    <IconButton
+                        onClick={() => drawerNewFieldHC({ field: type, isEdit: true })}
+                        sx={{
+                            position: "absolute",
+                            right: "0"
+                        }}>
+                        <GearIcon height="20px" width="20px" color="#7e2aea" />
+                    </IconButton>
+                </Typography>
+                <IconButton
+                    onClick={() => updateQuiz(quiz?.id, (quiz) => {
+                        quiz.config.formContact.fields[type].used = false;
+                    })}
+                    sx={{
+                        width: "48px",
+                        ml: "5px"
+                    }}
+                >
+                    <Trash />
 
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
+                </IconButton>
+            </Box>
+        </>
+    );
+};
 
-      {
-        buttons.map((contentData) => {
-          const content = quiz?.config.formContact[contentData.key]
-          return content.used ? <SettingField drawerNewFieldHC={drawerNewFieldHC} key={contentData.key} type={contentData.key} name={content.text || contentData.name} placeholder={content.innerText || contentData.desc} /> : <></>
-        })
-      }
+const ButtonsCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
+    const theme = useTheme();
+    const quiz = useCurrentQuiz();
 
-      {
-        (
-          quiz?.config.formContact.name.used &&
-          quiz?.config.formContact.email.used &&
-          quiz?.config.formContact.phone.used &&
-          quiz?.config.formContact.text.used &&
-          quiz?.config.formContact.address.used
-        ) ?
-          <></>
-          :
-          <Button
-            onClick={() => drawerNewFieldHC("all")}
-            variant="contained"
-            sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
-          >
-            Добавить поле +
-          </Button>
-      }
-      {/* <Link
+    if (!quiz) return null;
+
+    return (
+        <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
+            {buttons.flatMap((contentData) => {
+                const content = quiz.config.formContact.fields[contentData.key];
+                return content.used ? (
+                    <SettingField
+                        drawerNewFieldHC={drawerNewFieldHC}
+                        key={contentData.key}
+                        type={contentData.key}
+                        name={content.text || contentData.name}
+                        placeholder={content.innerText || contentData.desc}
+                    />
+                ) : [];
+            })}
+            {(
+                quiz.config.formContact.fields.name.used &&
+                quiz.config.formContact.fields.email.used &&
+                quiz.config.formContact.fields.phone.used &&
+                quiz.config.formContact.fields.text.used &&
+                quiz.config.formContact.fields.address.used
+            ) ?
+                <></>
+                :
+                <Button
+                    onClick={() => drawerNewFieldHC({ field: "all", isEdit: false })}
+                    variant="contained"
+                    sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
+                >
+                    Добавить поле +
+                </Button>
+            }
+            {/* <Link
         component="button"
         // onClick={() => drawerMessengerHC(true)}
         sx={{
@@ -311,51 +285,51 @@ const ButtonsCard = ({ drawerNewFieldHC }: any) => {
         Добавить мессенджеры
       </Link> */}
 
-      <PseudoButton />
-    </Box>
-  )
-}
-const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void }) => {
-  const theme = useTheme();
-  const [FC, setFC] = React.useState(false)
-  const openFC = () => setFC(true)
-  const closeFC = () => setFC(false)
-  const popover = React.useRef(null);
-
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", padding: "100px 20px 20px 20px", width: "100%", gap: "20px", }}>
-      <Button
-        onClick={() => drawerNewFieldHC("all")}
-        variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
-        Добавить поле +
-      </Button>
-      <Box sx={{ display: "flex" }}>
-        <Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
-        <Box ref={popover}>
-          <Info sx={{ ml: "6px", p: "0" }} onClick={openFC} />
+            <PseudoButton />
         </Box>
+    );
+};
+const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
+    const theme = useTheme();
+    const [FC, setFC] = useState(false);
+    const openFC = () => setFC(true);
+    const closeFC = () => setFC(false);
+    const popover = useRef(null);
 
-        <Popover
-          open={FC}
-          onClose={closeFC}
-          anchorEl={popover.current}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'center',
-          }}
-          transformOrigin={{
-            vertical: 'top',
-            horizontal: 'center',
-          }}
-          disableRestoreFocus
-        >
-          <Typography sx={{ m: "20px", textAlign: "center" }}>
-            Будут поля:<br></br> Имя, Email, Телефон
-          </Typography>
+    return (
+        <Box sx={{ display: "flex", flexDirection: "column", padding: "100px 20px 20px 20px", width: "100%", gap: "20px", }}>
+            <Button
+                onClick={() => drawerNewFieldHC({ field: "all", isEdit: false })}
+                variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
+                Добавить поле +
+            </Button>
+            <Box sx={{ display: "flex" }}>
+                <Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
+                <Box ref={popover}>
+                    <Info sx={{ ml: "6px", p: "0" }} onClick={openFC} />
+                </Box>
 
-        </Popover>
-      </Box>
-      {/* <Link
+                <Popover
+                    open={FC}
+                    onClose={closeFC}
+                    anchorEl={popover.current}
+                    anchorOrigin={{
+                        vertical: 'bottom',
+                        horizontal: 'center',
+                    }}
+                    transformOrigin={{
+                        vertical: 'top',
+                        horizontal: 'center',
+                    }}
+                    disableRestoreFocus
+                >
+                    <Typography sx={{ m: "20px", textAlign: "center" }}>
+                        Будут поля:<br></br> Имя, Email, Телефон
+                    </Typography>
+
+                </Popover>
+            </Box>
+            {/* <Link
         sx={{
           mt: "20px",
           fontSize: "16px",
@@ -366,42 +340,45 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void
       >
         Добавить мессенджеры
       </Link> */}
-      <PseudoButton />
-    </Box>
-  )
-}
+            <PseudoButton />
+        </Box>
+    );
+};
 
 const PseudoButton = () => {
-  const quiz = useCurrentQuiz()
-  return (
-    <TextField
-      onChange={({ target }) => {
-        updateQuiz(quiz.id, (quiz) => {
-          quiz.config.formContact.button = target.value
-        })
-      }}
-      value={quiz.config.formContact.button}
-      sx={{
-        heigth: "44px",
-        width: "190px",
-        "& .MuiInputBase-root": {
-          backgroundColor: "#7E2AEA",
-          borderRadius: "8px",
-          color: "white",
-        },
-        "& .MuiInputBase-input": {
-          padding: "10px 20px",
-          textAlign: "center"
-        },
-        "& .MuiInputBase-input::placeholder": {
-          color: "white",
-          opacity: "1"
-        }
-      }}
-      placeholder="Название кнопки"
-    >
-      {quiz?.config.formContact.button || "Название кнопки"}
-    </TextField>
+    const quiz = useCurrentQuiz();
 
-  )
-}
\ No newline at end of file
+    if (!quiz) return null;
+
+    return (
+        <TextField
+            onChange={({ target }) => {
+                updateQuiz(quiz.id, (quiz) => {
+                    quiz.config.formContact.button = target.value;
+                });
+            }}
+            value={quiz.config.formContact.button}
+            sx={{
+                heigth: "44px",
+                width: "190px",
+                "& .MuiInputBase-root": {
+                    backgroundColor: "#7E2AEA",
+                    borderRadius: "8px",
+                    color: "white",
+                },
+                "& .MuiInputBase-input": {
+                    padding: "10px 20px",
+                    textAlign: "center"
+                },
+                "& .MuiInputBase-input::placeholder": {
+                    color: "white",
+                    opacity: "1"
+                }
+            }}
+            placeholder="Название кнопки"
+        >
+            {quiz.config.formContact.button || "Название кнопки"}
+        </TextField>
+
+    );
+};
diff --git a/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx b/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
deleted file mode 100644
index 3ca2d7e2..00000000
--- a/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
-import React from "react";
-import {Box, IconButton, useTheme} from "@mui/material";
-import NameIcon from "@icons/ContactFormIcon/NameIcon";
-import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
-import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
-import TextIcon from "@icons/ContactFormIcon/TextIcon";
-import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
-import { useCurrentQuiz } from "@root/quizes/hooks";
-
-interface Props {
-    switchState: string
-    SSHC: (data:string) => void
-    type: string
-}
-
-export default function ButtonsNewField ({SSHC, switchState, type}:Props) {
-    const theme = useTheme();
-    const quiz = useCurrentQuiz()
-    const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
-        {icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Имя', value: 'name'},
-        {icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Email', value: 'email'},
-        {icon: <PhoneIcon color={switchState === 'phone' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Телефон', value: 'phone'},
-        {icon: <TextIcon color={switchState === 'text' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Текст', value: 'text'},
-        {icon: <AddressIcon color={switchState === 'address' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Адрес', value: 'address'},
-    ]
-
-    return (
-            <Box
-                sx={{
-                    padding: '20px',
-                    display: 'flex',
-                    gap: '10px'
-                }}
-            >
-                {buttonSetting.map( (e,i) => (
-                    type === e.value || type === "all" ?
-                    <MiniButtonSetting
-                    disabled = {quiz?.config.formContact[e.value]?.used}
-                        key={i}
-                        onClick={()=>{SSHC(e.value)}}
-                        sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
-                            color: switchState === e.value && type === "all" ? '#ffffff' : theme.palette.grey3.main,
-                        }}
-                    >
-                        {e.icon}
-                        {e.title}
-                    </MiniButtonSetting>
-                    : 
-                    <></>
-                ))}
-            </Box>
-    )
-}
\ No newline at end of file
diff --git a/src/pages/ContactFormPage/NewField/NewFieldParent.tsx b/src/pages/ContactFormPage/NewField/NewFieldParent.tsx
index 4dc46078..178bf7b4 100644
--- a/src/pages/ContactFormPage/NewField/NewFieldParent.tsx
+++ b/src/pages/ContactFormPage/NewField/NewFieldParent.tsx
@@ -6,18 +6,22 @@ import Button from "@mui/material/Button";
 import * as React from "react";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { updateQuiz } from "@root/quizes/actions";
+import { FormContactFieldName } from "@model/quizSettings";
 
 interface Props {
     outerContainerSx?: SxProps<Theme>;
     children?: React.ReactNode;
-    defaultValue?: string;
+    defaultValue: FormContactFieldName;
     placeholderHelp: string;
     placeholderField: string;
-    drawerNewFieldHC:(a:string)=>void
+    closeDrawer: () => void;
 }
 
-export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
-    const quiz = useCurrentQuiz()
+export default function NewFieldParent({ closeDrawer, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
+    const quiz = useCurrentQuiz();
+
+    if (!quiz) return null;
+
     return (
         <Box sx={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
@@ -26,10 +30,10 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
                 <CustomTextField
                     onChange={({ target }) => {
                         updateQuiz(quiz.id, (quiz) => {
-                            quiz.config.formContact[defaultValue].text = target.value
-                        })
+                            quiz.config.formContact.fields[defaultValue].text = target.value;
+                        });
                     }}
-                    value={quiz.config.formContact[defaultValue].text}
+                    value={quiz.config.formContact.fields[defaultValue].text}
 
                     placeholder={placeholderHelp} text={''} />
             </Box>
@@ -39,10 +43,10 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
                 <CustomTextField
                     onChange={({ target }) => {
                         updateQuiz(quiz.id, (quiz) => {
-                            quiz.config.formContact[defaultValue].innerText = target.value
-                        })
+                            quiz.config.formContact.fields[defaultValue].innerText = target.value;
+                        });
                     }}
-                    value={quiz.config.formContact[defaultValue].innerText}
+                    value={quiz.config.formContact.fields[defaultValue].innerText}
 
                     placeholder={placeholderField} text={''} />
             </Box>
@@ -50,11 +54,11 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
 
                 <Typography>Ключ</Typography>
                 <TextField
-                    value={quiz.config.formContact[defaultValue].key}
+                    value={quiz.config.formContact.fields[defaultValue].key}
                     onChange={({ target }) => {
                         updateQuiz(quiz.id, (quiz) => {
-                            quiz.config.formContact[defaultValue].key = target.value
-                        })
+                            quiz.config.formContact.fields[defaultValue].key = target.value;
+                        });
                     }}
                     placeholder="text"
                     sx={{
@@ -67,14 +71,13 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
                             backgroundColor: '#EEE4FC',
                         },
                     }}
-
                 />
                 <CustomCheckbox
-                    checked={quiz.config.formContact[defaultValue].required}
+                    checked={quiz.config.formContact.fields[defaultValue].required}
                     handleChange={({ target }) => {
                         updateQuiz(quiz.id, (quiz) => {
-                            quiz.config.formContact[defaultValue].required = target.checked
-                        })
+                            quiz.config.formContact.fields[defaultValue].required = target.checked;
+                        });
                     }}
 
                     label={"Обязательно к заполнению"} />
@@ -88,11 +91,11 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
             <Button
                 onClick={() => {
                     updateQuiz(quiz.id, (quiz) => {
-                        quiz.config.formContact[defaultValue].used = true
-                    })
-                    drawerNewFieldHC("")
+                        quiz.config.formContact.fields[defaultValue].used = true;
+                    });
+                    closeDrawer();
                 }}
                 variant='contained' sx={{ maxWidth: '125px' }}>Добавить</Button>
         </Box>
-    )
+    );
 }
diff --git a/src/pages/ContactFormPage/NewField/SwitchNewField.tsx b/src/pages/ContactFormPage/NewField/SwitchNewField.tsx
index 2a962539..30c62c32 100644
--- a/src/pages/ContactFormPage/NewField/SwitchNewField.tsx
+++ b/src/pages/ContactFormPage/NewField/SwitchNewField.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import NewFieldParent from "./NewFieldParent";
-import {FormControlLabel} from "@mui/material";
+import { FormControlLabel } from "@mui/material";
 import SelectMask from "../SelectMask";
 import CustomizedSwitch from "@ui_kit/CustomSwitch";
 
@@ -8,27 +8,25 @@ import CustomizedSwitch from "@ui_kit/CustomSwitch";
 
 interface Props {
     switchState: string,
-    drawerNewFieldHC:(a:string)=>void
+    closeDrawer: () => void;
 }
 
 
-export default function SwitchNewField({switchState ='name', drawerNewFieldHC}: Props) {
+export default function SwitchNewField({ switchState = 'name', closeDrawer }: Props) {
     const [SwitchMask, setSwitchMask] = React.useState(false);
-    const SwitchMaskHC = (bool:boolean) => {
-        setSwitchMask(bool)
-    }
+    const SwitchMaskHC = (bool: boolean) => {
+        setSwitchMask(bool);
+    };
 
     switch (switchState) {
         case 'name':
-            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
-            break;
+            return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'} />);
         case 'email':
-            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>);
-            break;
+            return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'} />);
         case 'phone':
 
             return (
-                <NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
+                <NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
                     {/* <FormControlLabel
                         value="start"
                         control={<CustomizedSwitch/>}
@@ -45,20 +43,17 @@ export default function SwitchNewField({switchState ='name', drawerNewFieldHC}:
                     /> */}
 
                     {SwitchMask ?
-                        <SelectMask/>
+                        <SelectMask />
                         :
                         <></>
                     }
                 </NewFieldParent>
             );
-            break;
         case 'text':
-            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>);
-            break;
+            return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'} />);
         case 'address':
-            return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC}  placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>);
-            break;
+            return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'} />);
         default:
-            return (<></>)
+            return (<></>);
     }
-}
\ No newline at end of file
+}
diff --git a/src/pages/ContactFormPage/NewField/WindowNewField.tsx b/src/pages/ContactFormPage/NewField/WindowNewField.tsx
index a7c69458..24fd64d7 100644
--- a/src/pages/ContactFormPage/NewField/WindowNewField.tsx
+++ b/src/pages/ContactFormPage/NewField/WindowNewField.tsx
@@ -1,39 +1,87 @@
-import * as React from 'react';
+import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
+import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
+import NameIcon from "@icons/ContactFormIcon/NameIcon";
+import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
+import TextIcon from "@icons/ContactFormIcon/TextIcon";
+import { FieldSettingsDrawerState, FormContactFieldName } from "@model/quizSettings";
+import CloseIcon from '@mui/icons-material/Close';
+import { Typography, useTheme } from "@mui/material";
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import { Typography, useTheme } from "@mui/material";
-import CloseIcon from '@mui/icons-material/Close';
-import ButtonsNewField from "./ButtonsNewField";
-import SwitchNewField from "./SwitchNewField";
 import { useCurrentQuiz } from '@root/quizes/hooks';
+import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
+import { useEffect, useState } from 'react';
+import SwitchNewField from "./SwitchNewField";
 
 
-export default function WindowNewField({ type, drawerNewFieldHC }: { type: string, drawerNewFieldHC: (a: string) => void }) {
-    const quiz = useCurrentQuiz()
+interface Props {
+    drawerState: FieldSettingsDrawerState;
+    closeDrawer: () => void;
+}
+
+export default function WindowNewField({ drawerState, closeDrawer }: Props) {
+    const quiz = useCurrentQuiz();
     const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState("");
-    React.useEffect(() => {
-        for (let val in quiz?.config.formContact) {
-            if (!quiz?.config.formContact[val]?.used && (val !== "title" && val !== "desc" && val !== "button")) {
-                setSwitchState(val)
-                return
+    const [switchState, setSwitchState] = useState("");
+
+    useEffect(() => {
+        if (!quiz) return;
+
+        if (drawerState.isEdit) {
+            return setSwitchState(drawerState.field);
+        }
+
+        for (let val in quiz.config.formContact.fields) {
+            if (!quiz.config.formContact.fields[val as FormContactFieldName].used) {
+                setSwitchState(val);
+                return;
             }
         }
-    }, [])
+    }, []);
+
+    if (!quiz) return null;
 
     const SSHC = (data: string) => {
-        setSwitchState(data)
-    }
+        setSwitchState(data);
+    };
+
+    const buttonSetting: { icon: JSX.Element; title: string; value: FormContactFieldName; }[] = [
+        { icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Имя', value: 'name' },
+        { icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Email', value: 'email' },
+        { icon: <PhoneIcon color={switchState === 'phone' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Телефон', value: 'phone' },
+        { icon: <TextIcon color={switchState === 'text' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Текст', value: 'text' },
+        { icon: <AddressIcon color={switchState === 'address' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Адрес', value: 'address' },
+    ];
 
     return (
         <>
             <Box sx={{ padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default }}>
                 <Typography>Новое поле</Typography>
-                <Button onClick={() => drawerNewFieldHC("")} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button>
+                <Button onClick={closeDrawer} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button>
             </Box>
-
-            <Box><ButtonsNewField type={type} switchState={switchState} SSHC={SSHC} /></Box>
-            <SwitchNewField switchState={switchState} drawerNewFieldHC={drawerNewFieldHC} />
+            <Box sx={{
+                padding: '20px',
+                display: 'flex',
+                gap: '10px'
+            }}>
+                {buttonSetting.flatMap((e, i) => (
+                    drawerState.field === e.value || drawerState.field === "all"
+                        ? <MiniButtonSetting
+                            disabled={quiz.config.formContact.fields[e.value].used}
+                            key={i}
+                            onClick={() => { SSHC(e.value); }}
+                            sx={{
+                                backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
+                                color: switchState === e.value && drawerState.field === "all" ? '#ffffff' : theme.palette.grey3.main,
+                            }}
+                        >
+                            {e.icon}
+                            {e.title}
+                        </MiniButtonSetting>
+                        : []
+                ))}
+            </Box>
+            <SwitchNewField switchState={switchState} closeDrawer={closeDrawer} />
         </>
-    )
-}
\ No newline at end of file
+    );
+}