diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss
index e8918c0fc38c1..0eed484d20f36 100644
--- a/projects/packages/forms/src/blocks/contact-form/editor.scss
+++ b/projects/packages/forms/src/blocks/contact-form/editor.scss
@@ -278,6 +278,7 @@
 .jetpack-field-label {
 	display: flex;
 	flex-direction: row;
+	flex-wrap: wrap;
 	justify-content: flex-start;
 	align-items: baseline;
 
@@ -809,7 +810,6 @@
 				position: relative;
 				top: 50%;
 				transform: translateY(-50%);
-				will-change: transform;
 				transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 				margin: 0;
 
@@ -833,7 +833,10 @@
 				max-width: 100px;
 			}
 
-			.jetpack-field-label .jetpack-field-label__input {
+			.jetpack-field-label .jetpack-field-label__input,
+			.jetpack-field-label .required {
+				will-change: font-size;
+				transition: font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
 				margin-bottom: 0;
 			}
 
@@ -849,8 +852,18 @@
 				}
 
 				.notched-label__label {
-					top: calc(var(--jetpack--contact-form--border-top-size) * -1);
+					top: calc(var(--jetpack--contact-form--border-top-size, 1px) * -1);
 					transform: translateY(-50%);
+				}
+
+				.jetpack-field-label .required {
+					// The required text is always 85% of the label font size.
+					// The label font size is reduced to 0.8em in a separate rule, so that needs to be accounted for.
+					// 0.85 * 0.8 = 0.68em.
+					font-size: 0.68em;
+				}
+
+				.jetpack-field-label__input {
 					font-size: 0.8em;
 				}
 
diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php
index 183aa92e39357..45477dcef735d 100644
--- a/projects/packages/forms/src/contact-form/class-contact-form-field.php
+++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php
@@ -666,7 +666,7 @@ public function render_legend_as_label( $type, $id, $legend, $required, $require
 		return '<legend '
 				. $extra_attrs_string
 				. '>'
-				. esc_html( $legend )
+				. '<span class="grunion-label-text">' . esc_html( $legend ) . '</span>'
 				. ( $required ? '<span class="grunion-label-required">' . $required_field_text . '</span>' : '' )
 				. "</legend>\n";
 	}
@@ -1517,9 +1517,9 @@ public function render_outline_label( $id, $label, $required, $required_field_te
 						for="' . esc_attr( $id ) . '"
 						class=" ' . $classes . '"
 						style="' . $this->label_styles . esc_attr( $output_data['css_vars'] ) . '"
-					>'
-			. esc_html( $label )
-			. ( $required ? '<span class="grunion-label-required" aria-hidden="true">' . $required_field_text . '</span>' : '' ) .
+					>
+					<span class="grunion-label-text">' . esc_html( $label ) . '</span>'
+					. ( $required ? '<span class="grunion-label-required" aria-hidden="true">' . $required_field_text . '</span>' : '' ) .
 			'</label>
 				</div>
 				<div class="notched-label__filler' . esc_attr( $output_data['class_name'] ) . '" style="' . esc_attr( $output_data['style'] ) . '"></div>
diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css
index 5beb1b82ce8a6..9f6e58ff946cf 100644
--- a/projects/packages/forms/src/contact-form/css/grunion.css
+++ b/projects/packages/forms/src/contact-form/css/grunion.css
@@ -165,11 +165,12 @@
 }
 
 .wp-block-jetpack-contact-form.is-style-outlined .wp-block-jetpack-options legend {
-	font-size: 0.8em;
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
 	padding: 0 0.25em;
 	position: relative;
 	top: calc(var(--jetpack--contact-form--border-top-size, 1px) / 2 * -1);
-
 }
 
 .contact-form .grunion-checkbox-multiple-options .contact-form-field,
@@ -568,15 +569,27 @@ on production builds, the attributes are being reordered, causing side-effects
 
 .contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__label {
 	position: relative;
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
 	top: 50%;
 	transform: translateY(-50%);
 	pointer-events: none;
-	will-change: transform;
 	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 	margin: 0;
 	font-weight: 300;
 }
 
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label .grunion-label-text {
+	will-change: font-size;
+	transition: font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label .grunion-label-required {
+	will-change: font-size;
+	transition: font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .contact-form .is-style-outlined .grunion-field-wrap legend.grunion-field-label {
 	font-weight: 300;
 }
@@ -604,8 +617,6 @@ on production builds, the attributes are being reordered, causing side-effects
 .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__notch,
 .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .notched-label__notch,
 .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .notched-label__notch,
-.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-checkbox-multiple-options) .notched-label__notch,
-.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-radio-options) .notched-label__notch,
 .contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .notched-label__notch
 {
 	border-top-color: transparent !important;
@@ -614,23 +625,33 @@ on production builds, the attributes are being reordered, causing side-effects
 .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__label,
 .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .notched-label__label,
 .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .notched-label__label,
-.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-checkbox-multiple-options) .notched-label__label,
-.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-radio-options) .notched-label__label,
 .contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .notched-label__label
 {
 	top: calc( var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size)) * -1 );
 	transform: translateY(-50%);
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .grunion-label-text,
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .grunion-label-text,
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .grunion-label-text,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options .grunion-label-text,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options .grunion-label-text,
+.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .grunion-label-text {
 	font-size: 0.8em;
 }
 
-/* The following is scoped by the presence of the custom font size CSS var to avoid needing conditional fallback within the var() */
-.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__label[style*="--jetpack--contact-form--label--font-size"],
-.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .notched-label__label[style*="--jetpack--contact-form--label--font-size"],
-.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .notched-label__label[style*="--jetpack--contact-form--label--font-size"],
-.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-checkbox-multiple-options) .notched-label__label[style*="--jetpack--contact-form--label--font-size"],
-.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-radio-options) .notched-label__label[style*="--jetpack--contact-form--label--font-size"],
-.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .notched-label__label[style*="--jetpack--contact-form--label--font-size"] {
-	font-size: calc(var(--jetpack--contact-form--label--font-size) * 0.8);
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .grunion-label-required,
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .grunion-label-required,
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .grunion-label-required,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options .grunion-label-required,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options .grunion-label-required,
+.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .grunion-label-required {
+
+	/*
+	 * The font size should be 85% of the label font size, which is reduced separately to 0.8em for this focused style.
+	 * 0.85 * 0.8 = 0.68em.
+	 */
+	font-size: 0.68em;
 }
 
 .contact-form .is-style-outlined .grunion-field-wrap > input,