From c2277eed31900429ed086b5be06764eac41a3786 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Mon, 23 Oct 2023 21:13:29 +0300
Subject: [PATCH 01/22] feat: add blocks/Form

---
 .storybook/stories/documentation/Blocks.mdx  |   2 +
 src/blocks/Form/Form.scss                    | 230 +++++++++++++++++++
 src/blocks/Form/Form.tsx                     | 146 ++++++++++++
 src/blocks/Form/HubspotInlineForm.tsx        |  21 ++
 src/blocks/Form/__stories__/Form.mdx         |  24 ++
 src/blocks/Form/__stories__/Form.stories.tsx |  37 +++
 src/blocks/Form/__stories__/data.json        |  44 ++++
 src/blocks/Form/schema.ts                    |  51 ++++
 src/blocks/index.ts                          |   1 +
 src/components/YandexForm/YandexForm.tsx     |  20 +-
 src/components/YandexForm/schema.ts          |  15 ++
 src/constructor-items.ts                     |   2 +
 src/editor/data/templates/form-block.json    |  20 ++
 src/models/constructor-items/blocks.ts       |  42 +++-
 src/models/constructor-items/common.ts       |  18 +-
 src/models/guards.ts                         |  17 +-
 src/schema/constants.ts                      |   3 +
 src/schema/validators/blocks.ts              |   1 +
 src/sub-blocks/HubspotForm/schema.ts         |  21 ++
 styles/variables.scss                        |   2 +
 20 files changed, 695 insertions(+), 22 deletions(-)
 create mode 100644 src/blocks/Form/Form.scss
 create mode 100644 src/blocks/Form/Form.tsx
 create mode 100644 src/blocks/Form/HubspotInlineForm.tsx
 create mode 100644 src/blocks/Form/__stories__/Form.mdx
 create mode 100644 src/blocks/Form/__stories__/Form.stories.tsx
 create mode 100644 src/blocks/Form/__stories__/data.json
 create mode 100644 src/blocks/Form/schema.ts
 create mode 100644 src/components/YandexForm/schema.ts
 create mode 100644 src/editor/data/templates/form-block.json
 create mode 100644 src/sub-blocks/HubspotForm/schema.ts

diff --git a/.storybook/stories/documentation/Blocks.mdx b/.storybook/stories/documentation/Blocks.mdx
index c9c1c8875..b70ea7b28 100644
--- a/.storybook/stories/documentation/Blocks.mdx
+++ b/.storybook/stories/documentation/Blocks.mdx
@@ -54,3 +54,5 @@ _[Common field types](?id=documentation-types&viewMode=docs)_
 ## [Table](?path=/story/blocks-table--docs&viewMode=docs)
 
 ## [Tabs](?path=/story/blocks-tabs--docs&viewMode=docs)
