diff --git a/projects/packages/forms/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation b/projects/packages/forms/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation
new file mode 100644
index 0000000000000..b9ccde2c38dbe
--- /dev/null
+++ b/projects/packages/forms/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: Add horizontal layout
diff --git a/projects/packages/forms/src/blocks/contact-form/block.json b/projects/packages/forms/src/blocks/contact-form/block.json
index 6b0acad514f13..73978b4fb2a7a 100644
--- a/projects/packages/forms/src/blocks/contact-form/block.json
+++ b/projects/packages/forms/src/blocks/contact-form/block.json
@@ -3,7 +3,7 @@
 	"apiVersion": 3,
 	"name": "jetpack/contact-form",
 	"title": "Form",
-	"description": "Create forms to collect data from site visitors and manage their responses.",
+	"description": "Create forms with layout support to collect data from site visitors and manage their responses.",
 	"keywords": [ "email", "feedback", "contact form" ],
 	"version": "12.5.0",
 	"textdomain": "jetpack-forms",
@@ -19,7 +19,18 @@
 			"padding": true,
 			"margin": true
 		},
-		"align": [ "wide", "full" ]
+		"align": [ "wide", "full" ],
+		"layout": {
+			"default": {
+				"type": "flex",
+				"flexWrap": "wrap"
+			},
+			"allowSwitching": false,
+			"allowEditing": true,
+			"allowOrientation": true,
+			"allowVerticalAlignment": false,
+			"allowJustification": false
+		}
 	},
 	"attributes": {},
 	"editorScript": "file:./editor.js"
diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js
index ef6e0d484adce..aae9de7276b35 100644
--- a/projects/packages/forms/src/blocks/contact-form/edit.js
+++ b/projects/packages/forms/src/blocks/contact-form/edit.js
@@ -192,7 +192,7 @@ function JetpackContactFormEdit( { name, attributes, setAttributes, clientId, cl
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			ref: innerRef,
-			className: formClassnames,
+			className: clsx( formClassnames, blockProps?.className ),
 			style: window.jetpackForms.generateStyleVariables( innerRef.current ),
 		},
 		{
diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss
index 7fd31d6d9f459..c45840a85abac 100644
--- a/projects/packages/forms/src/blocks/contact-form/editor.scss
+++ b/projects/packages/forms/src/blocks/contact-form/editor.scss
@@ -47,7 +47,6 @@
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-start;
-		flex-direction: row;
 		gap: var(--wp--style--block-gap, 1.5rem);
 
 		> div {
@@ -157,6 +156,44 @@
 			margin: unset;
 		}
 	}
+
+	/* Horizontal layout: fields flow side by side */
+	&.is-layout-flex {
+
+		.jetpack-contact-form {
+			flex-direction: row;
+
+			.wp-block {
+				flex: 1 1 auto;
+				min-width: 200px;
+				max-width: none;
+
+				&.wp-block-jetpack-button {
+					flex: 0 0 auto;
+					min-width: auto;
+				}
+
+				/* Responsive: stack on mobile */
+				@media (max-width: #{ (gb.$break-mobile) }) {
+					flex: 1 1 100%;
+					max-width: 100%;
+				}
+			}
+		}
+	}
+
+	/* Vertical layout: fields stack vertically */
+	&.is-layout-flow {
+
+		.jetpack-contact-form {
+			flex-direction: column;
+
+			.wp-block {
+				flex: 1 1 100%;
+				max-width: 100%;
+			}
+		}
+	}
 }
 
 .jetpack-contact-form .components-placeholder {
@@ -1208,3 +1245,4 @@
 		}
 	}
 }
+
diff --git a/projects/packages/forms/src/blocks/contact-form/index.js b/projects/packages/forms/src/blocks/contact-form/index.js
index 42a515b67d377..074a0a24b25a8 100644
--- a/projects/packages/forms/src/blocks/contact-form/index.js
+++ b/projects/packages/forms/src/blocks/contact-form/index.js
@@ -58,6 +58,17 @@ export const settings = {
 			margin: true,
 		},
 		align: [ 'wide', 'full' ],
+		layout: {
+			default: {
+				type: 'flex',
+				flexWrap: 'wrap',
+			},
+			allowSwitching: false,
+			allowEditing: true,
+			allowOrientation: true,
+			allowVerticalAlignment: false,
+			allowJustification: false,
+		},
 	},
 	attributes: defaultAttributes,
 	providesContext: {
diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss
index 1f1a00e82a2c6..d7b5382a5aeef 100644
--- a/projects/packages/forms/src/contact-form/css/grunion.scss
+++ b/projects/packages/forms/src/contact-form/css/grunion.scss
@@ -304,7 +304,6 @@ that needs to mimic the input element styles */
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: flex-start;
-	flex-direction: row;
 	flex-grow: 1;
 	gap: var(--wp--style--block-gap, 1.5rem);
 }
@@ -318,9 +317,50 @@ that needs to mimic the input element styles */
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: flex-start;
-	flex-direction: row;
 	flex-grow: 1;
 	gap: var(--wp--style--block-gap, 1.5rem);
+
+	/* Horizontal layout: fields flow side by side */
+	&.is-layout-flex {
+
+		.contact-form {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			gap: var(--wp--style--block-gap, 1.5rem);
+
+			> .grunion-field-wrap {
+				flex: 1 1 auto;
+				min-width: 200px;
+
+				/* Responsive: stack on mobile */
+				@media (max-width: 600px) {
+					flex: 1 1 100%;
+					max-width: 100%;
+				}
+			}
+
+			.contact-submit {
+				flex: 0 0 auto;
+				min-width: auto;
+			}
+		}
+	}
+
+	/* Vertical layout: fields stack vertically (default) */
+	&.is-layout-flow {
+
+		.contact-form {
+			display: flex;
+			flex-direction: column;
+			gap: var(--wp--style--block-gap, 1.5rem);
+
+			> .grunion-field-wrap {
+				flex: 1 1 100%;
+				max-width: 100%;
+			}
+		}
+	}
 }
 
 .wp-block-jetpack-contact-form > *:not(.wp-block-jetpack-button) {
@@ -1243,3 +1283,4 @@ on production builds, the attributes are being reordered, causing side-effects
 .contact-form-ajax-submission:not(.submission-success) {
 	display: none;
 }
+
diff --git a/projects/plugins/jetpack/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation b/projects/plugins/jetpack/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation
new file mode 100644
index 0000000000000..b0b991cd83f23
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation
@@ -0,0 +1,5 @@
+Significance: patch
+Type: enhancement
+Comment: test
+
+