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 f0371a903..a6b25b31a 100644
--- a/src/models/constructor-items/blocks.ts
+++ b/src/models/constructor-items/blocks.ts
@@ -18,7 +18,6 @@ import {
     HeaderOffset,
     HeaderWidth,
     ImageDeviceProps,
-    ImageProps,
     Justify,
     LegendTableMarkerType,
     LinkProps,
@@ -402,8 +401,7 @@ export interface FormBlockProps {
     title?: string;
     textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
     direction?: FormBlockDirection;
-    image?: ImageProps;
-    backgroundColor?: string;
+    background?: BackgroundImageProps;
 }
 
 //block models