+
+## [Form](?path=/story/blocks-form--docs&viewMode=docs)
diff --git a/src/blocks/Form/Form.scss b/src/blocks/Form/Form.scss
new file mode 100644
index 000000000..208185949
--- /dev/null
+++ b/src/blocks/Form/Form.scss
@@ -0,0 +1,230 @@
+@import '../../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
+
+$block: '.#{$ns}form-block';
+
+$textPadding: 10px;
+$maxLgWidth: 609px;
+$yandexFormDesktopMinWidth: 475px;
+
+#{$block} {
+    $root: &;
+
+    border-radius: $largeBorderRadius;
+    position: relative;
+
+    &__title {
+        margin: 0 0 $indentSM $textPadding;
+
+        &_mobile {
+            margin-left: 4px;
+        }
+    }
+
+    &__full-form {
+        background-color: var(--g-color-base-background);
+        padding: $indentL $indentXL $indentL calc(#{$indentXL} - #{$textPadding});
+        border-radius: $borderRadius;
+    }
+
+    &__media {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        border-radius: $largeBorderRadius;
+    }
+
+    &__image {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+    }
+
+    &__row {
+        &_direction {
+            &_form-content {
+                flex-direction: row-reverse;
+            }
+
+            &_center {
+                padding-top: $indentXL;
+                padding-bottom: $indentL;
+                flex-direction: column;
+
+                #{$root}__content-wrapper {
+                    margin-bottom: $indentM;
+                }
+            }
+        }
+    }
+
+    &:not(#{$root}_with-background) {
+        #{$root}__full-form {
+            box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
+        }
+        #{$root}__row {
+            &_direction {
+                &_form-content {
+                    #{$root}__content-wrapper {
+                        padding: $indentL 0 $indentXL $indentXL;
+                    }
+                }
+                &_content-form {
+                    #{$root}__content-wrapper {
+                        padding: $indentL $indentXL $indentXL 0;
+                    }
+                }
+            }
+        }
+    }
+
+    &_with-background {
+        #{$root}__row {
+            &_direction {
+                &_form-content {
+                    #{$root}__form-wrapper {
+                        padding: $indentXS 0 $indentSM $indentXS;
+                    }
+                }
+                &_content-form {
+                    #{$root}__form-wrapper {
+                        padding: $indentXS $indentXS $indentSM 0;
+                    }
+                }
+                &_form-content,
+                &_content-form {
+                    #{$root}__content-wrapper {
+                        padding: $indentXL;
+                    }
+                }
+            }
+        }
+    }
+
+    @media (min-width: map-get($gridBreakpoints, 'lg')) {
+        &_form-type_yandex {
+            #{$root}__row {
+                &_direction {
+                    &_form-content,
+                    &_content-form {
+                        #{$root}__content-col {
+                            flex: 1 0 0;
+                        }
+                    }
+
+                    &_form-content,
+                    &_content-form,
+                    &_center {
+                        #{$root}__form {
+                            min-width: $yandexFormDesktopMinWidth;
+                        }
+                        #{$root}__form-col {
+                            max-width: initial;
+                            width: fit-content;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @media (max-width: map-get($gridBreakpoints, 'lg')) and (min-width: map-get($gridBreakpoints, 'md')) {
+        &__row {
+            flex-direction: column;
+        }
+
+        &_with-background,
+        &:not(#{$root}_with-background) {
+            #{$root}__row {
+                #{$root}__form-wrapper,
+                #{$root}__content-wrapper {
+                    max-width: $maxLgWidth;
+                }
+
+                #{$root}__center,
+                #{$root}__form-wrapper,
+                #{$root}__content-wrapper {
+                    margin: 0 auto;
+                    padding-right: 0;
+                    padding-left: 0;
+                }
+
+                #{$root}__form-wrapper {
+                    padding-top: 0;
+                }
+
+                #{$root}__content-wrapper {
+                    text-align: center;
+                    padding-bottom: $indentM;
+                }
+            }
+        }
+
+        &_with-background &__row {
+        }
+
+        &:not(#{$root}_with-background) &__row {
+            #{$root}__content-wrapper {
+                padding: 0 0 $indentM 0;
+            }
+        }
+    }
+
+    @media (max-width: map-get($gridBreakpoints, 'md')) {
+        &__full-form {
+            padding: $indentM;
+        }
+
+        &_with-background,
+        &:not(#{$root}_with-background) {
+            #{$root}__row {
+                padding: 0;
+
+                #{$root}__form-wrapper,
+                #{$root}__content-wrapper {
+                    padding: 0;
+                }
+
+                #{$root}__content-wrapper {
+                    padding-bottom: $indentM;
+                    margin-bottom: 0;
+                }
+            }
+        }
+
+        &_with-background {
+            padding: 0 $indentXXXS;
+
+            #{$root}__row {
+                padding-top: $indentL;
+
+                &_padding-bottom {
+                    &_m {
+                        padding-bottom: $indentM;
+                    }
+                    &_l {
+                        padding-bottom: $indentL;
+                    }
+                }
+
+                &_direction {
+                    &_form-content,
+                    &_content-form,
+                    &_center {
+                        #{$root}__content-wrapper {
+                            padding-right: $indentXS;
+                            padding-left: $indentXS;
+                        }
+                    }
+
+                    &_form-content,
+                    &_content-form {
+                        padding-top: $indentM;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/blocks/Form/Form.tsx b/src/blocks/Form/Form.tsx
new file mode 100644
index 000000000..0ec88e3d4
--- /dev/null
+++ b/src/blocks/Form/Form.tsx
@@ -0,0 +1,146 @@
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
+
+import {Media, Title, YandexForm} from '../../components';
+import {MobileContext} from '../../context/mobileContext';
+import {Col, Grid, GridAlignItems, GridColumnSize, Row} from '../../grid';
+import type {FormBlockProps} from '../../models';
+import {
+    FormBlockDataTypes,
+    FormBlockDirection,
+    isHubspotDataForm,
+    isYandexDataForm,
+} from '../../models';
+import {Content, HubspotForm} from '../../sub-blocks';
+import {block} from '../../utils';
+
+import './Form.scss';
+
+const b = block('form-block');
+
+const FormBlock: React.FC<FormBlockProps> = (props) => {
+    const {
+        formData,
+        title,
+        textContent,
+        image,
+        direction = FormBlockDirection.Center,
+        backgroundColor,
+    } = props;
+    const [contentLoaded, setContentLoaded] = useState(false);
+    const isMobile = useContext(MobileContext);
+
+    const withBackground = Boolean(backgroundColor) || Boolean(image);
+    const colSizes = {[GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12};
+    const paddingBottom = Boolean(backgroundColor) && !image ? 'l' : 'm';
+    const onContentLoad = useCallback(() => {
+        setContentLoaded(true);
+    }, []);
+
+    const formType = useMemo(() => {
+        if (isYandexDataForm(formData)) return FormBlockDataTypes.YANDEX;
+        if (isHubspotDataForm(formData)) return FormBlockDataTypes.HUBSPOT_INLINE;
+        return undefined;
+    }, [formData]);
+
+    useEffect(() => {
+        if (formType === FormBlockDataTypes.HUBSPOT_INLINE) {
+            onContentLoad();
+        }
+    }, [formType, onContentLoad]);
+
+    const renderForm = useCallback(() => {
+        if (isYandexDataForm(formData)) {
+            const {onLoad, className, ...rest} = formData.yandex;
+            return (
+                <YandexForm
+                    {...rest}
+                    onLoad={() => {
+                        onContentLoad();
+                        onLoad?.();
+                    }}
+                    className={b('form', className)}
+                />
+            );
+        }
+
+        if (isHubspotDataForm(formData)) {
+            return <HubspotForm {...formData.hubspot} />;
+        }
+
+        return null;
+    }, [formData, onContentLoad]);
+
+    if (!formData) {
+        return null;
+    }
+
+    return (
+        <div
+            className={b({
+                'with-background': withBackground,
+                'form-type': formType,
+            })}
+        >
+            {withBackground && (
+                <Media
+                    image={image}
+                    color={backgroundColor}
+                    className={b('media')}
+                    imageClassName={b('image')}
+                />
+            )}
+            <Grid>
+                <Row
+                    alignItems={
+                        direction === FormBlockDirection.Center
+                            ? GridAlignItems.Center
+                            : GridAlignItems.Start
+                    }
+                    className={b('row', {
+                        direction,
+                        'padding-bottom': paddingBottom,
+                    })}
+                >
+                    <Col sizes={colSizes} className={b('content-col')}>
+                        {textContent && (
+                            <div className={b('content-wrapper')}>
+                                <Content
+                                    theme="default"
+                                    {...textContent}
+                                    centered={direction === FormBlockDirection.Center}
+                                    colSizes={{all: 12}}
+                                    className={b('content')}
+                                />
+                            </div>
+                        )}
+                    </Col>
+
+                    <Col sizes={colSizes} className={b('form-col')}>
+                        <div className={b('form-wrapper')}>
+                            <div
+                                className={b('full-form', {
+                                    hidden: !contentLoaded,
+                                    'without-title': !textContent,
+                                })}
+                            >
+                                {title && (
+                                    <Title
+                                        title={{
+                                            text: title,
+                                            textSize: 's',
+                                        }}
+                                        className={b('title', {mobile: isMobile})}
+                                        colSizes={{all: 12}}
+                                    />
+                                )}
+                                {renderForm()}
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+            </Grid>
+        </div>
+    );
+};
+
+export default FormBlock;
diff --git a/src/blocks/Form/HubspotInlineForm.tsx b/src/blocks/Form/HubspotInlineForm.tsx
new file mode 100644
index 000000000..9be54b668
--- /dev/null
+++ b/src/blocks/Form/HubspotInlineForm.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import useMount from '../../hooks/useMount';
+import type {HubspotFormProps} from '../../models';
+import {HubspotForm} from '../../sub-blocks';
+
+type Props = HubspotFormProps & {
+    onReady?: () => void;
+};
+
+const HubspotInlineForm: React.FC<Props> = (props) => {
+    const {onReady, ...rest} = props;
+
+    useMount(() => {
+        onReady?.();
+    });
+
+    return <HubspotForm {...rest} createDOMElement={true} />;
+};
+
+export default HubspotInlineForm;
diff --git a/src/blocks/Form/__stories__/Form.mdx b/src/blocks/Form/__stories__/Form.mdx
new file mode 100644
index 000000000..3b177fe89
--- /dev/null
+++ b/src/blocks/Form/__stories__/Form.mdx
@@ -0,0 +1,24 @@
+import {Meta} from '@storybook/blocks';
+
+import {StoryTemplate} from '../../../demo/StoryTemplate.mdx';
+import * as FormBlockStories from './Form.stories.tsx';
+
+<Meta of={FormBlockStories} />
+<StoryTemplate>
+## Parameters
+
+`type: "form-block"`
+
+`title?: string` - Title.
+
+`textContent?` - See the [Content](?path=/story/components-content--default&viewMode=docs) component.
+
+`formData: {yandex?: Object, hubspot?: Object}` - See [Yandex](?path=/story/components-yandexform--docs&viewMode=docs) / [Hubspot](?path=/story/components-hubspotform--docs&viewMode=docs) form data.
+
+`direction?: 'form-content' | 'content-form' | 'center'` - Direction.
+
+`image?: string | {src: string; alt?: string;}` — Image.
+
+`backgroundColor?: string` — Bg color.
+
+</StoryTemplate>
diff --git a/src/blocks/Form/__stories__/Form.stories.tsx b/src/blocks/Form/__stories__/Form.stories.tsx
new file mode 100644
index 000000000..ca8994387
--- /dev/null
+++ b/src/blocks/Form/__stories__/Form.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {Meta, StoryFn} from '@storybook/react';
+
+import {PageConstructor} from '../../../containers/PageConstructor';
+import {FormBlockDirection, FormBlockModel} from '../../../models';
+import FormBlock from '../Form';
+
+import data from './data.json';
+
+export default {
+    title: 'Blocks/Form',
+    component: FormBlock,
+    args: data.default,
+    argTypes: {
+        type: {control: false},
+        direction: {options: FormBlockDirection, control: {type: 'select'}},
+    },
+} as Meta;
+
+const DefaultTemplate: StoryFn<FormBlockModel> = (args) => (
+    <PageConstructor content={{blocks: [args]}} />
+);
+
+export const Default = DefaultTemplate.bind({});
+export const ContentForm = DefaultTemplate.bind({});
+export const Background = DefaultTemplate.bind({});
+export const Image = DefaultTemplate.bind({});
+export const Black = DefaultTemplate.bind({});
+
+ContentForm.args = {...data.contentForm.content} as FormBlockModel;
+
+Background.args = {...data.background.content} as FormBlockModel;
+
+Image.args = {...data.image.content} as FormBlockModel;
+
+Black.args = {...data.black.content} as FormBlockModel;
diff --git a/src/blocks/Form/__stories__/data.json b/src/blocks/Form/__stories__/data.json
new file mode 100644
index 000000000..be7361f3d
--- /dev/null
+++ b/src/blocks/Form/__stories__/data.json
@@ -0,0 +1,44 @@
+{
+  "default": {
+    "type": "form-block",
+    "formData": {
+      "yandex": {
+        "id": "10034371.a94dac9d3bd19f65c9616db0297348ad8d063db0",
+        "metrikaGoals": ["events_form_submit"]
+      }
+    },
+    "textContent": {
+      "title": "Tell a story and build a narrative",
+      "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information"
+    }
+  },
+  "contentForm": {
+    "content": {
+      "direction": "content-form"
+    }
+  },
+  "background": {
+    "content": {
+      "backgroundColor": "#EFF2F8"
+    }
+  },
+  "image": {
+    "content": {
+      "image": {
+        "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png",
+        "disableCompress": true
+      }
+    }
+  },
+  "black": {
+    "content": {
+      "textContent": {
+        "theme": "dark",
+        "title": "Black form background color",
+        "text": "<p>We&nbsp;are all storytellers. Stories are a&nbsp;powerful way to&nbsp;communicate ideas and share information. The right story can lead to&nbsp;a&nbsp;better understanding of&nbsp;a&nbsp;situation, make us&nbsp;laugh, or&nbsp;even inspire us&nbsp;to&nbsp;do&nbsp;something in&nbsp;the future.</p>"
+      },
+      "direction": "form-content",
+      "backgroundColor": "#262626"
+    }
+  }
+}
diff --git a/src/blocks/Form/schema.ts b/src/blocks/Form/schema.ts
new file mode 100644
index 000000000..f16d872cd
--- /dev/null
+++ b/src/blocks/Form/schema.ts
@@ -0,0 +1,51 @@
+import omit from 'lodash/omit';
+
+import {ImageProps} from '../../components/Image/schema';
+import {YandexFormProps} from '../../components/YandexForm/schema';
+import {BlockBaseProps} from '../../schema/validators/common';
+import {ContentBase} from '../../sub-blocks/Content/schema';
+import {HubspotFormProps} from '../../sub-blocks/HubspotForm/schema';
+
+const FormBlockContentProps = omit(ContentBase, ['size', 'centered', 'colSizes']);
+
+export const FormBlock = {
+    'form-block': {
+        additionalProperties: false,
+        required: ['formData'],
+        properties: {
+            ...BlockBaseProps,
+            title: {
+                type: 'string',
+            },
+            formData: {
+                oneOf: [
+                    {
+                        type: 'object',
+                        optionName: 'yandex',
+                        properties: {
+                            yandex: YandexFormProps,
+                        },
+                    },
+                    {
+                        type: 'object',
+                        optionName: 'hubspot-inline',
+                        properties: {
+                            hubspot: HubspotFormProps,
+                        },
+                    },
+                ],
+            },
+            textContent: {
+                additionalProperties: false,
+                properties: FormBlockContentProps,
+            },
+            direction: {
+                enum: ['content-form', 'form-content', 'center'],
+            },
+            image: ImageProps,
+            backgroundColor: {
+                type: 'string',
+            },
+        },
+    },
+};
diff --git a/src/blocks/index.ts b/src/blocks/index.ts
index 78112c350..6ce472095 100644
--- a/src/blocks/index.ts
+++ b/src/blocks/index.ts
@@ -16,3 +16,4 @@ export {default as CardLayoutBlock} from './CardLayout/CardLayout';
 export {default as ContentLayoutBlock} from './ContentLayout/ContentLayout';
 export {default as ShareBlock} from './Share/Share';
 export {default as FilterBlock} from './FilterBlock/FilterBlock';
+export {default as FormBlock} from './Form/Form';
diff --git a/src/components/YandexForm/YandexForm.tsx b/src/components/YandexForm/YandexForm.tsx
index ac13f0251..2b1221b92 100644
--- a/src/components/YandexForm/YandexForm.tsx
+++ b/src/components/YandexForm/YandexForm.tsx
@@ -4,8 +4,8 @@ import {LocaleContext} from '../../context/localeContext';
 import {MobileContext} from '../../context/mobileContext';
 import {useAnalytics} from '../../hooks';
 import {useMetrika} from '../../hooks/useMetrika';
-import {PixelEvent} from '../../models';
-import {AnalyticsEventsBase, DefaultEventNames} from '../../models/common';
+import {YandexFormProps} from '../../models';
+import {DefaultEventNames} from '../../models/common';
 import {block} from '../../utils';
 import {HEADER_HEIGHT} from '../constants';
 
@@ -14,22 +14,6 @@ const CONTAINER_ID = 'pc-yandex-form-container';
 
 const b = block('yandex-form');
 
-export interface YandexFormProps extends AnalyticsEventsBase {
-    id: number | string;
-    containerId?: string;
-    theme?: string;
-    className?: string;
-    headerHeight?: number;
-    customFormOrigin?: string;
-    params?: {[key: string]: string};
-
-    onSubmit?: () => void;
-    onLoad?: () => void;
-
-    metrikaGoals?: string | string[];
-    pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
-}
-
 const YandexForm = (props: YandexFormProps) => {
     const {
         onLoad,
diff --git a/src/components/YandexForm/schema.ts b/src/components/YandexForm/schema.ts
new file mode 100644
index 000000000..33c419480
--- /dev/null
+++ b/src/components/YandexForm/schema.ts
@@ -0,0 +1,15 @@
+import {BaseProps} from '../../schema/validators/common';
+
+export const YandexFormProps = {
+    type: 'object',
+    required: ['id'],
+    properties: {
+        ...BaseProps,
+        id: {
+            type: 'string',
+        },
+        containerId: {
+            type: 'string',
+        },
+    },
+};
diff --git a/src/constructor-items.ts b/src/constructor-items.ts
index afa5c794e..95d4dfab7 100644
--- a/src/constructor-items.ts
+++ b/src/constructor-items.ts
@@ -5,6 +5,7 @@ import {
     ContentLayoutBlock,
     ExtendedFeaturesBlock,
     FilterBlock,
+    FormBlock,
     HeaderBlock,
     HeaderSliderBlock,
     IconsBlock,
@@ -57,6 +58,7 @@ export const blockMap = {
     [BlockType.ShareBlock]: ShareBlock,
     [BlockType.MapBlock]: MapBlock,
     [BlockType.FilterBlock]: FilterBlock,
+    [BlockType.FormBlock]: FormBlock,
 };
 
 export const subBlockMap = {
diff --git a/src/editor/data/templates/form-block.json b/src/editor/data/templates/form-block.json
new file mode 100644
index 000000000..c2de6da80
--- /dev/null
+++ b/src/editor/data/templates/form-block.json
@@ -0,0 +1,20 @@
+{
+  "template": {
+    "type": "form-block",
+    "formData": {
+      "yandex": {
+        "hash": "hashString",
+        "title": ""
+      }
+    },
+    "direction": "center",
+    "textContent": {
+      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+      "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+    },
+    "image": {
+      "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
+    },
+    "backgroundColor": "#262626"
+  }
+}
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
index 1558424b3..eaff627e7 100644
--- a/src/models/constructor-items/blocks.ts
+++ b/src/models/constructor-items/blocks.ts
@@ -20,6 +20,7 @@ import {
     HeaderOffset,
     HeaderWidth,
     ImageDeviceProps,
+    ImageProps,
     Justify,
     LegendTableMarkerType,
     LinkProps,
@@ -33,8 +34,9 @@ import {
     ThemedMediaVideoProps,
     TitleItemBaseProps,
     TitleItemProps,
+    YandexFormProps,
 } from './common';
-import {BannerCardProps, SubBlock, SubBlockModels} from './sub-blocks';
+import {BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels} from './sub-blocks';
 
 export enum BlockType {
     PromoFeaturesBlock = 'promo-features-block',
@@ -55,6 +57,7 @@ export enum BlockType {
     ShareBlock = 'share-block',
     MapBlock = 'map-block',
     FilterBlock = 'filter-block',
+    FormBlock = 'form-block',
 }
 
 export const BlockTypes = Object.values(BlockType);
@@ -376,6 +379,36 @@ export interface ShareBlockProps {
     title?: string;
 }
 
+export enum FormBlockDataTypes {
+    YANDEX = 'yandex',
+    HUBSPOT_INLINE = 'hubspot-inline',
+}
+
+export enum FormBlockDirection {
+    FormContent = 'form-content',
+    ContentForm = 'content-form',
+    Center = 'center',
+}
+
+export interface FormBlockYandexData {
+    yandex: YandexFormProps;
+}
+
+export interface FormBlockHubspotData {
+    hubspot: HubspotFormProps;
+}
+
+export type FormBlockData = FormBlockYandexData | FormBlockHubspotData;
+
+export interface FormBlockProps {
+    formData: FormBlockData;
+    title?: string;
+    textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
+    direction?: FormBlockDirection;
+    image?: ImageProps;
+    backgroundColor?: string;
+}
+
 //block models
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;
@@ -449,6 +482,10 @@ export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
 
+export type FormBlockModel = {
+    type: BlockType.FormBlock;
+} & FormBlockProps;
+
 type BlockModels =
     | SliderBlockModel
     | ExtendedFeaturesBlockModel
@@ -467,6 +504,7 @@ type BlockModels =
     | CardLayoutBlockModel
     | ContentLayoutBlockModel
     | ShareBLockModel
-    | FilterBlockModel;
+    | FilterBlockModel
+    | FormBlockModel;
 
 export type Block = BlockModels & BlockBaseProps;
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
index b615819cf..fc680d33c 100644
--- a/src/models/constructor-items/common.ts
+++ b/src/models/constructor-items/common.ts
@@ -3,7 +3,7 @@ import React, {CSSProperties, ReactNode} from 'react';
 import {ButtonView, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';
 
 import {ThemeSupporting} from '../../utils';
-import {AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps} from '../common';
+import {AnalyticsEventsBase, ClassNameProps, PixelEvent, PixelEventType, QAProps} from '../common';
 
 // enums
 export enum AuthorType {
@@ -441,3 +441,19 @@ export interface TitleProps {
     title?: TitleItemProps | string;
     subtitle?: string;
 }
+
+export interface YandexFormProps extends AnalyticsEventsBase {
+    id: number | string;
+    containerId?: string;
+    theme?: string;
+    className?: string;
+    headerHeight?: number;
+    customFormOrigin?: string;
+    params?: {[key: string]: string};
+
+    onSubmit?: () => void;
+    onLoad?: () => void;
+
+    metrikaGoals?: string | string[];
+    pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
+}
diff --git a/src/models/guards.ts b/src/models/guards.ts
index 8878e3119..98a84b8f7 100644
--- a/src/models/guards.ts
+++ b/src/models/guards.ts
@@ -1,4 +1,11 @@
-import {Block, BlockTypes, ConstructorItem} from './';
+import {
+    Block,
+    BlockTypes,
+    ConstructorItem,
+    FormBlockData,
+    FormBlockHubspotData,
+    FormBlockYandexData,
+} from './';
 import {MetrikaGoal, NewMetrikaGoal} from './index';
 
 export function isBlock(block: ConstructorItem): block is Block {
@@ -8,3 +15,11 @@ export function isBlock(block: ConstructorItem): block is Block {
 export function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[] {
     return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
 }
+
+export function isYandexDataForm(data: FormBlockData): data is FormBlockYandexData {
+    return Boolean((data as FormBlockYandexData).yandex);
+}
+
+export function isHubspotDataForm(data: FormBlockData): data is FormBlockHubspotData {
+    return Boolean((data as FormBlockHubspotData).hubspot);
+}
diff --git a/src/schema/constants.ts b/src/schema/constants.ts
index 2ccfe6467..ce95ccbd3 100644
--- a/src/schema/constants.ts
+++ b/src/schema/constants.ts
@@ -8,6 +8,7 @@ import {
     ContentLayoutBlock,
     ExtendedFeaturesBlock,
     FilterBlock,
+    FormBlock,
     HeaderBlock,
     HeaderSliderBlock,
     IconsBlock,
@@ -50,6 +51,7 @@ export const blockSchemas: Record<BlockType, object> = {
     ...ContentLayoutBlock,
     ...ShareBlock,
     ...FilterBlock,
+    ...FormBlock,
 };
 
 export const cardSchemas = {
@@ -86,6 +88,7 @@ export const constructorBlockSchemaNames = [
     'content-layout-block',
     'share-block',
     'filter-block',
+    'form-block',
 ];
 
 export const constructorCardSchemaNames = [
diff --git a/src/schema/validators/blocks.ts b/src/schema/validators/blocks.ts
index 8aa30da91..53e949605 100644
--- a/src/schema/validators/blocks.ts
+++ b/src/schema/validators/blocks.ts
@@ -16,3 +16,4 @@ export * from '../../blocks/CardLayout/schema';
 export * from '../../blocks/ContentLayout/schema';
 export * from '../../blocks/Share/schema';
 export * from '../../blocks/FilterBlock/schema';
+export * from '../../blocks/Form/schema';
diff --git a/src/sub-blocks/HubspotForm/schema.ts b/src/sub-blocks/HubspotForm/schema.ts
new file mode 100644
index 000000000..9293d7c6e
--- /dev/null
+++ b/src/sub-blocks/HubspotForm/schema.ts
@@ -0,0 +1,21 @@
+import {BaseProps} from '../../schema/validators/common';
+
+export const HubspotFormProps = {
+    type: 'object',
+    required: ['portalId', 'formId'],
+    properties: {
+        ...BaseProps,
+        region: {
+            type: 'string',
+        },
+        portalId: {
+            type: 'string',
+        },
+        formId: {
+            type: 'string',
+        },
+        formInstanceId: {
+            type: 'string',
+        },
+    },
+};
diff --git a/styles/variables.scss b/styles/variables.scss
index d8ae1271c..c0e18c2da 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -53,3 +53,5 @@ $gridGutterMobile: 8px;
 $contentWidth: calc(#{$newContentWidth} + #{$gridGutter} * 2 + #{$gridContainerPadding} * 2);
 
 $gridContainerMargin: 16px;
+
+$largeBorderRadius: 32px;

From 89569b3f7b8dc7af7a7757f73f63f5ec7c733cde Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Mon, 23 Oct 2023 21:34:05 +0300
Subject: [PATCH 02/22] fix: fix storybook YandexForm import

---
 src/components/YandexForm/__stories__/YandexForm.stories.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/YandexForm/__stories__/YandexForm.stories.tsx b/src/components/YandexForm/__stories__/YandexForm.stories.tsx
index d43fdf69e..20f37e473 100644
--- a/src/components/YandexForm/__stories__/YandexForm.stories.tsx
+++ b/src/components/YandexForm/__stories__/YandexForm.stories.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 
 import {Meta, StoryFn} from '@storybook/react';
 
-import YandexForm, {YandexFormProps} from '../YandexForm';
+import {YandexFormProps} from '../../../models';
+import YandexForm from '../YandexForm';
 
 import data from './data.json';
 

From cbd22604e44e99dcc521700f478fd01df5db2cb7 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Wed, 25 Oct 2023 03:11:53 +0300
Subject: [PATCH 03/22] fix: add form block review fixes

---
 src/blocks/Form/Form.scss               |  8 ++--
 src/blocks/Form/Form.tsx                | 49 +++++++------------------
 src/blocks/Form/InnerForm/InnerForm.tsx | 44 ++++++++++++++++++++++
 src/blocks/Form/__stories__/data.json   |  6 +--
 styles/variables.scss                   |  2 -
 5 files changed, 63 insertions(+), 46 deletions(-)
 create mode 100644 src/blocks/Form/InnerForm/InnerForm.tsx

diff --git a/src/blocks/Form/Form.scss b/src/blocks/Form/Form.scss
index 208185949..425cd535a 100644
--- a/src/blocks/Form/Form.scss
+++ b/src/blocks/Form/Form.scss
@@ -4,8 +4,9 @@
 $block: '.#{$ns}form-block';
 
 $textPadding: 10px;
-$maxLgWidth: 609px;
+$maxLargeWidth: 609px;
 $yandexFormDesktopMinWidth: 475px;
+$largeBorderRadius: 32px;
 
 #{$block} {
     $root: &;
@@ -140,7 +141,7 @@ $yandexFormDesktopMinWidth: 475px;
             #{$root}__row {
                 #{$root}__form-wrapper,
                 #{$root}__content-wrapper {
-                    max-width: $maxLgWidth;
+                    max-width: $maxLargeWidth;
                 }
 
                 #{$root}__center,
@@ -162,9 +163,6 @@ $yandexFormDesktopMinWidth: 475px;
             }
         }
 
-        &_with-background &__row {
-        }
-
         &:not(#{$root}_with-background) &__row {
             #{$root}__content-wrapper {
                 padding: 0 0 $indentM 0;
diff --git a/src/blocks/Form/Form.tsx b/src/blocks/Form/Form.tsx
index 0ec88e3d4..acb6ab860 100644
--- a/src/blocks/Form/Form.tsx
+++ b/src/blocks/Form/Form.tsx
@@ -1,6 +1,6 @@
-import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useContext, useMemo, useState} from 'react';
 
-import {Media, Title, YandexForm} from '../../components';
+import {Media, Title} from '../../components';
 import {MobileContext} from '../../context/mobileContext';
 import {Col, Grid, GridAlignItems, GridColumnSize, Row} from '../../grid';
 import type {FormBlockProps} from '../../models';
@@ -10,13 +10,17 @@ import {
     isHubspotDataForm,
     isYandexDataForm,
 } from '../../models';
-import {Content, HubspotForm} from '../../sub-blocks';
+import {Content} from '../../sub-blocks';
 import {block} from '../../utils';
 
+import InnerForm from './InnerForm/InnerForm';
+
 import './Form.scss';
 
 const b = block('form-block');
 
+const colSizes = {[GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12};
+
 const FormBlock: React.FC<FormBlockProps> = (props) => {
     const {
         formData,
@@ -30,8 +34,7 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
     const isMobile = useContext(MobileContext);
 
     const withBackground = Boolean(backgroundColor) || Boolean(image);
-    const colSizes = {[GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12};
-    const paddingBottom = Boolean(backgroundColor) && !image ? 'l' : 'm';
+    const paddingBottom = Boolean(backgroundColor) && !image ? 'l' : 'm'; // bigger padding for case with background and no image
     const onContentLoad = useCallback(() => {
         setContentLoaded(true);
     }, []);
@@ -42,34 +45,6 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
         return undefined;
     }, [formData]);
 
-    useEffect(() => {
-        if (formType === FormBlockDataTypes.HUBSPOT_INLINE) {
-            onContentLoad();
-        }
-    }, [formType, onContentLoad]);
-
-    const renderForm = useCallback(() => {
-        if (isYandexDataForm(formData)) {
-            const {onLoad, className, ...rest} = formData.yandex;
-            return (
-                <YandexForm
-                    {...rest}
-                    onLoad={() => {
-                        onContentLoad();
-                        onLoad?.();
-                    }}
-                    className={b('form', className)}
-                />
-            );
-        }
-
-        if (isHubspotDataForm(formData)) {
-            return <HubspotForm {...formData.hubspot} />;
-        }
-
-        return null;
-    }, [formData, onContentLoad]);
-
     if (!formData) {
         return null;
     }
@@ -114,13 +89,11 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
                             </div>
                         )}
                     </Col>
-
                     <Col sizes={colSizes} className={b('form-col')}>
                         <div className={b('form-wrapper')}>
                             <div
                                 className={b('full-form', {
                                     hidden: !contentLoaded,
-                                    'without-title': !textContent,
                                 })}
                             >
                                 {title && (
@@ -133,7 +106,11 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
                                         colSizes={{all: 12}}
                                     />
                                 )}
-                                {renderForm()}
+                                <InnerForm
+                                    className={b('form')}
+                                    formData={formData}
+                                    onContentLoad={onContentLoad}
+                                />
                             </div>
                         </div>
                     </Col>
diff --git a/src/blocks/Form/InnerForm/InnerForm.tsx b/src/blocks/Form/InnerForm/InnerForm.tsx
new file mode 100644
index 000000000..1456647f0
--- /dev/null
+++ b/src/blocks/Form/InnerForm/InnerForm.tsx
@@ -0,0 +1,44 @@
+import React, {useEffect} from 'react';
+
+import {YandexForm} from '../../../components';
+import {FormBlockData, isHubspotDataForm, isYandexDataForm} from '../../../models';
+import {HubspotForm} from '../../../sub-blocks';
+
+interface InnerFormProps {
+    formData: FormBlockData;
+    onContentLoad: () => void;
+    className?: string;
+}
+
+const InnerForm: React.FC<InnerFormProps> = (props) => {
+    const {formData, onContentLoad, className} = props;
+
+    useEffect(() => {
+        if (isHubspotDataForm(formData)) {
+            onContentLoad();
+        }
+    }, [onContentLoad]);
+
+    if (isYandexDataForm(formData)) {
+        const {onLoad, ...rest} = formData.yandex;
+        return (
+            <div className={className}>
+                <YandexForm
+                    {...rest}
+                    onLoad={() => {
+                        onContentLoad();
+                        onLoad?.();
+                    }}
+                />
+            </div>
+        );
+    }
+
+    if (isHubspotDataForm(formData)) {
+        return <HubspotForm {...formData.hubspot} />;
+    }
+
+    return null;
+};
+
+export default InnerForm;
diff --git a/src/blocks/Form/__stories__/data.json b/src/blocks/Form/__stories__/data.json
index be7361f3d..9d7c1db30 100644
--- a/src/blocks/Form/__stories__/data.json
+++ b/src/blocks/Form/__stories__/data.json
@@ -8,8 +8,8 @@
       }
     },
     "textContent": {
-      "title": "Tell a story and build a narrative",
-      "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information"
+      "title": "Lorem ipsum dolor sit amet",
+      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     }
   },
   "contentForm": {
@@ -35,7 +35,7 @@
       "textContent": {
         "theme": "dark",
         "title": "Black form background color",
-        "text": "<p>We&nbsp;are all storytellers. Stories are a&nbsp;powerful way to&nbsp;communicate ideas and share information. The right story can lead to&nbsp;a&nbsp;better understanding of&nbsp;a&nbsp;situation, make us&nbsp;laugh, or&nbsp;even inspire us&nbsp;to&nbsp;do&nbsp;something in&nbsp;the future.</p>"
+        "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit:</p> <ul> <li> <p>Lorem ipsum</p> </li> <li> <p>Lorem ipsum</p> </li> <li> <p>Lorem ipsum</p> </li> </ul>"
       },
       "direction": "form-content",
       "backgroundColor": "#262626"
diff --git a/styles/variables.scss b/styles/variables.scss
index c0e18c2da..d8ae1271c 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -53,5 +53,3 @@ $gridGutterMobile: 8px;
 $contentWidth: calc(#{$newContentWidth} + #{$gridGutter} * 2 + #{$gridContainerPadding} * 2);
 
 $gridContainerMargin: 16px;
-
-$largeBorderRadius: 32px;

From 413bfd12a0e92c2317c77dd7306cd67f3918e629 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Wed, 25 Oct 2023 11:35:10 +0300
Subject: [PATCH 04/22] fix: form block inner fix useEffect onContentLoad deps

---
 src/blocks/Form/InnerForm/InnerForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/blocks/Form/InnerForm/InnerForm.tsx b/src/blocks/Form/InnerForm/InnerForm.tsx
index 1456647f0..f9b79495f 100644
--- a/src/blocks/Form/InnerForm/InnerForm.tsx
+++ b/src/blocks/Form/InnerForm/InnerForm.tsx
@@ -17,7 +17,7 @@ const InnerForm: React.FC<InnerFormProps> = (props) => {
         if (isHubspotDataForm(formData)) {
             onContentLoad();
         }
-    }, [onContentLoad]);
+    }, [onContentLoad, formData]);
 
     if (isYandexDataForm(formData)) {
         const {onLoad, ...rest} = formData.yandex;

From 89929b59f113da6b35127993d1e352fa9b1c431b Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Thu, 26 Oct 2023 23:43:45 +0300
Subject: [PATCH 05/22] fix: distinguish yandex form surveys path url as param
 with cloud default

---
 src/components/YandexForm/YandexForm.tsx        | 5 ++++-
 src/components/YandexForm/__stories__/data.json | 2 +-
 src/models/constructor-items/common.ts          | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/YandexForm/YandexForm.tsx b/src/components/YandexForm/YandexForm.tsx
index 2b1221b92..abb1b64f9 100644
--- a/src/components/YandexForm/YandexForm.tsx
+++ b/src/components/YandexForm/YandexForm.tsx
@@ -10,6 +10,7 @@ import {block} from '../../utils';
 import {HEADER_HEIGHT} from '../constants';
 
 export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
+export const YANDEX_FORM_SECTION = 'cloud';
 const CONTAINER_ID = 'pc-yandex-form-container';
 
 const b = block('yandex-form');
@@ -28,10 +29,12 @@ const YandexForm = (props: YandexFormProps) => {
         pixelEvents,
         analyticsEvents,
         customFormOrigin,
+        customFormSection,
     } = props;
     const formContainerRef = useRef<HTMLDivElement>(null);
     const iframeRef = useRef<HTMLIFrameElement>();
     const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;
+    const yaFormSection = customFormSection || YANDEX_FORM_SECTION;
 
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.YandexFormSubmit);
@@ -62,7 +65,7 @@ const YandexForm = (props: YandexFormProps) => {
                 });
             }
 
-            const src = `${yaFormOrigin}/surveys/${id}/?${queryParams}`;
+            const src = `${yaFormOrigin}/${yaFormSection}/${id}/?${queryParams}`;
 
             if (iframeRef.current) {
                 iframeRef.current.src = src;
diff --git a/src/components/YandexForm/__stories__/data.json b/src/components/YandexForm/__stories__/data.json
index 4c0df35f8..2fd32e19d 100644
--- a/src/components/YandexForm/__stories__/data.json
+++ b/src/components/YandexForm/__stories__/data.json
@@ -1,7 +1,7 @@
 {
   "default": {
     "content": {
-      "id": "10034371.a94dac9d3bd19f65c9616db0297348ad8d063db0"
+      "id": "61a4e639d4d24e0dbba36f5c"
     }
   }
 }
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
index fc680d33c..a803d00ef 100644
--- a/src/models/constructor-items/common.ts
+++ b/src/models/constructor-items/common.ts
@@ -449,6 +449,7 @@ export interface YandexFormProps extends AnalyticsEventsBase {
     className?: string;
     headerHeight?: number;
     customFormOrigin?: string;
+    customFormSection?: string;
     params?: {[key: string]: string};
 
     onSubmit?: () => void;

From f34f35d2ab99a2cf207fbf702f132897099e9cd8 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Thu, 26 Oct 2023 23:49:55 +0300
Subject: [PATCH 06/22] feat: add hubspot form to form-block storybook cases.
 merge background props

---
 src/blocks/Form/Form.tsx                     | 24 ++++--------
 src/blocks/Form/__stories__/Form.stories.tsx | 27 ++++++++++----
 src/blocks/Form/__stories__/data.json        | 39 +++++++++++++-------
 src/models/constructor-items/blocks.ts       |  4 +-
 4 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/src/blocks/Form/Form.tsx b/src/blocks/Form/Form.tsx
index acb6ab860..f8babe4f2 100644
--- a/src/blocks/Form/Form.tsx
+++ b/src/blocks/Form/Form.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 
-import {Media, Title} from '../../components';
+import {BackgroundImage, Title} from '../../components';
 import {MobileContext} from '../../context/mobileContext';
 import {Col, Grid, GridAlignItems, GridColumnSize, Row} from '../../grid';
 import type {FormBlockProps} from '../../models';
@@ -22,19 +22,12 @@ const b = block('form-block');
 const colSizes = {[GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12};
 
 const FormBlock: React.FC<FormBlockProps> = (props) => {
-    const {
-        formData,
-        title,
-        textContent,
-        image,
-        direction = FormBlockDirection.Center,
-        backgroundColor,
-    } = props;
+    const {formData, title, textContent, direction = FormBlockDirection.Center, background} = props;
     const [contentLoaded, setContentLoaded] = useState(false);
     const isMobile = useContext(MobileContext);
 
-    const withBackground = Boolean(backgroundColor) || Boolean(image);
-    const paddingBottom = Boolean(backgroundColor) && !image ? 'l' : 'm'; // bigger padding for case with background and no image
+    const hasImage = background && (background.src || background.desktop);
+    const paddingBottom = background && background.style?.backgroundColor && !hasImage ? 'l' : 'm'; // bigger padding for case with background color and no image
     const onContentLoad = useCallback(() => {
         setContentLoaded(true);
     }, []);
@@ -52,14 +45,13 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
     return (
         <div
             className={b({
-                'with-background': withBackground,
+                'with-background': Boolean(background),
                 'form-type': formType,
             })}
         >
-            {withBackground && (
-                <Media
-                    image={image}
-                    color={backgroundColor}
+            {background && (
+                <BackgroundImage
+                    {...background}
                     className={b('media')}
                     imageClassName={b('image')}
                 />
diff --git a/src/blocks/Form/__stories__/Form.stories.tsx b/src/blocks/Form/__stories__/Form.stories.tsx
index ca8994387..e43936d2e 100644
--- a/src/blocks/Form/__stories__/Form.stories.tsx
+++ b/src/blocks/Form/__stories__/Form.stories.tsx
@@ -19,19 +19,32 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<FormBlockModel> = (args) => (
-    <PageConstructor content={{blocks: [args]}} />
+    <PageConstructor
+        content={{
+            blocks: [
+                {
+                    ...args,
+                    formData: {yandex: data.formData.yandex}, //yandex form
+                },
+                {
+                    ...args,
+                    formData: {hubspot: data.formData.hubspot}, //hubspot form
+                },
+            ],
+        }}
+    />
 );
 
 export const Default = DefaultTemplate.bind({});
 export const ContentForm = DefaultTemplate.bind({});
-export const Background = DefaultTemplate.bind({});
-export const Image = DefaultTemplate.bind({});
-export const Black = DefaultTemplate.bind({});
+export const WithBackgroundColor = DefaultTemplate.bind({});
+export const WithBackgroundImage = DefaultTemplate.bind({});
+export const DarkTheme = DefaultTemplate.bind({});
 
 ContentForm.args = {...data.contentForm.content} as FormBlockModel;
 
-Background.args = {...data.background.content} as FormBlockModel;
+WithBackgroundColor.args = {...data.withBackground.content} as FormBlockModel;
 
-Image.args = {...data.image.content} as FormBlockModel;
+WithBackgroundImage.args = {...data.withBackgroundImage.content} as FormBlockModel;
 
-Black.args = {...data.black.content} as FormBlockModel;
+DarkTheme.args = {...data.darkTheme.content} as FormBlockModel;
diff --git a/src/blocks/Form/__stories__/data.json b/src/blocks/Form/__stories__/data.json
index 9d7c1db30..e00b0a808 100644
--- a/src/blocks/Form/__stories__/data.json
+++ b/src/blocks/Form/__stories__/data.json
@@ -1,12 +1,6 @@
 {
   "default": {
     "type": "form-block",
-    "formData": {
-      "yandex": {
-        "id": "10034371.a94dac9d3bd19f65c9616db0297348ad8d063db0",
-        "metrikaGoals": ["events_form_submit"]
-      }
-    },
     "textContent": {
       "title": "Lorem ipsum dolor sit amet",
       "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
@@ -17,20 +11,24 @@
       "direction": "content-form"
     }
   },
-  "background": {
+  "withBackground": {
     "content": {
-      "backgroundColor": "#EFF2F8"
+      "background": {
+        "style": {
+          "backgroundColor": "#EFF2F8"
+        }
+      }
     }
   },
-  "image": {
+  "withBackgroundImage": {
     "content": {
-      "image": {
-        "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png",
+      "background": {
+        "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png",
         "disableCompress": true
       }
     }
   },
-  "black": {
+  "darkTheme": {
     "content": {
       "textContent": {
         "theme": "dark",
@@ -38,7 +36,22 @@
         "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit:</p> <ul> <li> <p>Lorem ipsum</p> </li> <li> <p>Lorem ipsum</p> </li> <li> <p>Lorem ipsum</p> </li> </ul>"
       },
       "direction": "form-content",
-      "backgroundColor": "#262626"
+      "background": {
+        "style": {
+          "backgroundColor": "#262626"
+        }
+      }
+    }
+  },
+  "formData": {
+    "yandex": {
+      "id": "61a4e639d4d24e0dbba36f5c",
+      "metrikaGoals": ["events_form_submit"]
+    },
+    "hubspot": {
+      "region": "eu1",
+      "portalId": "25764979",
+      "formId": "a3eb06a6-e8ce-45d4-81bd-7fadb7dab313"
     }
   }
 }
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
index eaff627e7..15f8c87b3 100644
--- a/src/models/constructor-items/blocks.ts
+++ b/src/models/constructor-items/blocks.ts
@@ -20,7 +20,6 @@ import {
     HeaderOffset,
     HeaderWidth,
     ImageDeviceProps,
-    ImageProps,
     Justify,
     LegendTableMarkerType,
     LinkProps,
@@ -405,8 +404,7 @@ export interface FormBlockProps {
     title?: string;
     textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
     direction?: FormBlockDirection;
-    image?: ImageProps;
-    backgroundColor?: string;
+    background?: BackgroundImageProps;
 }
 
 //block models

From b231466f0f7540fdd066330ea95009edfab52579 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Fri, 27 Oct 2023 11:38:14 +0300
Subject: [PATCH 07/22] fix: change yandex form default customFormSection to
 surveys

---
 src/blocks/Form/__stories__/data.json           | 3 ++-
 src/components/YandexForm/YandexForm.tsx        | 2 +-
 src/components/YandexForm/__stories__/data.json | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/blocks/Form/__stories__/data.json b/src/blocks/Form/__stories__/data.json
index e00b0a808..67e72fd46 100644
--- a/src/blocks/Form/__stories__/data.json
+++ b/src/blocks/Form/__stories__/data.json
@@ -46,7 +46,8 @@
   "formData": {
     "yandex": {
       "id": "61a4e639d4d24e0dbba36f5c",
-      "metrikaGoals": ["events_form_submit"]
+      "metrikaGoals": ["events_form_submit"],
+      "customFormSection": "cloud"
     },
     "hubspot": {
       "region": "eu1",
diff --git a/src/components/YandexForm/YandexForm.tsx b/src/components/YandexForm/YandexForm.tsx
index abb1b64f9..009155dd7 100644
--- a/src/components/YandexForm/YandexForm.tsx
+++ b/src/components/YandexForm/YandexForm.tsx
@@ -10,7 +10,7 @@ import {block} from '../../utils';
 import {HEADER_HEIGHT} from '../constants';
 
 export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
-export const YANDEX_FORM_SECTION = 'cloud';
+export const YANDEX_FORM_SECTION = 'surveys';
 const CONTAINER_ID = 'pc-yandex-form-container';
 
 const b = block('yandex-form');
diff --git a/src/components/YandexForm/__stories__/data.json b/src/components/YandexForm/__stories__/data.json
index 2fd32e19d..b1b896652 100644
--- a/src/components/YandexForm/__stories__/data.json
+++ b/src/components/YandexForm/__stories__/data.json
@@ -1,7 +1,8 @@
 {
   "default": {
     "content": {
-      "id": "61a4e639d4d24e0dbba36f5c"
+      "id": "61a4e639d4d24e0dbba36f5c",
+      "customFormSection": "cloud"
     }
   }
 }

From b13903a4722a8003bc1caee4e7f8813480f8d1f6 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Fri, 27 Oct 2023 12:01:20 +0300
Subject: [PATCH 08/22] fix: add yaFormSection to useCallback deps

---
 src/components/YandexForm/YandexForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/YandexForm/YandexForm.tsx b/src/components/YandexForm/YandexForm.tsx
index 009155dd7..08e0811dd 100644
--- a/src/components/YandexForm/YandexForm.tsx
+++ b/src/components/YandexForm/YandexForm.tsx
@@ -81,7 +81,7 @@ const YandexForm = (props: YandexFormProps) => {
                 container.appendChild(iframeRef.current);
             }
         },
-        [locale.lang, theme, isMobile, yaFormOrigin, id, containerId, params],
+        [locale.lang, theme, isMobile, yaFormOrigin, yaFormSection, id, containerId, params],
     );
 
     const handleSubmit = useCallback(() => {

From b8e6ddb6b6c4ac6cbc3cea713a26ef3a151c82a5 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Fri, 27 Oct 2023 14:16:05 +0300
Subject: [PATCH 09/22] style: fix form-block one-line if

---
 src/blocks/Form/Form.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/blocks/Form/Form.tsx b/src/blocks/Form/Form.tsx
index f8babe4f2..22c773e15 100644
--- a/src/blocks/Form/Form.tsx
+++ b/src/blocks/Form/Form.tsx
@@ -33,8 +33,12 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
     }, []);
 
     const formType = useMemo(() => {
-        if (isYandexDataForm(formData)) return FormBlockDataTypes.YANDEX;
-        if (isHubspotDataForm(formData)) return FormBlockDataTypes.HUBSPOT_INLINE;
+        if (isYandexDataForm(formData)) {
+            return FormBlockDataTypes.YANDEX;
+        }
+        if (isHubspotDataForm(formData)) {
+            return FormBlockDataTypes.HUBSPOT_INLINE;
+        }
         return undefined;
     }, [formData]);
 

From 01af139275b91f164ea1cfefb4c15601c7643994 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Fri, 27 Oct 2023 15:52:46 +0300
Subject: [PATCH 10/22] style: rename form-block storybook content form
 direction case

---
 src/blocks/Form/__stories__/Form.stories.tsx | 4 ++--
 src/blocks/Form/__stories__/data.json        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/blocks/Form/__stories__/Form.stories.tsx b/src/blocks/Form/__stories__/Form.stories.tsx
index e43936d2e..c2a83a984 100644
--- a/src/blocks/Form/__stories__/Form.stories.tsx
+++ b/src/blocks/Form/__stories__/Form.stories.tsx
@@ -36,12 +36,12 @@ const DefaultTemplate: StoryFn<FormBlockModel> = (args) => (
 );
 
 export const Default = DefaultTemplate.bind({});
-export const ContentForm = DefaultTemplate.bind({});
+export const ContentDirection = DefaultTemplate.bind({});
 export const WithBackgroundColor = DefaultTemplate.bind({});
 export const WithBackgroundImage = DefaultTemplate.bind({});
 export const DarkTheme = DefaultTemplate.bind({});
 
-ContentForm.args = {...data.contentForm.content} as FormBlockModel;
+ContentDirection.args = {...data.сontentDirection.content} as FormBlockModel;
 
 WithBackgroundColor.args = {...data.withBackground.content} as FormBlockModel;
 
diff --git a/src/blocks/Form/__stories__/data.json b/src/blocks/Form/__stories__/data.json
index 67e72fd46..c79720fe7 100644
--- a/src/blocks/Form/__stories__/data.json
+++ b/src/blocks/Form/__stories__/data.json
@@ -6,7 +6,7 @@
       "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     }
   },
-  "contentForm": {
+  "сontentDirection": {
     "content": {
       "direction": "content-form"
     }

From 5bf51b0a9e850a39d068fe37faa9030765c04375 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Mon, 30 Oct 2023 12:03:29 +0300
Subject: [PATCH 11/22] fix: fix react-spring version

---
 package-lock.json | 132 +++++++++++++++++++++++++++++++++++++---------
 package.json      |  11 +++-
 2 files changed, 116 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fed232bc4..faf44ba3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,16 @@
         "@gravity-ui/components": "^2.4.0",
         "@gravity-ui/dynamic-forms": "^2.3.0",
         "@gravity-ui/i18n": "^1.0.0",
-        "@react-spring/web": "^9.7.3",
+        "@react-spring/animated": "9.7.2",
+        "@react-spring/core": "9.7.2",
+        "@react-spring/konva": "9.7.2",
+        "@react-spring/native": "9.7.2",
+        "@react-spring/rafz": "9.7.2",
+        "@react-spring/shared": "9.7.2",
+        "@react-spring/three": "9.7.2",
+        "@react-spring/types": "9.7.2",
+        "@react-spring/web": "9.7.2",
+        "@react-spring/zdog": "9.7.2",
         "ajv": "^8.12.0",
         "final-form": "^4.20.9",
         "github-buttons": "2.23.0",
@@ -5070,25 +5079,26 @@
       }
     },
     "node_modules/@react-spring/animated": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz",
-      "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==",
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.2.tgz",
+      "integrity": "sha512-ipvleJ99ipqlnHkz5qhSsgf/ny5aW0ZG8Q+/2Oj9cI7LCc7COdnrSO6V/v8MAX3JOoQNzfz6dye2s5Pt5jGaIA==",
       "dependencies": {
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/shared": "~9.7.2",
+        "@react-spring/types": "~9.7.2"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@react-spring/core": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz",
-      "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==",
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.2.tgz",
+      "integrity": "sha512-fF512edZT/gKVCA90ZRxfw1DmELeVwiL4OC2J6bMUlNr707C0h4QRoec6DjzG27uLX2MvS1CEatf9KRjwZR9/w==",
       "dependencies": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.2",
+        "@react-spring/rafz": "~9.7.2",
+        "@react-spring/shared": "~9.7.2",
+        "@react-spring/types": "~9.7.2"
       },
       "funding": {
         "type": "opencollective",
@@ -5098,37 +5108,107 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@react-spring/konva": {
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.7.2.tgz",
+      "integrity": "sha512-xMA0XkIyv02euso8BGlLA4iXVJ76p6WCjABMTjdvcp//KvIub596vLwoLzmqHYjqRhH7BP4UQKxzhHvM7AylQA==",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.2",
+        "@react-spring/core": "~9.7.2",
+        "@react-spring/shared": "~9.7.2",
+        "@react-spring/types": "~9.7.2"
+      },
+      "peerDependencies": {
+        "konva": ">=2.6",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-konva": "^16.8.0 || ^16.8.7-0 || ^16.9.0-0 || ^16.10.1-0 || ^16.12.0-0 || ^16.13.0-0 || ^17.0.0-0 || ^17.0.1-0 || ^17.0.2-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@react-spring/native": {
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.7.2.tgz",
+      "integrity": "sha512-Ltq/F+4jY7aqHW1/f1xUb+e3XGbVxnllXfDYU+3nXi4sa7O+du755hpNbCHJ5ZgtkQYFKtQ7I+InTY+CDXPYfw==",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.2",
+        "@react-spring/core": "~9.7.2",
+        "@react-spring/shared": "~9.7.2",
+        "@react-spring/types": "~9.7.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || >=17.0.0 || >=18.0.0",
+        "react-native": ">=0.58"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.2.tgz",
+      "integrity": "sha512-kDWMYDQto3+flkrX3vy6DU/l9pxQ4TVW91DglQEc11iDc7shF4+WVDRJvOVLX+xoMP7zyag1dMvlIgvQ+dvA/A=="
+    },
     "node_modules/@react-spring/shared": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz",
-      "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==",
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.2.tgz",
+      "integrity": "sha512-6U9qkno+9DxlH5nSltnPs+kU6tYKf0bPLURX2te13aGel8YqgcpFYp5Av8DcN2x3sukinAsmzHUS/FRsdZMMBA==",
       "dependencies": {
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/rafz": "~9.7.2",
+        "@react-spring/types": "~9.7.2"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@react-spring/three": {
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.2.tgz",
+      "integrity": "sha512-u7VAjc+az82PM+WOC2sTbZQLBixuN+0jX/oahzyjEnIds5eUJgaBqZRYAAEMupuzGGl8H3QqL3bFgBEQLq6ADQ==",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.2",
+        "@react-spring/core": "~9.7.2",
+        "@react-spring/shared": "~9.7.2",
+        "@react-spring/types": "~9.7.2"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": ">=6.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "three": ">=0.126"
+      }
+    },
     "node_modules/@react-spring/types": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz",
-      "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw=="
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.2.tgz",
+      "integrity": "sha512-GEflx2Ex/TKVMHq5g5MxQDNNPNhqg+4Db9m7+vGTm8ttZiyga7YQUF24shgRNebKIjahqCuei16SZga8h1pe4g=="
     },
     "node_modules/@react-spring/web": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz",
-      "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==",
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.2.tgz",
+      "integrity": "sha512-7qNc7/5KShu2D05x7o2Ols2nUE7mCKfKLaY2Ix70xPMfTle1sZisoQMBFgV9w/fSLZlHZHV9P0uWJqEXQnbV4Q==",
       "dependencies": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.2",
+        "@react-spring/core": "~9.7.2",
+        "@react-spring/shared": "~9.7.2",
+        "@react-spring/types": "~9.7.2"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@react-spring/zdog": {
+      "version": "9.7.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.7.2.tgz",
+      "integrity": "sha512-6z2qqhmbpoZrw1oThyn4zfejtLkuadsaZFVMFf/5l5cHTEdRC8HZsBRLo+Wiomkprg/F1hyhcXI5X1lJ+T/zdQ==",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.2",
+        "@react-spring/core": "~9.7.2",
+        "@react-spring/shared": "~9.7.2",
+        "@react-spring/types": "~9.7.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-zdog": ">=1.0",
+        "zdog": ">=1.0"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
diff --git a/package.json b/package.json
index 31e0fa25e..80e0e7eec 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,16 @@
     "@gravity-ui/components": "^2.4.0",
     "@gravity-ui/dynamic-forms": "^2.3.0",
     "@gravity-ui/i18n": "^1.0.0",
-    "@react-spring/web": "^9.7.3",
+    "@react-spring/core": "9.7.2",
+    "@react-spring/shared": "9.7.2",
+    "@react-spring/animated": "9.7.2",
+    "@react-spring/konva": "9.7.2",
+    "@react-spring/native": "9.7.2",
+    "@react-spring/three": "9.7.2",
+    "@react-spring/web": "9.7.2",
+    "@react-spring/zdog": "9.7.2",
+    "@react-spring/rafz": "9.7.2",
+    "@react-spring/types": "9.7.2",
     "ajv": "^8.12.0",
     "final-form": "^4.20.9",
     "github-buttons": "2.23.0",

From b93ae71f5b4435244bc9c7e90f0b04ee230140f2 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Mon, 30 Oct 2023 18:02:00 +0300
Subject: [PATCH 12/22] fix: change versions

---
 package.json | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 80e0e7eec..31e0fa25e 100644
--- a/package.json
+++ b/package.json
@@ -84,16 +84,7 @@
     "@gravity-ui/components": "^2.4.0",
     "@gravity-ui/dynamic-forms": "^2.3.0",
     "@gravity-ui/i18n": "^1.0.0",
-    "@react-spring/core": "9.7.2",
-    "@react-spring/shared": "9.7.2",
-    "@react-spring/animated": "9.7.2",
-    "@react-spring/konva": "9.7.2",
-    "@react-spring/native": "9.7.2",
-    "@react-spring/three": "9.7.2",
-    "@react-spring/web": "9.7.2",
-    "@react-spring/zdog": "9.7.2",
-    "@react-spring/rafz": "9.7.2",
-    "@react-spring/types": "9.7.2",
+    "@react-spring/web": "^9.7.3",
     "ajv": "^8.12.0",
     "final-form": "^4.20.9",
     "github-buttons": "2.23.0",

From 5be4f00286be234210a4e4b8ad794fed957f8462 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Mon, 30 Oct 2023 18:03:38 +0300
Subject: [PATCH 13/22] fix: lock file

---
 package-lock.json | 132 +++++++++-------------------------------------
 1 file changed, 26 insertions(+), 106 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index faf44ba3c..fed232bc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,16 +13,7 @@
         "@gravity-ui/components": "^2.4.0",
         "@gravity-ui/dynamic-forms": "^2.3.0",
         "@gravity-ui/i18n": "^1.0.0",
-        "@react-spring/animated": "9.7.2",
-        "@react-spring/core": "9.7.2",
-        "@react-spring/konva": "9.7.2",
-        "@react-spring/native": "9.7.2",
-        "@react-spring/rafz": "9.7.2",
-        "@react-spring/shared": "9.7.2",
-        "@react-spring/three": "9.7.2",
-        "@react-spring/types": "9.7.2",
-        "@react-spring/web": "9.7.2",
-        "@react-spring/zdog": "9.7.2",
+        "@react-spring/web": "^9.7.3",
         "ajv": "^8.12.0",
         "final-form": "^4.20.9",
         "github-buttons": "2.23.0",
@@ -5079,26 +5070,25 @@
       }
     },
     "node_modules/@react-spring/animated": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.2.tgz",
-      "integrity": "sha512-ipvleJ99ipqlnHkz5qhSsgf/ny5aW0ZG8Q+/2Oj9cI7LCc7COdnrSO6V/v8MAX3JOoQNzfz6dye2s5Pt5jGaIA==",
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz",
+      "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==",
       "dependencies": {
-        "@react-spring/shared": "~9.7.2",
-        "@react-spring/types": "~9.7.2"
+        "@react-spring/shared": "~9.7.3",
+        "@react-spring/types": "~9.7.3"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@react-spring/core": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.2.tgz",
-      "integrity": "sha512-fF512edZT/gKVCA90ZRxfw1DmELeVwiL4OC2J6bMUlNr707C0h4QRoec6DjzG27uLX2MvS1CEatf9KRjwZR9/w==",
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz",
+      "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==",
       "dependencies": {
-        "@react-spring/animated": "~9.7.2",
-        "@react-spring/rafz": "~9.7.2",
-        "@react-spring/shared": "~9.7.2",
-        "@react-spring/types": "~9.7.2"
+        "@react-spring/animated": "~9.7.3",
+        "@react-spring/shared": "~9.7.3",
+        "@react-spring/types": "~9.7.3"
       },
       "funding": {
         "type": "opencollective",
@@ -5108,107 +5098,37 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@react-spring/konva": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.7.2.tgz",
-      "integrity": "sha512-xMA0XkIyv02euso8BGlLA4iXVJ76p6WCjABMTjdvcp//KvIub596vLwoLzmqHYjqRhH7BP4UQKxzhHvM7AylQA==",
-      "dependencies": {
-        "@react-spring/animated": "~9.7.2",
-        "@react-spring/core": "~9.7.2",
-        "@react-spring/shared": "~9.7.2",
-        "@react-spring/types": "~9.7.2"
-      },
-      "peerDependencies": {
-        "konva": ">=2.6",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-konva": "^16.8.0 || ^16.8.7-0 || ^16.9.0-0 || ^16.10.1-0 || ^16.12.0-0 || ^16.13.0-0 || ^17.0.0-0 || ^17.0.1-0 || ^17.0.2-0 || ^18.0.0-0"
-      }
-    },
-    "node_modules/@react-spring/native": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.7.2.tgz",
-      "integrity": "sha512-Ltq/F+4jY7aqHW1/f1xUb+e3XGbVxnllXfDYU+3nXi4sa7O+du755hpNbCHJ5ZgtkQYFKtQ7I+InTY+CDXPYfw==",
-      "dependencies": {
-        "@react-spring/animated": "~9.7.2",
-        "@react-spring/core": "~9.7.2",
-        "@react-spring/shared": "~9.7.2",
-        "@react-spring/types": "~9.7.2"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0  || >=17.0.0 || >=18.0.0",
-        "react-native": ">=0.58"
-      }
-    },
-    "node_modules/@react-spring/rafz": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.2.tgz",
-      "integrity": "sha512-kDWMYDQto3+flkrX3vy6DU/l9pxQ4TVW91DglQEc11iDc7shF4+WVDRJvOVLX+xoMP7zyag1dMvlIgvQ+dvA/A=="
-    },
     "node_modules/@react-spring/shared": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.2.tgz",
-      "integrity": "sha512-6U9qkno+9DxlH5nSltnPs+kU6tYKf0bPLURX2te13aGel8YqgcpFYp5Av8DcN2x3sukinAsmzHUS/FRsdZMMBA==",
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz",
+      "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==",
       "dependencies": {
-        "@react-spring/rafz": "~9.7.2",
-        "@react-spring/types": "~9.7.2"
+        "@react-spring/types": "~9.7.3"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@react-spring/three": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.2.tgz",
-      "integrity": "sha512-u7VAjc+az82PM+WOC2sTbZQLBixuN+0jX/oahzyjEnIds5eUJgaBqZRYAAEMupuzGGl8H3QqL3bFgBEQLq6ADQ==",
-      "dependencies": {
-        "@react-spring/animated": "~9.7.2",
-        "@react-spring/core": "~9.7.2",
-        "@react-spring/shared": "~9.7.2",
-        "@react-spring/types": "~9.7.2"
-      },
-      "peerDependencies": {
-        "@react-three/fiber": ">=6.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "three": ">=0.126"
-      }
-    },
     "node_modules/@react-spring/types": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.2.tgz",
-      "integrity": "sha512-GEflx2Ex/TKVMHq5g5MxQDNNPNhqg+4Db9m7+vGTm8ttZiyga7YQUF24shgRNebKIjahqCuei16SZga8h1pe4g=="
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz",
+      "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw=="
     },
     "node_modules/@react-spring/web": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.2.tgz",
-      "integrity": "sha512-7qNc7/5KShu2D05x7o2Ols2nUE7mCKfKLaY2Ix70xPMfTle1sZisoQMBFgV9w/fSLZlHZHV9P0uWJqEXQnbV4Q==",
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz",
+      "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==",
       "dependencies": {
-        "@react-spring/animated": "~9.7.2",
-        "@react-spring/core": "~9.7.2",
-        "@react-spring/shared": "~9.7.2",
-        "@react-spring/types": "~9.7.2"
+        "@react-spring/animated": "~9.7.3",
+        "@react-spring/core": "~9.7.3",
+        "@react-spring/shared": "~9.7.3",
+        "@react-spring/types": "~9.7.3"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@react-spring/zdog": {
-      "version": "9.7.2",
-      "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.7.2.tgz",
-      "integrity": "sha512-6z2qqhmbpoZrw1oThyn4zfejtLkuadsaZFVMFf/5l5cHTEdRC8HZsBRLo+Wiomkprg/F1hyhcXI5X1lJ+T/zdQ==",
-      "dependencies": {
-        "@react-spring/animated": "~9.7.2",
-        "@react-spring/core": "~9.7.2",
-        "@react-spring/shared": "~9.7.2",
-        "@react-spring/types": "~9.7.2"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-zdog": ">=1.0",
-        "zdog": ">=1.0"
-      }
-    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",

From 46ca3627a270f7ff1cda999d3644dafbf20a06d7 Mon Sep 17 00:00:00 2001
From: gravity-ui-bot <111915794+gravity-ui-bot@users.noreply.github.com>
Date: Fri, 27 Oct 2023 13:36:00 +0000
Subject: [PATCH 14/22] 4.29.1-alpha.0

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fed232bc4..cdeb3450b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.31.1",
+  "version": "4.29.1-alpha.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 31e0fa25e..b28dc9b88 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.31.1",
+  "version": "4.29.1-alpha.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

From 978e0bcd1d2d632824dc7e1fea4bc042bf692600 Mon Sep 17 00:00:00 2001
From: Sergei Bubeev <qradle@yandex-team.ru>
Date: Mon, 30 Oct 2023 18:02:00 +0300
Subject: [PATCH 15/22] fix: change versions

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cdeb3450b..fed232bc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.29.1-alpha.1",
+  "version": "4.31.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index b28dc9b88..31e0fa25e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.29.1-alpha.1",
+  "version": "4.31.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

From d5a6ad99cea9fee00482f200bf401b9267d6b547 Mon Sep 17 00:00:00 2001
From: gravity-ui-bot <111915794+gravity-ui-bot@users.noreply.github.com>
Date: Mon, 30 Oct 2023 15:16:24 +0000
Subject: [PATCH 16/22] 4.31.1-alpha.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fed232bc4..192fc3d63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.31.1",
+  "version": "4.31.1-alpha.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gravity-ui/page-constructor",
-      "version": "4.31.1",
+      "version": "4.31.1-alpha.0",
       "license": "MIT",
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
diff --git a/package.json b/package.json
index 31e0fa25e..f9f8ce7ec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.31.1",
+  "version": "4.31.1-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

From d338f1c7905bc994f3c83595a0f4b4e2a2ae2951 Mon Sep 17 00:00:00 2001
From: qradle <qradle@yandex-team.ru>
Date: Fri, 3 Nov 2023 15:11:44 +0300
Subject: [PATCH 17/22] fix: fix version and Form block formType useMemo
 removed

---
 package-lock.json        |  4 ++--
 package.json             |  2 +-
 src/blocks/Form/Form.tsx | 20 +++++++++-----------
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 192fc3d63..fed232bc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.31.1-alpha.0",
+  "version": "4.31.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gravity-ui/page-constructor",
-      "version": "4.31.1-alpha.0",
+      "version": "4.31.1",
       "license": "MIT",
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
diff --git a/package.json b/package.json
index f9f8ce7ec..31e0fa25e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.31.1-alpha.0",
+  "version": "4.31.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
diff --git a/src/blocks/Form/Form.tsx b/src/blocks/Form/Form.tsx
index 22c773e15..4a03320dd 100644
--- a/src/blocks/Form/Form.tsx
+++ b/src/blocks/Form/Form.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useMemo, useState} from 'react';
+import React, {useCallback, useContext, useState} from 'react';
 
 import {BackgroundImage, Title} from '../../components';
 import {MobileContext} from '../../context/mobileContext';
@@ -32,20 +32,18 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
         setContentLoaded(true);
     }, []);
 
-    const formType = useMemo(() => {
-        if (isYandexDataForm(formData)) {
-            return FormBlockDataTypes.YANDEX;
-        }
-        if (isHubspotDataForm(formData)) {
-            return FormBlockDataTypes.HUBSPOT_INLINE;
-        }
-        return undefined;
-    }, [formData]);
-
     if (!formData) {
         return null;
     }
 
+    let formType;
+
+    if (isYandexDataForm(formData)) {
+        formType = FormBlockDataTypes.YANDEX;
+    } else if (isHubspotDataForm(formData)) {
+        formType = FormBlockDataTypes.HUBSPOT_INLINE;
+    }
+
     return (
         <div
             className={b({

From a020bea0c1772035dd4934f044a0d5a3127fa78c Mon Sep 17 00:00:00 2001
From: qradle <qradle@yandex-team.ru>
Date: Tue, 7 Nov 2023 12:02:57 +0300
Subject: [PATCH 18/22] fix: cut HubspotInlineForm, add title to form storybook

---
 src/blocks/Form/HubspotInlineForm.tsx        | 21 --------------------
 src/blocks/Form/__stories__/Form.stories.tsx |  2 ++
 2 files changed, 2 insertions(+), 21 deletions(-)
 delete mode 100644 src/blocks/Form/HubspotInlineForm.tsx

diff --git a/src/blocks/Form/HubspotInlineForm.tsx b/src/blocks/Form/HubspotInlineForm.tsx
deleted file mode 100644
index 9be54b668..000000000
--- a/src/blocks/Form/HubspotInlineForm.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import useMount from '../../hooks/useMount';
-import type {HubspotFormProps} from '../../models';
-import {HubspotForm} from '../../sub-blocks';
-
-type Props = HubspotFormProps & {
-    onReady?: () => void;
-};
-
-const HubspotInlineForm: React.FC<Props> = (props) => {
-    const {onReady, ...rest} = props;
-
-    useMount(() => {
-        onReady?.();
-    });
-
-    return <HubspotForm {...rest} createDOMElement={true} />;
-};
-
-export default HubspotInlineForm;
diff --git a/src/blocks/Form/__stories__/Form.stories.tsx b/src/blocks/Form/__stories__/Form.stories.tsx
index c2a83a984..9d12caaab 100644
--- a/src/blocks/Form/__stories__/Form.stories.tsx
+++ b/src/blocks/Form/__stories__/Form.stories.tsx
@@ -24,10 +24,12 @@ const DefaultTemplate: StoryFn<FormBlockModel> = (args) => (
             blocks: [
                 {
                     ...args,
+                    title: 'Yandex form',
                     formData: {yandex: data.formData.yandex}, //yandex form
                 },
                 {
                     ...args,
+                    title: 'Hubspot form',
                     formData: {hubspot: data.formData.hubspot}, //hubspot form
                 },
             ],

From 2e83c7211c720e9ebf20ae678d5a43d7c977d2a1 Mon Sep 17 00:00:00 2001
From: qradle <qradle@yandex-team.ru>
Date: Tue, 7 Nov 2023 14:22:24 +0300
Subject: [PATCH 19/22] fix: use default theme for form-block storybook

---
 src/blocks/Form/__stories__/data.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/blocks/Form/__stories__/data.json b/src/blocks/Form/__stories__/data.json
index c79720fe7..419c0f94e 100644
--- a/src/blocks/Form/__stories__/data.json
+++ b/src/blocks/Form/__stories__/data.json
@@ -45,6 +45,7 @@
   },
   "formData": {
     "yandex": {
+      "theme": "default",
       "id": "61a4e639d4d24e0dbba36f5c",
       "metrikaGoals": ["events_form_submit"],
       "customFormSection": "cloud"

From 7a22755504eae786fa4fba713f85585f2067d191 Mon Sep 17 00:00:00 2001
From: qradle <qradle@yandex-team.ru>
Date: Tue, 7 Nov 2023 17:36:43 +0300
Subject: [PATCH 20/22] fix: add createDOMElement to form-block HubspotForm

---
 src/blocks/Form/InnerForm/InnerForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/blocks/Form/InnerForm/InnerForm.tsx b/src/blocks/Form/InnerForm/InnerForm.tsx
index f9b79495f..42fdca190 100644
--- a/src/blocks/Form/InnerForm/InnerForm.tsx
+++ b/src/blocks/Form/InnerForm/InnerForm.tsx
@@ -35,7 +35,7 @@ const InnerForm: React.FC<InnerFormProps> = (props) => {
     }
 
     if (isHubspotDataForm(formData)) {
-        return <HubspotForm {...formData.hubspot} />;
+        return <HubspotForm createDOMElement={true} {...formData.hubspot} />;
     }
 
     return null;

From f27438859f90cd10748f1460c2eba9625d4d4b65 Mon Sep 17 00:00:00 2001
From: qradle <qradle@yandex-team.ru>
Date: Tue, 7 Nov 2023 18:22:14 +0300
Subject: [PATCH 21/22] fix: rename hubspot-inline to hubspot

---
 src/blocks/Form/schema.ts              | 2 +-
 src/models/constructor-items/blocks.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/blocks/Form/schema.ts b/src/blocks/Form/schema.ts
index f16d872cd..140bb9849 100644
--- a/src/blocks/Form/schema.ts
+++ b/src/blocks/Form/schema.ts
@@ -28,7 +28,7 @@ export const FormBlock = {
                     },
                     {
                         type: 'object',
-                        optionName: 'hubspot-inline',
+                        optionName: 'hubspot',
                         properties: {
                             hubspot: HubspotFormProps,
                         },
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
index 15f8c87b3..9a48c953f 100644
--- a/src/models/constructor-items/blocks.ts
+++ b/src/models/constructor-items/blocks.ts
@@ -380,7 +380,7 @@ export interface ShareBlockProps {
 
 export enum FormBlockDataTypes {
     YANDEX = 'yandex',
-    HUBSPOT_INLINE = 'hubspot-inline',
+    HUBSPOT_INLINE = 'hubspot',
 }
 
 export enum FormBlockDirection {

From 42b303de760574b722a74214c4d2defb3499c2c4 Mon Sep 17 00:00:00 2001
From: qradle <qradle@yandex-team.ru>
Date: Tue, 7 Nov 2023 18:25:26 +0300
Subject: [PATCH 22/22] fix: rename hubspot-inline to hubspot

---
 src/blocks/Form/Form.tsx               | 2 +-
 src/models/constructor-items/blocks.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/blocks/Form/Form.tsx b/src/blocks/Form/Form.tsx
index 4a03320dd..ef1de0e61 100644
--- a/src/blocks/Form/Form.tsx
+++ b/src/blocks/Form/Form.tsx
@@ -41,7 +41,7 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
     if (isYandexDataForm(formData)) {
         formType = FormBlockDataTypes.YANDEX;
     } else if (isHubspotDataForm(formData)) {
-        formType = FormBlockDataTypes.HUBSPOT_INLINE;
+        formType = FormBlockDataTypes.HUBSPOT;
     }
 
     return (
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
index 9a48c953f..295d14343 100644
--- a/src/models/constructor-items/blocks.ts
+++ b/src/models/constructor-items/blocks.ts
@@ -380,7 +380,7 @@ export interface ShareBlockProps {
 
 export enum FormBlockDataTypes {
     YANDEX = 'yandex',
-    HUBSPOT_INLINE = 'hubspot',
+    HUBSPOT = 'hubspot',
 }
 
 export enum FormBlockDirection {