diff --git a/projects/plugins/jetpack/changelog/add-form-loading b/projects/plugins/jetpack/changelog/add-form-loading
new file mode 100644
index 0000000000000..5f09e874086ba
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-form-loading
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add a blur effect while the form is loading the styles
diff --git a/projects/plugins/jetpack/changelog/add-form-style-variations b/projects/plugins/jetpack/changelog/add-form-style-variations
new file mode 100644
index 0000000000000..a904856e66c7d
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-form-style-variations
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Include style variations for the Form block
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js b/projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js
index 9d9759cd6e00f..78ce30f4d81a7 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js
@@ -207,6 +207,7 @@ const EditTextarea = props => {
 
 	return (
 		<JetpackFieldTextarea
+			clientId={ props.clientId }
 			label={ props.attributes.label }
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-dropdown.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-dropdown.js
index d9fb61f2600d6..148d14cb3b2e4 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-dropdown.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-dropdown.js
@@ -1,9 +1,10 @@
 import { RichText } from '@wordpress/block-editor';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
 import { isEmpty, isNil, noop, split, trim } from 'lodash';
 import { setFocus } from '../util/focus';
-import { useFormWrapper } from '../util/form';
+import { useFormStyle, useFormWrapper } from '../util/form';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
@@ -17,6 +18,12 @@ export const JetpackDropdownEdit = ( {
 } ) => {
 	const { id, label, options, required, requiredText, toggleLabel, width } = attributes;
 	const optionsWrapper = useRef();
+	const formStyle = useFormStyle( clientId );
+
+	const classes = classnames( 'jetpack-field jetpack-field-dropdown', {
+		'is-selected': isSelected,
+		'has-placeholder': ! isEmpty( toggleLabel ),
+	} );
 
 	useFormWrapper( { attributes, clientId, name } );
 
@@ -100,17 +107,18 @@ export const JetpackDropdownEdit = ( {
 	const { blockStyle } = useJetpackFieldStyles( attributes );
 
 	return (
-		<div style={ blockStyle }>
-			<JetpackFieldLabel
-				required={ required }
-				requiredText={ requiredText }
-				label={ label }
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				isSelected={ isSelected }
-			/>
-			<div className="jetpack-field-dropdown">
-				<div style={ blockStyle } className="jetpack-field-dropdown__toggle">
+		<div className={ classes } style={ blockStyle }>
+			<div className="jetpack-field-dropdown__wrapper">
+				<JetpackFieldLabel
+					required={ required }
+					requiredText={ requiredText }
+					label={ label }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					style={ formStyle }
+				/>
+				<div className="jetpack-field-dropdown__toggle">
 					<RichText
 						value={ toggleLabel }
 						onChange={ value => {
@@ -121,25 +129,24 @@ export const JetpackDropdownEdit = ( {
 					/>
 					<span className="jetpack-field-dropdown__icon" />
 				</div>
-
-				{ isSelected && (
-					<div className="jetpack-field-dropdown__popover" ref={ optionsWrapper }>
-						{ options.map( ( option, index ) => (
-							<RichText
-								key={ index }
-								value={ option }
-								onChange={ handleChangeOption( index ) }
-								onSplit={ handleSplitOption( index ) }
-								onRemove={ handleDeleteOption( index ) }
-								onReplace={ noop }
-								placeholder={ __( 'Add option…', 'jetpack' ) }
-								__unstableDisableFormats
-							/>
-						) ) }
-					</div>
-				) }
 			</div>
 
+			{ isSelected && (
+				<div className="jetpack-field-dropdown__popover" ref={ optionsWrapper }>
+					{ options.map( ( option, index ) => (
+						<RichText
+							key={ index }
+							value={ option }
+							onChange={ handleChangeOption( index ) }
+							onSplit={ handleSplitOption( index ) }
+							onRemove={ handleDeleteOption( index ) }
+							onReplace={ noop }
+							placeholder={ __( 'Add option…', 'jetpack' ) }
+							__unstableDisableFormats
+						/>
+					) ) }
+				</div>
+			) }
 			<JetpackFieldControls
 				id={ id }
 				required={ required }
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-label.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-label.js
index e04447af59352..d8bb4664f320a 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-label.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-label.js
@@ -1,62 +1,87 @@
 import { RichText } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
 import { isNil } from 'lodash';
+import { FORM_STYLE } from '../util/form';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
-const JetpackFieldLabel = ( {
-	setAttributes,
+const FieldLabel = ( {
+	attributes,
+	className,
 	label,
 	labelFieldName,
 	placeholder,
 	resetFocus,
 	required,
 	requiredText,
-	attributes,
+	setAttributes,
 } ) => {
-	useEffect( () => {
-		if ( isNil( requiredText ) ) {
-			setAttributes( { requiredText: __( '(required)', 'jetpack' ) } );
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
 	const { labelStyle } = useJetpackFieldStyles( attributes );
 
 	return (
-		<div className="jetpack-field-label">
-			<div style={ labelStyle }>
+		<div className={ classnames( className, 'jetpack-field-label' ) } style={ labelStyle }>
+			<RichText
+				tagName="label"
+				value={ label }
+				className="jetpack-field-label__input"
+				onChange={ value => {
+					resetFocus && resetFocus();
+					if ( labelFieldName ) {
+						setAttributes( { [ labelFieldName ]: value } );
+						return;
+					}
+					setAttributes( { label: value } );
+				} }
+				placeholder={ placeholder ?? __( 'Add label…', 'jetpack' ) }
+				withoutInteractiveFormatting
+				allowedFormats={ [ 'core/bold', 'core/italic' ] }
+			/>
+			{ required && (
 				<RichText
-					tagName="label"
-					value={ label }
-					className="jetpack-field-label__input"
+					tagName="span"
+					value={ requiredText }
+					className="required"
 					onChange={ value => {
-						resetFocus && resetFocus();
-						if ( labelFieldName ) {
-							setAttributes( { [ labelFieldName ]: value } );
-							return;
-						}
-						setAttributes( { label: value } );
+						setAttributes( { requiredText: value } );
 					} }
-					placeholder={ placeholder ?? __( 'Add label…', 'jetpack' ) }
 					withoutInteractiveFormatting
 					allowedFormats={ [ 'core/bold', 'core/italic' ] }
 				/>
-				{ required && (
-					<RichText
-						tagName="span"
-						value={ requiredText }
-						className="required"
-						onChange={ value => {
-							setAttributes( { requiredText: value } );
-						} }
-						withoutInteractiveFormatting
-						allowedFormats={ [ 'core/bold', 'core/italic' ] }
-					/>
-				) }
-			</div>
+			) }
 		</div>
 	);
 };
 
+const JetpackFieldLabel = props => {
+	const { setAttributes, requiredText, style } = props;
+
+	const classes = classnames( {
+		'notched-label__label': style === FORM_STYLE.OUTLINED,
+		'animated-label__label': style === FORM_STYLE.ANIMATED,
+		'below-label__label': style === FORM_STYLE.BELOW,
+	} );
+
+	useEffect( () => {
+		if ( isNil( requiredText ) ) {
+			setAttributes( { requiredText: __( '(required)', 'jetpack' ) } );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	if ( style === FORM_STYLE.OUTLINED ) {
+		return (
+			<div className="notched-label">
+				<div className="notched-label__leading" />
+				<div className="notched-label__notch">
+					<FieldLabel className={ classes } { ...props } />
+				</div>
+				<div className="notched-label__trailing" />
+			</div>
+		);
+	}
+
+	return <FieldLabel className={ classes } { ...props } />;
+};
+
 export default JetpackFieldLabel;
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js
index 52e2b31327c36..46250d8f0c054 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-multiple.js
@@ -2,6 +2,8 @@ import { Button } from '@wordpress/components';
 import { withInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
+import { useFormStyle } from '../util/form';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import JetpackOption from './jetpack-option';
@@ -9,6 +11,7 @@ import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
 function JetpackFieldMultiple( props ) {
 	const {
+		clientId,
 		id,
 		type,
 		instanceId,
@@ -21,6 +24,12 @@ function JetpackFieldMultiple( props ) {
 		options,
 		attributes,
 	} = props;
+	const formStyle = useFormStyle( clientId );
+
+	const classes = classnames( 'jetpack-field jetpack-field-multiple', {
+		'is-selected': isSelected,
+		'has-placeholder': options.length,
+	} );
 
 	const [ inFocus, setInFocus ] = useState( null );
 
@@ -60,10 +69,11 @@ function JetpackFieldMultiple( props ) {
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
 
 	return (
-		<div style={ blockStyle }>
+		<>
 			<div
 				id={ `jetpack-field-multiple-${ instanceId }` }
-				className="jetpack-field jetpack-field-multiple"
+				className={ classes }
+				style={ blockStyle }
 			>
 				<JetpackFieldLabel
 					required={ required }
@@ -73,6 +83,7 @@ function JetpackFieldMultiple( props ) {
 					isSelected={ isSelected }
 					resetFocus={ () => setInFocus( null ) }
 					attributes={ attributes }
+					style={ formStyle }
 				/>
 				<ol
 					className="jetpack-field-multiple__list"
@@ -112,7 +123,7 @@ function JetpackFieldMultiple( props ) {
 				type={ type }
 				width={ width }
 			/>
-		</div>
+		</>
 	);
 }
 
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js
index 45fcdb82eeb9a..23c72377b961d 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-textarea.js
@@ -1,22 +1,31 @@
-import { TextareaControl, Disabled } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { isNil } from 'lodash';
+import classnames from 'classnames';
+import { isEmpty, isNil } from 'lodash';
+import { useFormStyle } from '../util/form';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
 export default function JetpackFieldTextarea( props ) {
 	const {
+		attributes,
+		clientId,
 		id,
+		isSelected,
 		required,
 		requiredText,
 		label,
 		setAttributes,
 		placeholder,
 		width,
-		attributes,
 	} = props;
+	const formStyle = useFormStyle( clientId );
+	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
+
+	const classes = classnames( 'jetpack-field jetpack-field-textarea', {
+		'is-selected': isSelected,
+		'has-placeholder': ! isEmpty( placeholder ),
+	} );
 
 	useEffect( () => {
 		if ( isNil( label ) ) {
@@ -25,27 +34,24 @@ export default function JetpackFieldTextarea( props ) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
-	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
-
 	return (
 		<>
-			<div style={ blockStyle } className="jetpack-field">
+			<div className={ classes } style={ blockStyle }>
 				<JetpackFieldLabel
+					clientId={ clientId }
 					required={ required }
 					requiredText={ requiredText }
 					label={ label }
 					setAttributes={ setAttributes }
 					attributes={ attributes }
+					style={ formStyle }
+				/>
+				<textarea
+					className="jetpack-field__textarea"
+					value={ placeholder }
+					onChange={ e => setAttributes( { placeholder: e.target.value } ) }
+					style={ fieldStyle }
 				/>
-				<Disabled>
-					<TextareaControl
-						placeholder={ placeholder }
-						value={ placeholder }
-						onChange={ value => setAttributes( { placeholder: value } ) }
-						title={ __( 'Set the placeholder text', 'jetpack' ) }
-						style={ fieldStyle }
-					/>
-				</Disabled>
 			</div>
 
 			<JetpackFieldControls
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js
index 9e40c8538776b..2f3c68b28f5c7 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field.js
@@ -1,46 +1,52 @@
-import { TextControl, Disabled } from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
+import { isEmpty } from 'lodash';
+import { useFormStyle } from '../util/form';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
 export default function JetpackField( props ) {
 	const {
+		attributes,
+		clientId,
 		id,
-		type,
+		isSelected,
 		required,
 		requiredText,
 		label,
 		setAttributes,
 		placeholder,
 		width,
-		attributes,
 	} = props;
 
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
+	const formStyle = useFormStyle( clientId );
+
+	const classes = classnames( 'jetpack-field', {
+		'is-selected': isSelected,
+		'has-placeholder': ! isEmpty( placeholder ),
+	} );
 
 	return (
 		<>
-			<div className="jetpack-field" style={ blockStyle }>
+			<div className={ classes } style={ blockStyle }>
 				<JetpackFieldLabel
+					attributes={ attributes }
+					label={ label }
 					required={ required }
 					requiredText={ requiredText }
-					label={ label }
 					setAttributes={ setAttributes }
-					attributes={ attributes }
+					style={ formStyle }
+				/>
+				<input
+					className="jetpack-field__input"
+					onChange={ e => setAttributes( { placeholder: e.target.value } ) }
+					style={ fieldStyle }
+					type="text"
+					value={ placeholder }
 				/>
-				<Disabled>
-					<TextControl
-						type={ type }
-						placeholder={ placeholder }
-						value={ placeholder }
-						onChange={ value => setAttributes( { placeholder: value } ) }
-						title={ __( 'Set the placeholder text', 'jetpack' ) }
-						style={ fieldStyle }
-					/>
-				</Disabled>
 			</div>
 
 			<JetpackFieldControls
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js
index 9eaa81e1cb20c..038450dcb143f 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-option.js
@@ -50,7 +50,7 @@ class JetpackOption extends Component {
 		return (
 			<li className="jetpack-option">
 				{ type && type !== 'select' && (
-					<input style={ style } className="jetpack-option__type" type={ type } disabled />
+					<input className="jetpack-option__type" style={ style } type={ type } readOnly />
 				) }
 				<input
 					type="text"
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss b/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
index 2b8d34e83020f..8098d53cee8f8 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
@@ -260,7 +260,6 @@
 
 	.rich-text.jetpack-field-label__input {
 		cursor: text;
-		padding-right: 8px;
 		font-weight: bold;
 	}
 
@@ -268,7 +267,9 @@
 		word-break: normal;
 		color: unset;
 		opacity: 0.45;
-		font-size: 15px;
+		font-size: 85%;
+		margin-left: 0.25em;
+		font-weight: normal;
 	}
 
 	.components-toggle-control .components-base-control__field {
@@ -281,42 +282,31 @@
 	padding: 0;
 }
 
-input.components-text-control__input {
-	line-height: 16px;
-}
-
-/*
-	Gutenberg adds some default styling to the TextControl component
-	(https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_mixins.scss#L130)
-	For the TextareaControl, since the base styles are added to the StyledComponent,
-	(https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/textarea-control/styles/textarea-control-styles.ts#L13)
-	The output CSS has a lower specificity and it's being overridden on themes like
-	Twenty Twenty-One and Twenty Twenty-Two.
-	Adding this to normalize the styles between the TextControl and TextareaControl
- */
-:where(.jetpack-field) textarea.components-textarea-control__input {
-	border: 1px solid #757575;
+.jetpack-field__textarea {
+	min-height: 200px;
 }
 
 .jetpack-field {
-	// done to increase elevate specificity in order to overwrite calypso styles
-	.components-text-control__input.components-text-control__input {
+	.jetpack-field__input, .jetpack-field__textarea {
 		width: 100%;
-	}
-	input.components-text-control__input,
-	textarea.components-textarea-control__input {
-		color: #787c82;
-		padding: 12px 8px;
+		font: inherit;
+		box-sizing: border-box;
 		box-shadow: unset;
-		width: 100%;
+		border: 1px solid #8c8f94;
+		border-radius: 0;
+		padding: 16px;
+		margin: 0;
 	}
 
-	.components-base-control__field {
-		margin-bottom: 0;
+	.jetpack-field__textarea {
+		border: var(--jetpack--contact-form--border);
+		border-color: var(--jetpack--contact-form--border-color);
+		border-style: var(--jetpack--contact-form--border-style);
+		border-width: var(--jetpack--contact-form--border-size);
 	}
 
-	textarea.components-textarea-control__input {
-		min-height: 150px;
+	.components-base-control__field {
+		margin-bottom: 0;
 	}
 
 	&.jetpack-field-checkbox .jetpack-field-checkbox__checkbox,
@@ -327,10 +317,37 @@ input.components-text-control__input {
 	}
 
 	.jetpack-option__type.jetpack-option__type {
+		width: 1rem;
+		height: 1rem;
 		border-color: currentColor;
 		opacity: 1;
+		margin: 0 0.75rem 0 0
 	}
 
+	&.jetpack-field-multiple {
+		.jetpack-field-multiple__add-option {
+			margin: 0;
+			padding: 0;
+
+			.dashicon {
+				width: 1rem;
+				height: 1rem;
+				display: flex;
+				margin-left: 0;
+				margin-right: 0.75rem;
+
+				&:before {
+					font-size: 1rem;
+				}
+			}
+
+			svg {
+				margin-right: 12px;
+			}
+		}
+	}
+
+
 	.jetpack-field-consent__checkbox + .jetpack-field-label {
 		line-height: normal;
 	}
@@ -351,6 +368,9 @@ input.components-text-control__input {
 	list-style-type: none;
 	margin: 0;
 	padding-left: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25em;
 
 	&:empty {
 		display: none;
@@ -377,12 +397,13 @@ input.components-text-control__input {
 // Duplicated to elevate specificity in order to overwrite core styles
 .jetpack-option__input.jetpack-option__input.jetpack-option__input {
 	color: inherit;
-	border-color: transparent;
 	background: transparent;
+	border: none;
 	border-radius: 0;
 	flex-grow: 1;
-	line-height: normal;
+	line-height: 1.5;
 	font-size: inherit;
+	padding: 0;
 
 	&:hover {
 		border-color: #357cb5;
@@ -405,16 +426,6 @@ input.components-text-control__input {
 	vertical-align: bottom;
 }
 
-.jetpack-field-multiple__add-option {
-	margin-left: -6px;
-	padding: 4px;
-	padding-right: 8px;
-
-	svg {
-		margin-right: 12px;
-	}
-}
-
 .jetpack-field .components-base-control__label {
 	display: block;
 }
@@ -496,6 +507,10 @@ input.components-text-control__input {
 	flex-direction: column;
 	font-family: var(--jetpack--contact-form--font-family);
 
+	&__wrapper {
+		position: relative;
+	}
+
 	&__toggle {
 		border: var(--jetpack--contact-form--border);
 		border-color: var(--jetpack--contact-form--border-color);
@@ -559,6 +574,248 @@ input.components-text-control__input {
 	}
 }
 
+.jetpack-contact-form {
+	.jetpack-field {
+		.jetpack-field__input, .jetpack-field__textarea {
+			color: #787c82; //Simulates a placeholder color
+		}
+	}
+
+	&.is-style-outlined, &.is-style-animated {
+		.jetpack-field {
+			position: relative;
+		}
+	}
+
+	&.is-style-outlined {
+		.block-editor-block-list__block:not([contenteditable]):focus:after {
+			top: -10px;
+			left: -10px;
+			bottom: -10px;
+			right: -10px;
+		}
+
+		.jetpack-field {
+			--notch-width: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));
+			margin-top: 8px;
+			display: flex;
+
+			.notched-label {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				max-width: 100%;
+				height: 100%;
+				display: flex;
+				box-sizing: border-box;
+				text-align: left;
+				z-index: 1;
+			}
+
+			.notched-label__leading {
+				width: var(--notch-width);
+				border: var(--jetpack--contact-form--border);
+				border-color: var(--jetpack--contact-form--border-color);
+				border-style: var(--jetpack--contact-form--border-style);
+				border-width: var(--jetpack--contact-form--border-size);
+				border-right: none;
+				border-radius: var(--jetpack--contact-form--border-radius);
+				border-top-right-radius: unset;
+				border-bottom-right-radius: unset;
+			}
+
+			.notched-label__notch {
+				border-radius: unset;
+				border: var(--jetpack--contact-form--border);
+				border-color: var(--jetpack--contact-form--border-color);
+				border-style: var(--jetpack--contact-form--border-style);
+				border-width: var(--jetpack--contact-form--border-size);
+				padding: 0 4px;
+				transition: border 150ms linear;
+			}
+
+			// For some reason, when keeping the rule below together with the above selector,
+			// on production builds, the attributes are being reordered, causing side-effects
+			.notched-label__notch {
+				border-left: none;
+				border-right: none;
+			}
+
+			.notched-label__label {
+				position: relative;
+				top: 50%;
+				transform: translateY(-50%);
+				will-change: transform;
+				transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+				margin: 0;
+
+				label {
+					font-weight: 300;
+				}
+			}
+
+			.notched-label__trailing {
+				flex-grow: 1;
+				border: var(--jetpack--contact-form--border);
+				border-color: var(--jetpack--contact-form--border-color);
+				border-style: var(--jetpack--contact-form--border-style);
+				border-width: var(--jetpack--contact-form--border-size);
+				border-left: none;
+				border-radius: var(--jetpack--contact-form--border-radius);
+				border-top-left-radius: unset;
+				border-bottom-left-radius: unset;
+			}
+
+			&.jetpack-field-textarea .notched-label__label {
+				top: var(--jetpack--contact-form--input-padding-top, 16px);
+				transform: unset;
+			}
+
+			&.is-selected, &.has-placeholder {
+				.notched-label__notch {
+					border-top-color: transparent;
+				}
+
+				.notched-label__label,
+				{
+					top: calc(var(--jetpack--contact-form--border-size) * -1);
+					transform: translateY(-50%);
+					font-size: 0.8em;
+				}
+
+				&.jetpack-field-dropdown {
+					.jetpack-field-dropdown__toggle {
+						border-color: transparent;
+						padding-left: calc(var(--notch-width) + 4px);
+						padding-right: calc(var(--notch-width) + 4px);
+					}
+				}
+			}
+
+			&.jetpack-field-multiple {
+				background-color: var(--jetpack--contact-form--input-background);
+				border-radius: var(--jetpack--contact-form--border-radius);
+				border: var(--jetpack--contact-form--border);
+				border-color: var(--jetpack--contact-form--border-color);
+				border-style: var(--jetpack--contact-form--border-style);
+				border-width: var(--jetpack--contact-form--border-size);
+				padding: var(--jetpack--contact-form--input-padding, 16px);
+				padding-top: calc(var(--jetpack--contact-form--input-padding, 16px) + 4px);
+				border-top: none;
+
+				.notched-label {
+					height: unset;
+
+					&__leading, &__notch, &__trailing {
+						border-bottom: none;
+						border-left: none;
+						border-right: none;
+					}
+				}
+			}
+
+			.jetpack-field-dropdown {
+				&__popover .rich-text {
+					padding-left: calc(var(--notch-width) + 4px);
+					padding-right: calc(var(--notch-width) + 4px);
+				}
+
+				&__icon {
+					margin-right: 0;
+				}
+			}
+
+			.jetpack-field__input, .jetpack-field__textarea {
+				display: flex;
+				border-top-color: transparent !important; //Need to override styles coming from the style attribute
+				outline: none;
+				padding-left: calc(var(--notch-width) + 4px);
+				padding-right: calc(var(--notch-width) + 4px);
+			}
+		}
+	}
+
+	&.is-style-animated {
+		.jetpack-field {
+			--left-offset: calc(var(--jetpack--contact-form--input-padding-left, 16px) + var(--jetpack--contact-form--border-size));
+			--label-left: max(var(--left-offset), var(--jetpack--contact-form--border-radius));
+			--field-padding: calc(var(--label-left) - var(--jetpack--contact-form--border-size));
+
+			.jetpack-field__input {
+				outline: none;
+			}
+
+			.jetpack-field__textarea {
+				padding: var(--jetpack--contact-form--input-padding, 16px);
+				outline: none;
+			}
+
+			.jetpack-field__input,
+			.jetpack-field__textarea,
+			.jetpack-field-dropdown__toggle
+			{
+				padding-top: 1.4em;
+				padding-left: var(--field-padding);
+				padding-right: var(--field-padding);
+			}
+
+			&.jetpack-field-dropdown {
+				.jetpack-field-dropdown__popover {
+					.rich-text {
+						padding-left: var(--field-padding);
+						padding-right: var(--field-padding);
+					}
+				}
+			}
+
+			&.jetpack-field-multiple {
+				background-color: var(--jetpack--contact-form--input-background);
+				padding: var(--jetpack--contact-form--input-padding, 16px);
+				padding-top: 1.7em;
+				border-radius: var(--jetpack--contact-form--border-radius);
+				border: var(--jetpack--contact-form--border);
+				border-color: var(--jetpack--contact-form--border-color);
+				border-style: var(--jetpack--contact-form--border-style);
+				border-width: var(--jetpack--contact-form--border-size);
+			}
+
+			.animated-label__label {
+				position: absolute;
+				z-index: 1;
+				top: 50%;
+				left: var(--label-left);
+				width: 100%;
+				max-width: 100%;
+				box-sizing: border-box;
+				margin: 0;
+				transform: translateY(-50%);
+				transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+			}
+
+			&.jetpack-field-textarea .animated-label__label {
+				transform: unset;
+				top: var(--jetpack--contact-form--input-padding-top, 16px);
+			}
+
+			&.is-selected, &.has-placeholder {
+				.animated-label__label {
+					font-size: 0.75em;
+					transform: translateY(0);
+					top: calc(2px + var(--jetpack--contact-form--border-size));
+				}
+			}
+		}
+	}
+
+	&.is-style-below {
+		.jetpack-field:not(.jetpack-field-checkbox) {
+			display: flex;
+			flex-direction: column-reverse;
+		}
+	}
+}
+
 .block-editor-block-inspector .components-base-control .components-base-control:last-child {
 	margin-bottom: 0;
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/index.js b/projects/plugins/jetpack/extensions/blocks/contact-form/index.js
index 30782862af431..93b9914d3813c 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/index.js
@@ -76,6 +76,14 @@ export const settings = {
 			</div>
 		);
 	},
+	example: {},
+	styles: [
+		{ name: 'default', label: 'Default', isDefault: true },
+		{ name: 'animated', label: 'Animated' },
+		{ name: 'outlined', label: 'Outlined' },
+		// Need to figure out some details. Putting on hold for now
+		// { name: 'below', label: 'Below' },
+	],
 	variations,
 	category: 'contact-form',
 	transforms,
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/util/form.js b/projects/plugins/jetpack/extensions/blocks/contact-form/util/form.js
index 6fe2b41f614b6..e529d7276c705 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/util/form.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/util/form.js
@@ -4,8 +4,16 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
+const FORM_BLOCK_NAME = 'jetpack/contact-form';
+
+export const FORM_STYLE = {
+	ANIMATED: 'animated',
+	BELOW: 'below',
+	DEFAULT: 'default',
+	OUTLINED: 'outlined',
+};
+
 export const useFormWrapper = ( { attributes, clientId, name } ) => {
-	const FORM_BLOCK_NAME = 'jetpack/contact-form';
 	const BUTTON_BLOCK_NAME = 'jetpack/button';
 	const SUBMIT_BUTTON_ATTR = {
 		text: __( 'Submit', 'jetpack' ),
@@ -32,3 +40,21 @@ export const useFormWrapper = ( { attributes, clientId, name } ) => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 };
+
+export const getBlockStyle = className => {
+	const styleClass = className && className.match( /is-style-([^\s]+)/i );
+	return styleClass ? styleClass[ 1 ] : '';
+};
+
+export const useFormStyle = clientId => {
+	const formBlockAttributes = useSelect( select => {
+		const [ formBlockClientId ] = select( blockEditorStore ).getBlockParentsByBlockName(
+			clientId,
+			FORM_BLOCK_NAME
+		);
+
+		return select( blockEditorStore ).getBlockAttributes( formBlockClientId );
+	} );
+
+	return getBlockStyle( formBlockAttributes?.className ) || FORM_STYLE.DEFAULT;
+};
diff --git a/projects/plugins/jetpack/modules/contact-form/css/grunion.css b/projects/plugins/jetpack/modules/contact-form/css/grunion.css
index f239c1ab54f09..a9960dcd31e17 100644
--- a/projects/plugins/jetpack/modules/contact-form/css/grunion.css
+++ b/projects/plugins/jetpack/modules/contact-form/css/grunion.css
@@ -2,10 +2,6 @@
 	clear: both;
 }
 
-.contact-form input {
-	font: inherit;
-}
-
 .contact-form input::placeholder {
 	transition: opacity 0.3s ease-out;
 }
@@ -24,13 +20,24 @@
 	.contact-form input[type='text'],
 	.contact-form input[type='email'],
 	.contact-form input[type='tel'],
-	.contact-form input[type='url']
+	.contact-form input[type='url'],
+	.contact-form textarea
 ) {
 	box-sizing: border-box;
 	width: 100%;
-	padding: 12px 8px;
-	border-width: 1px;
-	line-height: normal;
+	padding: 16px;
+	font: inherit;
+	border: 1px solid #8c8f94;
+	border-radius: 0;
+}
+
+:where(.contact-form textarea) {
+	height: 200px;
+}
+
+.contact-form .grunion-field-wrap input,
+.contact-form .grunion-field-wrap textarea {
+	margin: 0;
 }
 
 .contact-form select {
@@ -38,15 +45,6 @@
 	min-width: 150px;
 }
 
-.contact-form textarea {
-	box-sizing: border-box;
-	float: none;
-	height: 200px;
-	width: 100%;
-	padding: 7px;
-	font: inherit;
-}
-
 .contact-form input[type='radio'],
 .contact-form input[type='checkbox'] {
 	width: 1rem;
@@ -82,11 +80,19 @@
 .contact-form label.checkbox,
 .contact-form label.checkbox-multiple,
 .contact-form label.radio {
-	margin-bottom: 0.25em;
+	margin-bottom: 0;
 	float: none;
 	font-weight: normal;
 	display: inline-flex;
 	align-items: center;
+	line-height: 1.5;
+}
+
+.contact-form .grunion-checkbox-multiple-options,
+.contact-form .grunion-radio-options {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25em
 }
 
 .contact-form label span {
@@ -246,10 +252,6 @@
 	width: 100%;
 }
 
-.contact-form-dropdown-wrap {
-	z-index: unset;
-}
-
 .contact-form .contact-form-dropdown__button.ui-button {
 	width: 100%;
 	box-sizing: border-box;
@@ -305,6 +307,9 @@
 	transform: rotate(225deg);
 	margin-top: 8px;
 }
+.contact-form .contact-form-dropdown__menu {
+	z-index: 1;
+}
 
 .contact-form .contact-form-dropdown__menu ul.ui-menu {
 	border: var(--jetpack--contact-form--border);
@@ -337,3 +342,229 @@
 	color: var(--jetpack--contact-form--input-background);
 	background-color: var(--jetpack--contact-form--text-color);
 }
+
+
+.contact-form .is-style-outlined .grunion-field-wrap:not(.grunion-field-checkbox-wrap):not(.grunion-field-consent-wrap),
+.contact-form .is-style-animated .grunion-field-wrap:not(.grunion-field-checkbox-wrap):not(.grunion-field-consent-wrap) {
+	--notch-width: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));
+	position: relative;
+	display: flex;
+	flex-direction: row-reverse;
+}
+
+.contact-form .is-style-outlined .grunion-field-checkbox-multiple-wrap,
+.contact-form .is-style-outlined .grunion-field-radio-wrap {
+	background-color: var(--jetpack--contact-form--input-background);
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-checkbox-multiple-options,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-radio-options
+{
+	padding: var(--jetpack--contact-form--input-padding, 16px);
+	padding-top: calc(var(--jetpack--contact-form--input-padding, 16px) + 4px);
+	flex-grow: 1;
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label {
+	position: absolute;
+	right: 0;
+	left: 0;
+	width: 100%;
+	max-width: 100%;
+	height: 100%;
+	display: flex;
+	box-sizing: border-box;
+	text-align: left;
+	pointer-events: none;
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__leading {
+	width: var(--notch-width);
+	border-radius: var(--jetpack--contact-form--border-radius);
+	border: var(--jetpack--contact-form--border);
+	border-color: var(--jetpack--contact-form--border-color);
+	border-style: var(--jetpack--contact-form--border-style);
+	border-width: var(--jetpack--contact-form--border-size);
+	border-right: none;
+	border-top-right-radius: unset;
+	border-bottom-right-radius: unset;
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__notch {
+	border-radius: unset;
+	border: var(--jetpack--contact-form--border);
+	border-color: var(--jetpack--contact-form--border-color);
+	border-style: var(--jetpack--contact-form--border-style);
+	border-width: var(--jetpack--contact-form--border-size);
+	padding: 0 4px;
+	transition: border 150ms linear;
+}
+
+/*
+For some reason, when keeping the rule below together with the above selector,
+on production builds, the attributes are being reordered, causing side-effects
+*/
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__notch {
+	border-left: none;
+	border-right: none;
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap.no-label .notched-label__notch {
+	padding: 0;
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__label {
+	position: relative;
+	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-textarea-wrap .notched-label .notched-label__label {
+	top: var(--jetpack--contact-form--input-padding-top, 16px);
+	transform: unset;
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__trailing {
+	flex-grow: 1;
+	border-radius: var(--jetpack--contact-form--border-radius);
+	border: var(--jetpack--contact-form--border);
+	border-color: var(--jetpack--contact-form--border-color);
+	border-style: var(--jetpack--contact-form--border-style);
+	border-width: var(--jetpack--contact-form--border-size);
+	border-left: none;
+	border-top-left-radius: unset;
+	border-bottom-left-radius: unset;
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-field:focus ~ .notched-label .notched-label__notch,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .notched-label .notched-label__notch,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-field.has-placeholder ~ .notched-label .notched-label__notch,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options ~ .notched-label .notched-label__notch,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options ~ .notched-label .notched-label__notch
+{
+	border-top-color: transparent;
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-field:focus ~ .notched-label .notched-label__label,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .notched-label .notched-label__label,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-field.has-placeholder ~ .notched-label .notched-label__label,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options ~ .notched-label .notched-label__label,
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options ~ .notched-label .notched-label__label
+{
+	top: calc(var(--jetpack--contact-form--border-size) * -1);
+	transform: translateY(-50%);
+	font-size: 0.8em;
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap > input,
+.contact-form .is-style-outlined .grunion-field-wrap > textarea,
+.contact-form .is-style-outlined .grunion-field-wrap .contact-form-dropdown__button
+{
+	border-color: transparent !important; /* Need to override styles coming from the style attribute*/
+	outline: none;
+	padding-left: calc(var(--notch-width) + 4px);
+	padding-right: calc(var(--notch-width) + 4px);
+}
+
+.contact-form .is-style-outlined .grunion-field-wrap textarea {
+	padding: var(--jetpack--contact-form--input-padding, 16px);
+	padding-left: calc(var(--notch-width) + 4px);
+	padding-right: calc(var(--notch-width) + 4px);
+}
+
+.contact-form .is-style-outlined .contact-form-dropdown__menu .ui-menu-item-wrapper {
+	padding-left: calc(var(--notch-width) + 4px);
+	padding-right: calc(var(--notch-width) + 4px);
+}
+
+.contact-form .is-style-animated .grunion-field-wrap {
+	--left-offset: calc(var(--jetpack--contact-form--input-padding-left, 16px) + var(--jetpack--contact-form--border-size));
+	--label-left: max(var(--left-offset), var(--jetpack--contact-form--border-radius));
+	--field-padding: calc(var(--label-left) - var(--jetpack--contact-form--border-size));
+}
+
+.contact-form .is-style-animated .grunion-field-wrap input {
+	outline: none;
+}
+
+.contact-form .is-style-animated .grunion-field-wrap textarea {
+	padding: var(--jetpack--contact-form--input-padding, 16px);
+	outline: none;
+}
+
+.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) > input,
+.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) > textarea,
+.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) .contact-form-dropdown__button
+{
+	padding-top: 1.4em;
+	padding-left: var(--field-padding);
+	padding-right: var(--field-padding);
+}
+
+.contact-form .is-style-animated .grunion-field-wrap .contact-form-dropdown__menu .ui-menu-item-wrapper {
+	padding-left: var(--field-padding);
+	padding-right: var(--field-padding);
+}
+
+.contact-form .is-style-animated .grunion-field-checkbox-multiple-wrap,
+.contact-form .is-style-animated .grunion-field-radio-wrap {
+	background-color: var(--jetpack--contact-form--input-background);
+	border-radius: var(--jetpack--contact-form--border-radius);
+	border: var(--jetpack--contact-form--border);
+	border-color: var(--jetpack--contact-form--border-color);
+	border-style: var(--jetpack--contact-form--border-style);
+	border-width: var(--jetpack--contact-form--border-size);
+}
+
+.contact-form .is-style-animated .grunion-field-checkbox-multiple-wrap .grunion-checkbox-multiple-options,
+.contact-form .is-style-animated .grunion-field-radio-wrap .grunion-radio-options {
+	padding-top: 1.7em;
+}
+
+.contact-form .is-style-animated .grunion-field-wrap .animated-label__label {
+	position: absolute;
+	top: 50%;
+	left: var(--label-left);
+	width: 100%;
+	max-width: 100%;
+	box-sizing: border-box;
+	pointer-events: none;
+	margin: 0;
+	transform: translateY(-50%);
+	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.contact-form .is-style-animated .grunion-field-textarea-wrap .animated-label__label {
+	transform: unset;
+	top: var(--jetpack--contact-form--input-padding-top, 16px);
+}
+
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field:focus ~ .animated-label__label,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .animated-label__label,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field.has-placeholder ~ .animated-label__label,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-checkbox-multiple-options ~ .animated-label__label,
+.contact-form .is-style-animated .grunion-field-wrap .grunion-radio-options ~ .animated-label__label
+{
+	font-size: 0.75em;
+	transform: translateY(0);
+	top: calc(2px + var(--jetpack--contact-form--border-size));
+}
+
+.contact-form .is-style-below .grunion-field-wrap .below-label__label {
+	margin-left: var(--jetpack--contact-form--border-size);
+}
+
+.wp-block-jetpack-contact-form-container {
+	filter: blur(10px);
+}
+
+.contact-form-styles-loaded .wp-block-jetpack-contact-form-container {
+	filter: blur(0px);
+}
diff --git a/projects/plugins/jetpack/modules/contact-form/grunion-contact-form.php b/projects/plugins/jetpack/modules/contact-form/grunion-contact-form.php
index a6b1be931654f..5eea08d4c223a 100644
--- a/projects/plugins/jetpack/modules/contact-form/grunion-contact-form.php
+++ b/projects/plugins/jetpack/modules/contact-form/grunion-contact-form.php
@@ -2481,6 +2481,7 @@ public function __construct( $attributes, $content = null ) {
 			'customThankyouMessage'  => __( 'Thank you for your submission!', 'jetpack' ), // The message to show when customThankyou is set to 'message'.
 			'customThankyouRedirect' => '', // The URL to redirect to when customThankyou is set to 'redirect'.
 			'jetpackCRM'             => true, // Whether Jetpack CRM should store the form submission.
+			'className'              => null,
 		);
 
 		$attributes = shortcode_atts( $this->defaults, $attributes, 'contact-form' );
@@ -4037,6 +4038,13 @@ class Grunion_Contact_Form_Field extends Crunion_Contact_Form_Shortcode {
 	 */
 	public $error = false;
 
+	/**
+	 * Styles to be applied to the field
+	 *
+	 * @var string
+	 */
+	public $block_styles = '';
+
 	/**
 	 * Styles to be applied to the field
 	 *
@@ -4266,39 +4274,32 @@ public function render() {
 		$class               = 'date' === $field_type ? 'jp-contact-form-date' : $this->get_attribute( 'class' );
 
 		if ( is_numeric( $this->get_attribute( 'borderradius' ) ) ) {
-			$this->field_styles .= $this->get_attribute( 'type' ) === 'select'
-				? '--jetpack--contact-form--border-radius: ' . esc_attr( $this->get_attribute( 'borderradius' ) ) . 'px;'
-				: 'border-radius: ' . (int) $this->get_attribute( 'borderradius' ) . 'px;';
+			$this->block_styles .= '--jetpack--contact-form--border-radius: ' . esc_attr( $this->get_attribute( 'borderradius' ) ) . 'px;';
+			$this->field_styles .= 'border-radius: ' . (int) $this->get_attribute( 'borderradius' ) . 'px;';
 		}
 		if ( is_numeric( $this->get_attribute( 'borderwidth' ) ) ) {
-			$this->field_styles .= $this->get_attribute( 'type' ) === 'select'
-				? '--jetpack--contact-form--border-size: ' . esc_attr( $this->get_attribute( 'borderwidth' ) ) . 'px;'
-				: 'border-width: ' . (int) $this->get_attribute( 'borderwidth' ) . 'px;';
+			$this->block_styles .= '--jetpack--contact-form--border-size: ' . esc_attr( $this->get_attribute( 'borderwidth' ) ) . 'px;';
+			$this->field_styles .= 'border-width: ' . (int) $this->get_attribute( 'borderwidth' ) . 'px;';
 		}
 		if ( is_numeric( $this->get_attribute( 'lineheight' ) ) ) {
-			$this->field_styles .= $this->get_attribute( 'type' ) === 'select'
-				? '--jetpack--contact-form--line-height: ' . esc_attr( $this->get_attribute( 'lineheight' ) ) . ';'
-				: 'line-height: ' . (int) $this->get_attribute( 'lineheight' ) . ';';
+			$this->block_styles .= '--jetpack--contact-form--line-height: ' . esc_attr( $this->get_attribute( 'lineheight' ) ) . ';';
+			$this->field_styles .= 'line-height: ' . (int) $this->get_attribute( 'lineheight' ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'bordercolor' ) ) ) {
-			$this->field_styles .= $this->get_attribute( 'type' ) === 'select'
-				? '--jetpack--contact-form--border-color: ' . esc_attr( $this->get_attribute( 'bordercolor' ) ) . ';'
-				: 'border-color: ' . esc_attr( $this->get_attribute( 'bordercolor' ) ) . ';';
+			$this->block_styles .= '--jetpack--contact-form--border-color: ' . esc_attr( $this->get_attribute( 'bordercolor' ) ) . ';';
+			$this->field_styles .= 'border-color: ' . esc_attr( $this->get_attribute( 'bordercolor' ) ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'inputcolor' ) ) ) {
-			$this->field_styles .= $this->get_attribute( 'type' ) === 'select'
-				? '--jetpack--contact-form--text-color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';'
-				: 'color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
+			$this->block_styles .= '--jetpack--contact-form--text-color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
+			$this->field_styles .= 'color: ' . esc_attr( $this->get_attribute( 'inputcolor' ) ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'fieldbackgroundcolor' ) ) ) {
-			$this->field_styles .= $this->get_attribute( 'type' ) === 'select'
-				? '--jetpack--contact-form--input-background: ' . esc_attr( $this->get_attribute( 'fieldbackgroundcolor' ) ) . ';'
-				: 'background-color: ' . esc_attr( $this->get_attribute( 'fieldbackgroundcolor' ) ) . ';';
+			$this->block_styles .= '--jetpack--contact-form--input-background: ' . esc_attr( $this->get_attribute( 'fieldbackgroundcolor' ) ) . ';';
+			$this->field_styles .= 'background-color: ' . esc_attr( $this->get_attribute( 'fieldbackgroundcolor' ) ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'fieldfontsize' ) ) ) {
-			$this->field_styles .= $this->get_attribute( 'type' ) === 'select'
-				? '--jetpack--contact-form--font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';'
-				: 'font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
+			$this->block_styles .= '--jetpack--contact-form--font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
+			$this->field_styles .= 'font-size: ' . esc_attr( $this->get_attribute( 'fieldfontsize' ) ) . ';';
 		}
 
 		if ( ! empty( $this->get_attribute( 'labelcolor' ) ) ) {
@@ -4308,9 +4309,7 @@ public function render() {
 			$this->label_styles .= 'font-size: ' . esc_attr( $this->get_attribute( 'labelfontsize' ) ) . ';';
 		}
 		if ( is_numeric( $this->get_attribute( 'labellineheight' ) ) ) {
-			$this->label_styles .= $this->get_attribute( 'type' ) === 'select'
-				? '--jetpack--contact-form--line-height: ' . esc_attr( $this->get_attribute( 'labellineheight' ) ) . ';'
-				: 'line-height: ' . (int) $this->get_attribute( 'labellineheight' ) . ';';
+			$this->label_styles .= 'line-height: ' . (int) $this->get_attribute( 'labellineheight' ) . ';';
 		}
 
 		if ( ! empty( $field_width ) ) {
@@ -4401,6 +4400,11 @@ public function render() {
 	 * @return string HTML
 	 */
 	public function render_label( $type, $id, $label, $required, $required_field_text, $extra_attrs = array() ) {
+		$form_style = $this->get_form_style();
+
+		if ( ! empty( $form_style ) && $form_style !== 'default' ) {
+			return '';
+		}
 
 		if ( ! empty( $this->label_styles ) ) {
 			$extra_attrs['style'] = $this->label_styles;
@@ -4412,6 +4416,7 @@ public function render_label( $type, $id, $label, $required, $required_field_tex
 				$extra_attrs_string .= sprintf( '%s="%s" ', esc_attr( $attr ), esc_attr( $val ) );
 			}
 		}
+
 		$type_class = $type ? ' ' . $type : '';
 		return "<label
 				for='" . esc_attr( $id ) . "'
@@ -4566,19 +4571,15 @@ public function render_textarea_field( $id, $label, $value, $class, $required, $
 	 * @return string HTML
 	 */
 	public function render_radio_field( $id, $label, $value, $class, $required, $required_field_text ) {
-		$field = $this->render_label( '', $id, $label, $required, $required_field_text );
+		$field  = $this->render_label( '', $id, $label, $required, $required_field_text );
+		$field .= '<div class="grunion-radio-options">';
 
-		$field_style = 'style="';
-		if ( $this->get_attribute( 'fieldbackgroundcolor' ) ) {
-			$field_style .= 'border-width: ' . $this->get_attribute( 'borderwidth' ) . '; background-color: ' . $this->get_attribute( 'fieldbackgroundcolor' );
-		}
-		$field_style .= '"';
+		$field_style = 'style="' . $this->field_styles . '"';
 
 		foreach ( (array) $this->get_attribute( 'options' ) as $option_index => $option ) {
 			$option = Grunion_Contact_Form_Plugin::strip_tags( $option );
 			if ( is_string( $option ) && $option !== '' ) {
-				$field .= "\t\t<label class='grunion-radio-label radio" . ( $this->is_error() ? ' form-error' : '' ) . "'>";
-				$field .= "<span {$field_style}>";
+				$field .= "\t\t<label {$field_style} class='grunion-radio-label radio" . ( $this->is_error() ? ' form-error' : '' ) . "'>";
 				$field .= "<input
 									type='radio'
 									name='" . esc_attr( $id ) . "'
@@ -4587,10 +4588,10 @@ public function render_radio_field( $id, $label, $value, $class, $required, $req
 									. checked( $option, $value, false ) . ' '
 									. ( $required ? "required aria-required='true'" : '' )
 									. '/> ';
-				$field .= esc_html( $option ) . "</span></label>\n";
-				$field .= "\t\t<div class='clear-form'></div>\n";
+				$field .= esc_html( $option ) . "</label>\n";
 			}
 		}
+		$field .= '</div>';
 		return $field;
 	}
 
@@ -4651,23 +4652,20 @@ private function render_consent_field( $id, $class ) {
 	 * @return string HTML
 	 */
 	public function render_checkbox_multiple_field( $id, $label, $value, $class, $required, $required_field_text ) {
-		$field = $this->render_label( '', $id, $label, $required, $required_field_text );
+		$field  = $this->render_label( '', $id, $label, $required, $required_field_text );
+		$field .= '<div class="grunion-checkbox-multiple-options">';
 
-		$field_style = 'style="';
-		if ( $this->get_attribute( 'fieldbackgroundcolor' ) ) {
-			$field_style .= 'background-color: ' . $this->get_attribute( 'fieldbackgroundcolor' );
-		}
-		$field_style .= '"';
+		$field_style = 'style="' . $this->field_styles . '"';
 
 		foreach ( (array) $this->get_attribute( 'options' ) as $option_index => $option ) {
 			$option = Grunion_Contact_Form_Plugin::strip_tags( $option );
 			if ( is_string( $option ) && $option !== '' ) {
-				$field .= "\t\t<label class='grunion-checkbox-multiple-label checkbox-multiple" . ( $this->is_error() ? ' form-error' : '' ) . "'>";
-				$field .= "<span {$field_style}><input type='checkbox' name='" . esc_attr( $id ) . "[]' value='" . esc_attr( $this->get_option_value( $this->get_attribute( 'values' ), $option_index, $option ) ) . "' " . $class . checked( in_array( $option, (array) $value, true ), true, false ) . ' /> ';
-				$field .= esc_html( $option ) . "</span></label>\n";
-				$field .= "\t\t<div class='clear-form'></div>\n";
+				$field .= "\t\t<label {$field_style} class='grunion-checkbox-multiple-label checkbox-multiple " . ( $this->is_error() ? ' form-error' : '' ) . "'>";
+				$field .= "<input type='checkbox' name='" . esc_attr( $id ) . "[]' value='" . esc_attr( $this->get_option_value( $this->get_attribute( 'values' ), $option_index, $option ) ) . "' " . $class . checked( in_array( $option, (array) $value, true ), true, false ) . ' /> ';
+				$field .= esc_html( $option ) . "</label>\n";
 			}
 		}
+		$field .= '</div>';
 
 		return $field;
 	}
@@ -4686,7 +4684,6 @@ public function render_checkbox_multiple_field( $id, $label, $value, $class, $re
 	 */
 	public function render_select_field( $id, $label, $value, $class, $required, $required_field_text ) {
 		$field  = $this->render_label( 'select', $id, $label, $required, $required_field_text );
-		$field .= '<div style="' . $this->field_styles . '">';
 		$field .= "\t<select name='" . esc_attr( $id ) . "' id='" . esc_attr( $id ) . "' " . $class . ( $required ? "required aria-required='true'" : '' ) . ">\n";
 
 		if ( $this->get_attribute( 'togglelabel' ) ) {
@@ -4703,7 +4700,7 @@ public function render_select_field( $id, $label, $value, $class, $required, $re
 								. "</option>\n";
 			}
 		}
-		$field .= "\t</select></div>\n";
+		$field .= "\t</select>\n";
 
 		wp_enqueue_style(
 			'jquery-ui-selectmenu',
@@ -4790,6 +4787,77 @@ public function render_default_field( $id, $label, $value, $class, $required, $r
 		return $field;
 	}
 
+	/**
+	 * Return the HTML for the outlined label.
+	 *
+	 * @param int    $id - the ID.
+	 * @param string $label - the label.
+	 * @param bool   $required - if the field is marked as required.
+	 * @param string $required_field_text - the text in the required text field.
+	 *
+	 * @return string HTML
+	 */
+	public function render_outline_label( $id, $label, $required, $required_field_text ) {
+		return '
+			<div class="notched-label">
+				<div class="notched-label__leading"></div>
+				<div class="notched-label__notch">
+					<label
+						for="' . esc_attr( $id ) . '"
+						class="notched-label__label ' . ( $this->is_error() ? ' form-error' : '' ) . '"
+						style="' . $this->label_styles . '"
+					>'
+						. esc_html( $label )
+						. ( $required ? '<span>' . $required_field_text . '</span>' : '' ) .
+					'</label>
+				</div>
+				<div class="notched-label__trailing"></div>
+			</div>';
+	}
+
+	/**
+	 * Return the HTML for the animated label.
+	 *
+	 * @param int    $id - the ID.
+	 * @param string $label - the label.
+	 * @param bool   $required - if the field is marked as required.
+	 * @param string $required_field_text - the text in the required text field.
+	 *
+	 * @return string HTML
+	 */
+	public function render_animated_label( $id, $label, $required, $required_field_text ) {
+		return '
+			<label
+				for="' . esc_attr( $id ) . '"
+				class="animated-label__label ' . ( $this->is_error() ? ' form-error' : '' ) . '"
+				style="' . $this->label_styles . '"
+			>'
+				. esc_html( $label )
+				. ( $required ? '<span>' . $required_field_text . '</span>' : '' ) .
+			'</label>';
+	}
+
+	/**
+	 * Return the HTML for the below label.
+	 *
+	 * @param int    $id - the ID.
+	 * @param string $label - the label.
+	 * @param bool   $required - if the field is marked as required.
+	 * @param string $required_field_text - the text in the required text field.
+	 *
+	 * @return string HTML
+	 */
+	public function render_below_label( $id, $label, $required, $required_field_text ) {
+		return '
+			<label
+				for="' . esc_attr( $id ) . '"
+				class="below-label__label ' . ( $this->is_error() ? ' form-error' : '' ) . '"
+			>'
+				. esc_html( $label )
+				. ( $required ? '<span>' . $required_field_text . '</span>' : '' ) .
+				'</label>';
+	}
+
 	/**
 	 * Return the HTML for the email field.
 	 *
@@ -4805,10 +4873,21 @@ public function render_default_field( $id, $label, $value, $class, $required, $r
 	 * @return string HTML
 	 */
 	public function render_field( $type, $id, $label, $value, $class, $placeholder, $required, $required_field_text ) {
+		$class .= ' grunion-field';
+
 		if ( $type === 'select' ) {
 			$class .= ' contact-form-dropdown';
 		}
 
+		$form_style = $this->get_form_style();
+		if ( ! empty( $form_style ) && $form_style !== 'default' ) {
+			if ( empty( $placeholder ) ) {
+				$placeholder .= ' ';
+			} else {
+				$class .= ' has-placeholder';
+			}
+		}
+
 		$field_placeholder = ( ! empty( $placeholder ) ) ? "placeholder='" . esc_attr( $placeholder ) . "'" : '';
 		$field_class       = "class='" . trim( esc_attr( $type ) . ' ' . esc_attr( $class ) ) . "' ";
 		$wrap_classes      = empty( $class ) ? '' : implode( '-wrap ', array_filter( explode( ' ', $class ) ) ) . '-wrap'; // this adds
@@ -4817,7 +4896,11 @@ public function render_field( $type, $id, $label, $value, $class, $placeholder,
 			$wrap_classes .= ' ui-front';
 		}
 
-		$shell_field_class = "class='grunion-field-wrap grunion-field-" . trim( esc_attr( $type ) . '-wrap ' . esc_attr( $wrap_classes ) ) . "' ";
+		if ( empty( $label ) ) {
+			$wrap_classes .= ' no-label';
+		}
+
+		$shell_field_class = "class='grunion-field-" . trim( esc_attr( $type ) . '-wrap ' . esc_attr( $wrap_classes ) ) . "' ";
 
 		/**
 		 * Filter the Contact Form required field text
@@ -4831,8 +4914,8 @@ public function render_field( $type, $id, $label, $value, $class, $placeholder,
 		$required_field_text = esc_html( apply_filters( 'jetpack_required_field_text', $required_field_text ) );
 
 		$block_style = 'style="';
-		if ( $type === 'select' ) {
-			$block_style .= $this->field_styles;
+		if ( $type === 'select' || in_array( $form_style, array( 'outlined', 'animated' ), true ) ) {
+			$block_style .= $this->block_styles;
 		}
 		$block_style .= '"';
 
@@ -4842,6 +4925,7 @@ public function render_field( $type, $id, $label, $value, $class, $placeholder,
 		if ( current_user_can( 'manage_options' ) ) {
 			$value = '';
 		}
+
 		switch ( $type ) {
 			case 'email':
 				$field .= $this->render_email_field( $id, $label, $value, $field_class, $required, $required_field_text, $field_placeholder );
@@ -4877,6 +4961,21 @@ public function render_field( $type, $id, $label, $value, $class, $placeholder,
 				$field .= $this->render_default_field( $id, $label, $value, $field_class, $required, $required_field_text, $field_placeholder, $type );
 				break;
 		}
+
+		if ( ! empty( $form_style ) && $form_style !== 'default' && ! in_array( $type, array( 'checkbox', 'consent' ), true ) ) {
+			switch ( $form_style ) {
+				case 'outlined':
+					$field .= $this->render_outline_label( $id, $label, $required, $required_field_text );
+					break;
+				case 'animated':
+					$field .= $this->render_animated_label( $id, $label, $required, $required_field_text );
+					break;
+				case 'below':
+					$field .= $this->render_below_label( $id, $label, $required, $required_field_text );
+					break;
+			}
+		}
+
 		$field .= "\t</div>\n";
 		return $field;
 	}
@@ -4911,6 +5010,17 @@ private function maybe_override_type() {
 
 		return $type;
 	}
+
+	/**
+	 * Gets the form style based on its CSS class.
+	 *
+	 * @return string The form style type.
+	 */
+	private function get_form_style() {
+		$class_name = $this->form->get_attribute( 'className' );
+		preg_match( '/is-style-([^\s]+)/i', $class_name, $matches );
+		return count( $matches ) >= 2 ? $matches[1] : null;
+	}
 }
 
 add_action( 'init', array( 'Grunion_Contact_Form_Plugin', 'init' ), 9 );
diff --git a/projects/plugins/jetpack/modules/contact-form/js/form-styles.js b/projects/plugins/jetpack/modules/contact-form/js/form-styles.js
index 3def87e060b12..3735ac242ae8b 100644
--- a/projects/plugins/jetpack/modules/contact-form/js/form-styles.js
+++ b/projects/plugins/jetpack/modules/contact-form/js/form-styles.js
@@ -7,16 +7,16 @@ window.addEventListener( 'load', () => {
 		generateStyleVariables( EDITOR_SELECTOR );
 	} );
 
-	observer.observe( document.querySelector( 'body' ), {
-		childList: true,
-		subtree: true,
-	} );
-
 	//Make sure to execute at least once if not triggered by the observer
 	setTimeout( () => {
 		generateStyleVariables( FRONTEND_SELECTOR );
 		generateStyleVariables( EDITOR_SELECTOR );
-	}, 300 );
+
+		observer.observe( document.querySelector( 'body' ), {
+			childList: true,
+			subtree: true,
+		} );
+	}, 100 );
 } );
 
 function generateStyleVariables( selector, outputSelector = 'body' ) {
@@ -29,7 +29,7 @@ function generateStyleVariables( selector, outputSelector = 'body' ) {
 				<div class="wp-block-button__link">Test</div>
 			</div>
 			<div class="jetpack-field">
-				<input class="components-text-control__input" type="text">
+				<input class="jetpack-field__input" type="text">
 			</div>
 		</div>
 	`;
@@ -37,14 +37,26 @@ function generateStyleVariables( selector, outputSelector = 'body' ) {
 	const iframeCanvas = document.querySelector( 'iframe[name="editor-canvas"]' );
 	const doc = iframeCanvas ? iframeCanvas.contentDocument : document;
 
-	if (
-		! doc.querySelectorAll( selector ).length ||
-		doc.querySelectorAll( `.${ STYLE_PROBE_CLASS }` ).length
-	) {
+	if ( ! doc.querySelectorAll( selector ).length ) {
 		return;
 	}
 
-	const styleProbe = doc.createElement( 'div' );
+	let styleProbe = doc.querySelector( `.${ STYLE_PROBE_CLASS }` );
+	const outputContainer = doc.querySelector( outputSelector );
+
+	if ( styleProbe ) {
+		const node = styleProbe.querySelector( 'input[type="text"]' );
+		const inputBorder = window.getComputedStyle( node ).border;
+		const currentInputBorder = outputContainer.style.getPropertyValue(
+			'--jetpack--contact-form--border'
+		);
+
+		if ( inputBorder === currentInputBorder ) {
+			return;
+		}
+	}
+
+	styleProbe = doc.createElement( 'div' );
 	styleProbe.className = STYLE_PROBE_CLASS;
 	styleProbe.style = STYLE_PROBE_STYLE;
 	styleProbe.innerHTML = HTML;
@@ -56,12 +68,15 @@ function generateStyleVariables( selector, outputSelector = 'body' ) {
 	const buttonNode = styleProbe.querySelector( '.wp-block-button__link' );
 	const inputNode = styleProbe.querySelector( 'input[type="text"]' );
 
-	const backgroundColor = window.getComputedStyle( bodyNode ).backgroundColor;
+	const backgroundColor = getBackgroundColor( bodyNode );
+	const inputBackground = getBackgroundColor( inputNode );
 	const primaryColor = window.getComputedStyle( buttonNode ).borderColor;
+
 	const {
 		color: textColor,
 		padding: inputPadding,
-		backgroundColor: inputBackground,
+		paddingTop: inputPaddingTop,
+		paddingLeft: inputPaddingLeft,
 		border,
 		borderColor,
 		borderWidth,
@@ -72,7 +87,6 @@ function generateStyleVariables( selector, outputSelector = 'body' ) {
 		lineHeight,
 	} = window.getComputedStyle( inputNode );
 
-	const outputContainer = doc.querySelector( outputSelector );
 	outputContainer.style.setProperty( '--jetpack--contact-form--primary-color', primaryColor );
 	outputContainer.style.setProperty( '--jetpack--contact-form--background-color', backgroundColor );
 	outputContainer.style.setProperty( '--jetpack--contact-form--text-color', textColor );
@@ -83,7 +97,32 @@ function generateStyleVariables( selector, outputSelector = 'body' ) {
 	outputContainer.style.setProperty( '--jetpack--contact-form--border-radius', borderRadius );
 	outputContainer.style.setProperty( '--jetpack--contact-form--input-background', inputBackground );
 	outputContainer.style.setProperty( '--jetpack--contact-form--input-padding', inputPadding );
+	outputContainer.style.setProperty(
+		'--jetpack--contact-form--input-padding-top',
+		inputPaddingTop
+	);
+	outputContainer.style.setProperty(
+		'--jetpack--contact-form--input-padding-left',
+		inputPaddingLeft
+	);
 	outputContainer.style.setProperty( '--jetpack--contact-form--font-size', fontSize );
 	outputContainer.style.setProperty( '--jetpack--contact-form--font-family', fontFamily );
 	outputContainer.style.setProperty( '--jetpack--contact-form--line-height', lineHeight );
+
+	setTimeout( () => {
+		bodyNode.classList.add( 'contact-form-styles-loaded' );
+	}, 200 );
+}
+
+function getBackgroundColor( backgroundColorNode ) {
+	let backgroundColor = window.getComputedStyle( backgroundColorNode ).backgroundColor;
+	while (
+		backgroundColor === 'rgba(0, 0, 0, 0)' &&
+		backgroundColorNode.parentNode &&
+		backgroundColorNode.parentNode.nodeType === window.Node.ELEMENT_NODE
+	) {
+		backgroundColorNode = backgroundColorNode.parentNode;
+		backgroundColor = window.getComputedStyle( backgroundColorNode ).backgroundColor;
+	}
+	return backgroundColor;
 }
diff --git a/projects/plugins/jetpack/tests/php/modules/contact-form/test-class.grunion-contact-form.php b/projects/plugins/jetpack/tests/php/modules/contact-form/test-class.grunion-contact-form.php
index 75a39cbdf3284..342923df47799 100644
--- a/projects/plugins/jetpack/tests/php/modules/contact-form/test-class.grunion-contact-form.php
+++ b/projects/plugins/jetpack/tests/php/modules/contact-form/test-class.grunion-contact-form.php
@@ -930,7 +930,7 @@ public function assertCommonValidHtml( $wrapper_div, $attributes ) {
 			$attributes['class'] = 'jp-contact-form-date';
 		}
 
-		$css_class = "grunion-field-wrap grunion-field-{$attributes['type']}-wrap {$attributes['class']}-wrap";
+		$css_class = "grunion-field-{$attributes['type']}-wrap {$attributes['class']}-wrap grunion-field-wrap";
 
 		if ( 'select' === $attributes['type'] ) {
 			$css_class .= ' contact-form-dropdown-wrap ui-front';
@@ -1000,13 +1000,13 @@ public function assertValidField( $html, $attributes ) {
 		if ( 'date' === $attributes['type'] ) {
 			$this->assertEquals(
 				$input->getAttribute( 'class' ),
-				"{$attributes['type']} jp-contact-form-date",
+				"{$attributes['type']} jp-contact-form-date grunion-field",
 				'input class attribute doesn\'t match'
 			);
 		} else {
 			$this->assertEquals(
 				$input->getAttribute( 'class' ),
-				"{$attributes['type']} {$attributes['class']}",
+				"{$attributes['type']} {$attributes['class']} grunion-field",
 				'input class attribute doesn\'t match'
 			);
 		}
@@ -1035,7 +1035,7 @@ public function assertValidCheckboxField( $html, $attributes ) {
 			$this->assertEquals( 'checked', $input->getAttribute( 'checked' ), 'Input checked doesn\'t match' );
 		}
 
-		$this->assertEquals( $input->getAttribute( 'class' ), $attributes['type'] . ' ' . $attributes['class'], 'Input class doesn\'t match' );
+		$this->assertEquals( $input->getAttribute( 'class' ), $attributes['type'] . ' ' . $attributes['class'] . ' grunion-field', 'Input class doesn\'t match' );
 	}
 
 	/**
@@ -1069,7 +1069,7 @@ public function assertValidFieldMultiField( $html, $attributes ) {
 				'label for does not equal input name!'
 			);
 
-			$this->assertEquals( $select->getAttribute( 'class' ), 'select ' . $attributes['class'] . ' contact-form-dropdown', ' select class does not match expected' );
+			$this->assertEquals( $select->getAttribute( 'class' ), 'select ' . $attributes['class'] . ' grunion-field contact-form-dropdown', ' select class does not match expected' );
 
 			// Options.
 			$options = $select->getElementsByTagName( 'option' );
@@ -1107,7 +1107,7 @@ public function assertValidFieldMultiField( $html, $attributes ) {
 					$this->assertEquals( $input->getAttribute( 'name' ), $attributes['id'] . '[]', 'Input name doesn\'t match' );
 				}
 				$this->assertEquals( $input->getAttribute( 'value' ), $attributes['values'][ $i ], 'Input value doesn\'t match' );
-				$this->assertEquals( $input->getAttribute( 'class' ), $attributes['type'] . ' ' . $attributes['class'], 'Input class doesn\'t match' );
+				$this->assertEquals( $input->getAttribute( 'class' ), $attributes['type'] . ' ' . $attributes['class'] . ' grunion-field', 'Input class doesn\'t match' );
 				if ( 0 === $i ) {
 					$this->assertEquals( 'checked', $input->getAttribute( 'checked' ), 'Input checked doesn\'t match' );
 				} else {