diff --git a/projects/packages/forms/changelog/remove-contact-form-hocs b/projects/packages/forms/changelog/remove-contact-form-hocs
new file mode 100644
index 000000000000..9b38f38c0c17
--- /dev/null
+++ b/projects/packages/forms/changelog/remove-contact-form-hocs
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Forms: Remove wrapping <div> element from form block.
diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js
index fff949c91a86..a1279826cc9b 100644
--- a/projects/packages/forms/src/blocks/contact-form/edit.js
+++ b/projects/packages/forms/src/blocks/contact-form/edit.js
@@ -23,9 +23,9 @@ import {
 	TextControl,
 	Notice,
 } from '@wordpress/components';
-import { compose, withInstanceId } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { forwardRef, Fragment, useEffect, useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { filter, get, isArray, map } from 'lodash';
@@ -38,8 +38,8 @@ import JetpackEmailConnectionSettings from './components/jetpack-email-connectio
 import JetpackManageResponsesSettings from './components/jetpack-manage-responses-settings';
 import NewsletterIntegrationSettings from './components/jetpack-newsletter-integration-settings';
 import SalesforceLeadFormSettings from './components/jetpack-salesforce-lead-form/jetpack-salesforce-lead-form-settings';
-import { withStyleVariables } from './util/with-style-variables';
 import defaultVariations from './variations';
+import './util/form-styles.js';
 
 const validFields = filter( childBlocks, ( { settings } ) => {
 	return (
@@ -72,332 +72,299 @@ const PRIORITIZED_INSERTER_BLOCKS = [ ...map( validFields, block => `jetpack/${
 const RESPONSES_PATH = `${ get( getJetpackData(), 'adminUrl', false ) }edit.php?post_type=feedback`;
 const CUSTOMIZING_FORMS_URL = 'https://jetpack.com/support/jetpack-blocks/contact-form/';
 
-export const JetpackContactFormEdit = forwardRef(
-	(
-		{
-			attributes,
-			setAttributes,
-			postAuthorEmail,
-			hasInnerBlocks,
-			replaceInnerBlocks,
-			selectBlock,
-			clientId,
-			instanceId,
-			className,
-			blockType,
-			variations,
-			defaultVariation,
-			canUserInstallPlugins,
-			style,
-		},
-		ref
-	) => {
-		const {
-			to,
-			subject,
-			customThankyou,
-			customThankyouHeading,
-			customThankyouMessage,
-			customThankyouRedirect,
-			jetpackCRM,
-			salesforceData,
-		} = attributes;
-		const [ isPatternsModalOpen, setIsPatternsModalOpen ] = useState( false );
-
-		const blockProps = useBlockProps();
-		const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
-			useModuleStatus( 'contact-form' );
+function JetpackContactFormEdit( { name, attributes, setAttributes, clientId, className } ) {
+	const {
+		to,
+		subject,
+		customThankyou,
+		customThankyouHeading,
+		customThankyouMessage,
+		customThankyouRedirect,
+		jetpackCRM,
+		salesforceData,
+	} = attributes;
+	const instanceId = useInstanceId( JetpackContactFormEdit );
+	const { replaceInnerBlocks, selectBlock } = useDispatch( 'core/block-editor' );
+	const {
+		blockType,
+		canUserInstallPlugins,
+		defaultVariation,
+		variations,
+		hasInnerBlocks,
+		postAuthorEmail,
+	} = useSelect(
+		select => {
+			const { getBlockType, getBlockVariations, getDefaultBlockVariation } =
+				select( 'core/blocks' );
+			const { getBlocks } = select( 'core/block-editor' );
+			const { getEditedPostAttribute } = select( 'core/editor' );
+			const { getUser, canUser } = select( 'core' );
+			const innerBlocks = getBlocks( clientId );
 
-		const formClassnames = clsx( className, 'jetpack-contact-form', {
-			'is-placeholder': ! hasInnerBlocks && registerBlockVariation,
-		} );
+			const authorId = getEditedPostAttribute( 'author' );
+			const authorEmail = authorId && getUser( authorId ) && getUser( authorId ).email;
+			const submitButton = innerBlocks.find( block => block.name === 'jetpack/button' );
+			if ( submitButton && ! submitButton.attributes.lock ) {
+				const lock = { move: false, remove: true };
+				submitButton.attributes.lock = lock;
+			}
 
-		const isSalesForceExtensionEnabled =
-			!! window?.Jetpack_Editor_Initial_State?.available_blocks[
-				'contact-form/salesforce-lead-form'
-			];
+			return {
+				blockType: getBlockType && getBlockType( name ),
+				canUserInstallPlugins: canUser( 'create', 'plugins' ),
+				defaultVariation: getDefaultBlockVariation && getDefaultBlockVariation( name, 'block' ),
+				variations: getBlockVariations && getBlockVariations( name, 'block' ),
+				hasInnerBlocks: innerBlocks.length > 0,
+				postAuthorEmail: authorEmail,
+			};
+		},
+		[ clientId, name ]
+	);
+	const [ isPatternsModalOpen, setIsPatternsModalOpen ] = useState( false );
+	const wrapperRef = useRef();
+	const innerRef = useRef();
+	const blockProps = useBlockProps( { ref: wrapperRef } );
+	const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
+		useModuleStatus( 'contact-form' );
 
-		const createBlocksFromInnerBlocksTemplate = innerBlocksTemplate => {
-			const blocks = map( innerBlocksTemplate, ( [ name, attr, innerBlocks = [] ] ) =>
-				createBlock( name, attr, createBlocksFromInnerBlocksTemplate( innerBlocks ) )
-			);
+	const formClassnames = clsx( className, 'jetpack-contact-form', {
+		'is-placeholder': ! hasInnerBlocks && registerBlockVariation,
+	} );
 
-			return blocks;
-		};
+	const isSalesForceExtensionEnabled =
+		!! window?.Jetpack_Editor_Initial_State?.available_blocks[
+			'contact-form/salesforce-lead-form'
+		];
 
-		const setVariation = variation => {
-			if ( variation.attributes ) {
-				setAttributes( variation.attributes );
-			}
+	const createBlocksFromInnerBlocksTemplate = innerBlocksTemplate => {
+		const blocks = map( innerBlocksTemplate, ( [ blockName, attr, innerBlocks = [] ] ) =>
+			createBlock( blockName, attr, createBlocksFromInnerBlocksTemplate( innerBlocks ) )
+		);
 
-			if ( variation.innerBlocks ) {
-				replaceInnerBlocks(
-					clientId,
-					createBlocksFromInnerBlocksTemplate( variation.innerBlocks )
-				);
-			}
+		return blocks;
+	};
 
-			selectBlock( clientId );
-		};
+	const setVariation = variation => {
+		if ( variation.attributes ) {
+			setAttributes( variation.attributes );
+		}
 
-		useEffect( () => {
-			// Populate default variation on older versions of WP or GB that don't support variations.
-			if ( ! hasInnerBlocks && ! registerBlockVariation ) {
-				setVariation( defaultVariations[ 0 ] );
-			}
-		} );
+		if ( variation.innerBlocks ) {
+			replaceInnerBlocks( clientId, createBlocksFromInnerBlocksTemplate( variation.innerBlocks ) );
+		}
 
-		useEffect( () => {
-			if (
-				! hasInnerBlocks &&
-				registerBlockVariation &&
-				! isPatternsModalOpen &&
-				window.location.search.indexOf( 'showJetpackFormsPatterns' ) !== -1
-			) {
-				setIsPatternsModalOpen( true );
-			}
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [] );
+		selectBlock( clientId );
+	};
 
-		const renderSubmissionSettings = () => {
-			return (
-				<>
-					<InspectorHint>
-						{ __( 'Customize the view after form submission:', 'jetpack-forms' ) }
-					</InspectorHint>
-					<SelectControl
-						label={ __( 'On Submission', 'jetpack-forms' ) }
-						value={ customThankyou }
-						options={ [
-							{ label: __( 'Show a summary of submitted fields', 'jetpack-forms' ), value: '' },
-							{ label: __( 'Show a custom text message', 'jetpack-forms' ), value: 'message' },
-							{ label: __( 'Redirect to another webpage', 'jetpack-forms' ), value: 'redirect' },
-						] }
-						onChange={ newMessage => setAttributes( { customThankyou: newMessage } ) }
-						__nextHasNoMarginBottom={ true }
-						__next40pxDefaultSize={ true }
-					/>
+	useEffect( () => {
+		// Populate default variation on older versions of WP or GB that don't support variations.
+		if ( ! hasInnerBlocks && ! registerBlockVariation ) {
+			setVariation( defaultVariations[ 0 ] );
+		}
+	} );
 
-					{ 'redirect' !== customThankyou && (
-						<TextControl
-							label={ __( 'Message Heading', 'jetpack-forms' ) }
-							value={ customThankyouHeading }
-							placeholder={ __( 'Your message has been sent', 'jetpack-forms' ) }
-							onChange={ newHeading => setAttributes( { customThankyouHeading: newHeading } ) }
-							__nextHasNoMarginBottom={ true }
-							__next40pxDefaultSize={ true }
-						/>
-					) }
+	useEffect( () => {
+		if (
+			! hasInnerBlocks &&
+			registerBlockVariation &&
+			! isPatternsModalOpen &&
+			window.location.search.indexOf( 'showJetpackFormsPatterns' ) !== -1
+		) {
+			setIsPatternsModalOpen( true );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
 
-					{ 'message' === customThankyou && (
-						<TextareaControl
-							label={ __( 'Message Text', 'jetpack-forms' ) }
-							value={ customThankyouMessage }
-							placeholder={ __( 'Thank you for your submission!', 'jetpack-forms' ) }
-							onChange={ newMessage => setAttributes( { customThankyouMessage: newMessage } ) }
-							__nextHasNoMarginBottom={ true }
-						/>
-					) }
+	let elt;
 
-					{ 'redirect' === customThankyou && (
-						<div>
-							<URLInput
-								label={ __( 'Redirect Address', 'jetpack-forms' ) }
-								value={ customThankyouRedirect }
-								className="jetpack-contact-form__thankyou-redirect-url"
-								onChange={ newURL => setAttributes( { customThankyouRedirect: newURL } ) }
-							/>
-						</div>
-					) }
-				</>
+	if ( ! isModuleActive ) {
+		if ( isLoadingModules ) {
+			elt = <ContactFormSkeletonLoader />;
+		} else {
+			elt = (
+				<ContactFormPlaceholder
+					changeStatus={ changeStatus }
+					isModuleActive={ isModuleActive }
+					isLoading={ isChangingStatus }
+				/>
 			);
-		};
-
-		const renderVariationPicker = () => {
-			return (
-				<div className={ formClassnames }>
-					<BlockVariationPicker
-						icon={ get( blockType, [ 'icon', 'src' ] ) }
-						label={ get( blockType, [ 'title' ] ) }
-						instructions={ __(
-							'Start building a form by selecting one of these form templates, or search in the patterns library for more forms:',
-							'jetpack-forms'
-						) }
-						variations={ filter( variations, v => ! v.hiddenFromPicker ) }
-						onSelect={ ( nextVariation = defaultVariation ) => {
-							setVariation( nextVariation );
-						} }
-					/>
-					<div className="form-placeholder__footer">
-						<Button variant="secondary" onClick={ () => setIsPatternsModalOpen( true ) }>
-							{ __( 'Explore Form Patterns', 'jetpack-forms' ) }
+		}
+	} else if ( ! hasInnerBlocks && registerBlockVariation ) {
+		elt = (
+			<div className={ formClassnames }>
+				<BlockVariationPicker
+					icon={ get( blockType, [ 'icon', 'src' ] ) }
+					label={ get( blockType, [ 'title' ] ) }
+					instructions={ __(
+						'Start building a form by selecting one of these form templates, or search in the patterns library for more forms:',
+						'jetpack-forms'
+					) }
+					variations={ filter( variations, v => ! v.hiddenFromPicker ) }
+					onSelect={ ( nextVariation = defaultVariation ) => {
+						setVariation( nextVariation );
+					} }
+				/>
+				<div className="form-placeholder__footer">
+					<Button variant="secondary" onClick={ () => setIsPatternsModalOpen( true ) }>
+						{ __( 'Explore Form Patterns', 'jetpack-forms' ) }
+					</Button>
+					<div className="form-placeholder__footer-links">
+						<Button
+							variant="link"
+							className="form-placeholder__external-link"
+							href={ CUSTOMIZING_FORMS_URL }
+							target="_blank"
+						>
+							{ __( 'Learn more about customizing forms', 'jetpack-forms' ) }
 						</Button>
-						<div className="form-placeholder__footer-links">
-							<Button
-								variant="link"
-								className="form-placeholder__external-link"
-								href={ CUSTOMIZING_FORMS_URL }
-								target="_blank"
-							>
-								{ __( 'Learn more about customizing forms', 'jetpack-forms' ) }
-							</Button>
-							<Button
-								variant="link"
-								className="form-placeholder__external-link"
-								href={ RESPONSES_PATH }
-								target="_blank"
-							>
-								{ __( 'View and export your form responses here', 'jetpack-forms' ) }
-							</Button>
-						</div>
-					</div>
-					{ isPatternsModalOpen && (
-						<Modal
-							className="form-placeholder__patterns-modal"
-							title={ __( 'Choose a pattern', 'jetpack-forms' ) }
-							closeLabel={ __( 'Cancel', 'jetpack-forms' ) }
-							onRequestClose={ () => setIsPatternsModalOpen( false ) }
+						<Button
+							variant="link"
+							className="form-placeholder__external-link"
+							href={ RESPONSES_PATH }
+							target="_blank"
 						>
-							<BlockPatternSetup
-								initialViewMode="grid"
-								filterPatternsFn={ pattern => {
-									return pattern.content.indexOf( 'jetpack/contact-form' ) !== -1;
-								} }
-								clientId={ clientId }
-							/>
-						</Modal>
-					) }
+							{ __( 'View and export your form responses here', 'jetpack-forms' ) }
+						</Button>
+					</div>
 				</div>
-			);
-		};
-
-		let elt;
-
-		if ( ! isModuleActive ) {
-			if ( isLoadingModules ) {
-				elt = <ContactFormSkeletonLoader />;
-			} else {
-				elt = (
-					<ContactFormPlaceholder
-						changeStatus={ changeStatus }
-						isModuleActive={ isModuleActive }
-						isLoading={ isChangingStatus }
-					/>
-				);
-			}
-		} else if ( ! hasInnerBlocks && registerBlockVariation ) {
-			elt = renderVariationPicker();
-		} else {
-			elt = (
-				<>
-					<InspectorControls>
-						{ ! attributes.formTitle && (
-							<PanelBody>
-								<Notice status="warning" isDismissible={ false }>
-									{ __(
-										'Add a heading inside the form or before it to help everybody identify it.',
-										'jetpack-forms'
-									) }
-								</Notice>{ ' ' }
-							</PanelBody>
-						) }
-						<PanelBody title={ __( 'Manage Responses', 'jetpack-forms' ) }>
-							<JetpackManageResponsesSettings setAttributes={ setAttributes } />
-						</PanelBody>
-						<PanelBody title={ __( 'Submission Settings', 'jetpack-forms' ) } initialOpen={ false }>
-							{ renderSubmissionSettings() }
+				{ isPatternsModalOpen && (
+					<Modal
+						className="form-placeholder__patterns-modal"
+						title={ __( 'Choose a pattern', 'jetpack-forms' ) }
+						closeLabel={ __( 'Cancel', 'jetpack-forms' ) }
+						onRequestClose={ () => setIsPatternsModalOpen( false ) }
+					>
+						<BlockPatternSetup
+							initialViewMode="grid"
+							filterPatternsFn={ pattern => {
+								return pattern.content.indexOf( 'jetpack/contact-form' ) !== -1;
+							} }
+							clientId={ clientId }
+						/>
+					</Modal>
+				) }
+			</div>
+		);
+	} else {
+		const style = window.jetpackForms.generateStyleVariables( innerRef.current );
+		elt = (
+			<>
+				<InspectorControls>
+					{ ! attributes.formTitle && (
+						<PanelBody>
+							<Notice status="warning" isDismissible={ false }>
+								{ __(
+									'Add a heading inside the form or before it to help everybody identify it.',
+									'jetpack-forms'
+								) }
+							</Notice>{ ' ' }
 						</PanelBody>
-						<PanelBody title={ __( 'Email Connection', 'jetpack-forms' ) }>
-							<JetpackEmailConnectionSettings
-								emailAddress={ to }
-								emailSubject={ subject }
-								instanceId={ instanceId }
-								postAuthorEmail={ postAuthorEmail }
-								setAttributes={ setAttributes }
+					) }
+					<PanelBody title={ __( 'Manage Responses', 'jetpack-forms' ) }>
+						<JetpackManageResponsesSettings setAttributes={ setAttributes } />
+					</PanelBody>
+					<PanelBody title={ __( 'Submission Settings', 'jetpack-forms' ) } initialOpen={ false }>
+						<InspectorHint>
+							{ __( 'Customize the view after form submission:', 'jetpack-forms' ) }
+						</InspectorHint>
+						<SelectControl
+							label={ __( 'On Submission', 'jetpack-forms' ) }
+							value={ customThankyou }
+							options={ [
+								{ label: __( 'Show a summary of submitted fields', 'jetpack-forms' ), value: '' },
+								{ label: __( 'Show a custom text message', 'jetpack-forms' ), value: 'message' },
+								{
+									label: __( 'Redirect to another webpage', 'jetpack-forms' ),
+									value: 'redirect',
+								},
+							] }
+							onChange={ newMessage => setAttributes( { customThankyou: newMessage } ) }
+							__nextHasNoMarginBottom={ true }
+							__next40pxDefaultSize={ true }
+						/>
+
+						{ 'redirect' !== customThankyou && (
+							<TextControl
+								label={ __( 'Message Heading', 'jetpack-forms' ) }
+								value={ customThankyouHeading }
+								placeholder={ __( 'Your message has been sent', 'jetpack-forms' ) }
+								onChange={ newHeading => setAttributes( { customThankyouHeading: newHeading } ) }
+								__nextHasNoMarginBottom={ true }
+								__next40pxDefaultSize={ true }
 							/>
-						</PanelBody>
+						) }
 
-						{ isSalesForceExtensionEnabled && salesforceData?.sendToSalesforce && (
-							<SalesforceLeadFormSettings
-								salesforceData={ salesforceData }
-								setAttributes={ setAttributes }
-								instanceId={ instanceId }
+						{ 'message' === customThankyou && (
+							<TextareaControl
+								label={ __( 'Message Text', 'jetpack-forms' ) }
+								value={ customThankyouMessage }
+								placeholder={ __( 'Thank you for your submission!', 'jetpack-forms' ) }
+								onChange={ newMessage => setAttributes( { customThankyouMessage: newMessage } ) }
+								__nextHasNoMarginBottom={ true }
 							/>
 						) }
-						{ ! ( isSimpleSite() || isAtomicSite() ) && (
-							<Fragment>
-								{ canUserInstallPlugins && (
-									<PanelBody
-										title={ __( 'CRM Connection', 'jetpack-forms' ) }
-										initialOpen={ false }
-									>
-										<CRMIntegrationSettings
-											jetpackCRM={ jetpackCRM }
-											setAttributes={ setAttributes }
-										/>
-									</PanelBody>
-								) }
-								<PanelBody title={ __( 'Creative Mail', 'jetpack-forms' ) } initialOpen={ false }>
-									<NewsletterIntegrationSettings />
-								</PanelBody>
-							</Fragment>
+
+						{ 'redirect' === customThankyou && (
+							<div>
+								<URLInput
+									label={ __( 'Redirect Address', 'jetpack-forms' ) }
+									value={ customThankyouRedirect }
+									className="jetpack-contact-form__thankyou-redirect-url"
+									onChange={ newURL => setAttributes( { customThankyouRedirect: newURL } ) }
+								/>
+							</div>
 						) }
-					</InspectorControls>
+					</PanelBody>
+					<PanelBody title={ __( 'Email Connection', 'jetpack-forms' ) }>
+						<JetpackEmailConnectionSettings
+							emailAddress={ to }
+							emailSubject={ subject }
+							instanceId={ instanceId }
+							postAuthorEmail={ postAuthorEmail }
+							setAttributes={ setAttributes }
+						/>
+					</PanelBody>
 
-					<div className={ formClassnames } style={ style } ref={ ref }>
-						<InnerBlocks
-							allowedBlocks={ ALLOWED_BLOCKS }
-							prioritizedInserterBlocks={ PRIORITIZED_INSERTER_BLOCKS }
-							templateInsertUpdatesSelection={ false }
+					{ isSalesForceExtensionEnabled && salesforceData?.sendToSalesforce && (
+						<SalesforceLeadFormSettings
+							salesforceData={ salesforceData }
+							setAttributes={ setAttributes }
+							instanceId={ instanceId }
 						/>
-					</div>
-				</>
-			);
-		}
+					) }
+					{ ! ( isSimpleSite() || isAtomicSite() ) && (
+						<>
+							{ canUserInstallPlugins && (
+								<PanelBody title={ __( 'CRM Connection', 'jetpack-forms' ) } initialOpen={ false }>
+									<CRMIntegrationSettings
+										jetpackCRM={ jetpackCRM }
+										setAttributes={ setAttributes }
+									/>
+								</PanelBody>
+							) }
+							<PanelBody title={ __( 'Creative Mail', 'jetpack-forms' ) } initialOpen={ false }>
+								<NewsletterIntegrationSettings />
+							</PanelBody>
+						</>
+					) }
+				</InspectorControls>
 
-		return <div { ...blockProps }>{ elt }</div>;
+				<div className={ formClassnames } style={ style } ref={ innerRef }>
+					<InnerBlocks
+						allowedBlocks={ ALLOWED_BLOCKS }
+						prioritizedInserterBlocks={ PRIORITIZED_INSERTER_BLOCKS }
+						templateInsertUpdatesSelection={ false }
+					/>
+				</div>
+			</>
+		);
 	}
-);
-
-const withThemeProvider = WrappedComponent => props => (
-	<ThemeProvider>
-		<WrappedComponent { ...props } />
-	</ThemeProvider>
-);
-
-export default compose( [
-	withSelect( ( select, props ) => {
-		const { getBlockType, getBlockVariations, getDefaultBlockVariation } = select( 'core/blocks' );
-		const { getBlocks } = select( 'core/block-editor' );
-		const { getEditedPostAttribute } = select( 'core/editor' );
-		const { getUser, canUser } = select( 'core' );
-		const innerBlocks = getBlocks( props.clientId );
-
-		const authorId = getEditedPostAttribute( 'author' );
-		const authorEmail = authorId && getUser( authorId ) && getUser( authorId ).email;
-		const canUserInstallPlugins = canUser( 'create', 'plugins' );
 
-		const submitButton = innerBlocks.find( block => block.name === 'jetpack/button' );
-		if ( submitButton && ! submitButton.attributes.lock ) {
-			const lock = { move: false, remove: true };
-			submitButton.attributes.lock = lock;
-		}
-
-		return {
-			blockType: getBlockType && getBlockType( props.name ),
-			canUserInstallPlugins,
-			defaultVariation: getDefaultBlockVariation && getDefaultBlockVariation( props.name, 'block' ),
-			variations: getBlockVariations && getBlockVariations( props.name, 'block' ),
+	return (
+		<ThemeProvider targetDom={ wrapperRef.current }>
+			<div { ...blockProps }>{ elt }</div>
+		</ThemeProvider>
+	);
+}
 
-			innerBlocks,
-			hasInnerBlocks: innerBlocks.length > 0,
-			postAuthorEmail: authorEmail,
-		};
-	} ),
-	withDispatch( dispatch => {
-		const { replaceInnerBlocks, selectBlock } = dispatch( 'core/block-editor' );
-		return { replaceInnerBlocks, selectBlock };
-	} ),
-	withInstanceId,
-	withThemeProvider,
-] )( withStyleVariables( JetpackContactFormEdit ) );
+export default JetpackContactFormEdit;
diff --git a/projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js b/projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js
deleted file mode 100644
index 705689137dda..000000000000
--- a/projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import './form-styles.js';
-import { useRef } from '@wordpress/element';
-
-export const withStyleVariables = WrappedComponent => props => {
-	const { generateStyleVariables } = window.jetpackForms;
-	const componentRef = useRef( undefined );
-
-	return (
-		<WrappedComponent
-			style={ generateStyleVariables( componentRef?.current ) }
-			{ ...props }
-			ref={ componentRef }
-		/>
-	);
-};
diff --git a/projects/plugins/jetpack/changelog/remove-contact-form-hocs b/projects/plugins/jetpack/changelog/remove-contact-form-hocs
new file mode 100644
index 000000000000..3566d3d26c79
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/remove-contact-form-hocs
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Forms: Remove wrapping <div> element from form block.