diff --git a/projects/plugins/jetpack/changelog/add-styling_for_input_fields b/projects/plugins/jetpack/changelog/add-styling_for_input_fields
new file mode 100644
index 000000000000..582fc7654ac3
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-styling_for_input_fields
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Form Block: add styling of input fields
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 b7be5eef5d00..9d9759cd6e00 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/child-blocks.js
@@ -50,6 +50,38 @@ const FieldDefaults = {
 			type: 'number',
 			default: 100,
 		},
+		borderRadius: {
+			type: 'number',
+			default: '',
+		},
+		borderWidth: {
+			type: 'number',
+			default: '',
+		},
+		labelFontSize: {
+			type: 'string',
+		},
+		fieldFontSize: {
+			type: 'string',
+		},
+		lineHeight: {
+			type: 'number',
+		},
+		labelLineHeight: {
+			type: 'number',
+		},
+		inputColor: {
+			type: 'string',
+		},
+		labelColor: {
+			type: 'string',
+		},
+		fieldBackgroundColor: {
+			type: 'string',
+		},
+		borderColor: {
+			type: 'string',
+		},
 	},
 	transforms: {
 		to: [
@@ -134,6 +166,7 @@ const editField = type => props => {
 
 	return (
 		<JetpackField
+			clientId={ props.clientId }
 			type={ type }
 			label={ getFieldLabel( props ) }
 			required={ props.attributes.required }
@@ -144,6 +177,7 @@ const editField = type => props => {
 			placeholder={ props.attributes.placeholder }
 			id={ props.attributes.id }
 			width={ props.attributes.width }
+			attributes={ props.attributes }
 		/>
 	);
 };
@@ -153,6 +187,7 @@ const editMultiField = type => props => {
 
 	return (
 		<JetpackFieldMultiple
+			clientId={ props.clientId }
 			label={ getFieldLabel( props ) }
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
@@ -162,6 +197,7 @@ const editMultiField = type => props => {
 			isSelected={ props.isSelected }
 			id={ props.attributes.id }
 			width={ props.attributes.width }
+			attributes={ props.attributes }
 		/>
 	);
 };
@@ -174,6 +210,7 @@ const EditTextarea = props => {
 			label={ props.attributes.label }
 			required={ props.attributes.required }
 			requiredText={ props.attributes.requiredText }
+			attributes={ props.attributes }
 			setAttributes={ props.setAttributes }
 			isSelected={ props.isSelected }
 			defaultValue={ props.attributes.defaultValue }
@@ -197,6 +234,7 @@ const EditCheckbox = props => {
 			defaultValue={ props.attributes.defaultValue }
 			id={ props.attributes.id }
 			width={ props.attributes.width }
+			attributes={ props.attributes }
 		/>
 	);
 };
@@ -214,6 +252,7 @@ const EditConsent = ( { attributes, clientId, isSelected, name, setAttributes }
 			implicitConsentMessage={ implicitConsentMessage }
 			explicitConsentMessage={ explicitConsentMessage }
 			setAttributes={ setAttributes }
+			attributes={ attributes }
 		/>
 	);
 };
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js
index 5be71285f5bc..eed2927f4ec5 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-checkbox.js
@@ -1,9 +1,17 @@
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	FontSizePicker,
+	InspectorAdvancedControls,
+	InspectorControls,
+	PanelColorSettings,
+} from '@wordpress/block-editor';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { withInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import JetpackFieldControls from './jetpack-field-controls';
+import JetpackFieldCss from './jetpack-field-css';
 import JetpackFieldLabel from './jetpack-field-label';
+import JetpackFieldWidth from './jetpack-field-width';
+import JetpackManageResponsesSettings from './jetpack-manage-responses-settings';
+import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
 function JetpackFieldCheckbox( props ) {
 	const {
@@ -15,12 +23,16 @@ function JetpackFieldCheckbox( props ) {
 		setAttributes,
 		width,
 		defaultValue,
+		attributes,
 	} = props;
 
+	const { blockStyle } = useJetpackFieldStyles( attributes );
+
 	return (
 		<div
 			id={ `jetpack-field-checkbox-${ instanceId }` }
 			className="jetpack-field jetpack-field-checkbox"
+			style={ blockStyle }
 		>
 			<input
 				className="jetpack-field-checkbox__checkbox"
@@ -33,12 +45,7 @@ function JetpackFieldCheckbox( props ) {
 				requiredText={ requiredText }
 				label={ label }
 				setAttributes={ setAttributes }
-			/>
-			<JetpackFieldControls
-				id={ id }
-				required={ required }
-				width={ width }
-				setAttributes={ setAttributes }
+				attributes={ attributes }
 			/>
 			<InspectorControls>
 				<PanelBody title={ __( 'Checkbox Settings', 'jetpack' ) }>
@@ -49,6 +56,50 @@ function JetpackFieldCheckbox( props ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Manage Responses', 'jetpack' ) }>
+					<JetpackManageResponsesSettings isChildBlock />
+				</PanelBody>
+				<PanelBody title={ __( 'Field Settings', 'jetpack' ) }>
+					<ToggleControl
+						label={ __( 'Field is required', 'jetpack' ) }
+						className="jetpack-field-label__required"
+						checked={ required }
+						onChange={ value => setAttributes( { required: value } ) }
+						help={ __( 'You can edit the "required" label in the editor', 'jetpack' ) }
+					/>
+					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
+				</PanelBody>
+
+				<PanelColorSettings
+					title={ __( 'Color', 'jetpack' ) }
+					initialOpen={ false }
+					colorSettings={ [
+						{
+							value: attributes.labelColor,
+							onChange: value => setAttributes( { labelColor: value } ),
+							label: __( 'Label Text', 'jetpack' ),
+						},
+					] }
+				></PanelColorSettings>
+				<PanelBody
+					title={ __( 'Label Styles', 'jetpack' ) }
+					initialOpen={ attributes.labelFontSize }
+				>
+					<FontSizePicker
+						withSlider
+						withReset={ true }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+						onChange={ labelFontSize => setAttributes( { labelFontSize } ) }
+						value={ attributes.labelFontSize }
+					/>
+				</PanelBody>
+			</InspectorControls>
+
+			<InspectorAdvancedControls>
+				<JetpackFieldCss setAttributes={ setAttributes } id={ id } />
+			</InspectorAdvancedControls>
 		</div>
 	);
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-consent.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-consent.js
index 86b7620ceef1..63eca578cb89 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-consent.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-consent.js
@@ -15,6 +15,7 @@ const JetpackFieldConsent = ( {
 	implicitConsentMessage,
 	explicitConsentMessage,
 	setAttributes,
+	attributes,
 } ) => {
 	return (
 		<div
@@ -32,6 +33,7 @@ const JetpackFieldConsent = ( {
 						explicit: explicitConsentMessage,
 					}[ consentType ] ?? ''
 				}
+				attributes={ attributes }
 				setAttributes={ setAttributes }
 				labelFieldName={ `${ consentType }ConsentMessage` }
 				placeholder={ sprintf(
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-controls.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-controls.js
index 1560f9bcb00f..5610504fa923 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-controls.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-controls.js
@@ -1,15 +1,20 @@
 import {
+	FontSizePicker,
 	InspectorAdvancedControls,
 	InspectorControls,
+	LineHeightControl,
 	BlockControls,
+	PanelColorSettings,
 } from '@wordpress/block-editor';
 import {
+	BaseControl,
 	PanelBody,
 	TextControl,
 	ToggleControl,
 	ToolbarGroup,
 	ToolbarButton,
 	Path,
+	RangeControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import renderMaterialIcon from '../../../shared/render-material-icon';
@@ -18,13 +23,48 @@ import JetpackFieldWidth from './jetpack-field-width';
 import JetpackManageResponsesSettings from './jetpack-manage-responses-settings';
 
 const JetpackFieldControls = ( {
-	setAttributes,
-	width,
+	attributes,
 	id,
-	required,
 	placeholder,
 	placeholderField = 'placeholder',
+	required,
+	setAttributes,
+	width,
+	type,
 } ) => {
+	const setNumberAttribute = ( key, parse = parseInt ) => value => {
+		const parsedValue = parse( value, 10 );
+
+		setAttributes( {
+			[ key ]: ! isNaN( parsedValue ) ? parsedValue : '',
+		} );
+	};
+
+	const hasBorderControls = type !== 'radio' && type !== 'checkbox';
+
+	const colorSettings = [
+		{
+			value: attributes.labelColor,
+			onChange: value => setAttributes( { labelColor: value } ),
+			label: __( 'Label Text', 'jetpack' ),
+		},
+		{
+			value: attributes.inputColor,
+			onChange: value => setAttributes( { inputColor: value } ),
+			label: __( 'Field Text', 'jetpack' ),
+		},
+		{
+			value: attributes.fieldBackgroundColor,
+			onChange: value => setAttributes( { fieldBackgroundColor: value } ),
+			label: __( 'Field Background', 'jetpack' ),
+		},
+		{
+			value: attributes.borderColor,
+			onChange: value => setAttributes( { borderColor: value } ),
+			label: __( 'Border', 'jetpack' ),
+		},
+	];
+
 	return (
 		<>
 			<BlockControls>
@@ -67,8 +107,72 @@ const JetpackFieldControls = ( {
 							'jetpack'
 						) }
 					/>
-
+				</PanelBody>
+				<PanelColorSettings
+					title={ __( 'Color', 'jetpack' ) }
+					initialOpen={ false }
+					colorSettings={ ! hasBorderControls ? colorSettings.slice( 0, 2 ) : colorSettings }
+				/>
+				<PanelBody title={ __( 'Input Field Styles', 'jetpack' ) } initialOpen={ false }>
 					<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
+					<BaseControl>
+						<FontSizePicker
+							withReset={ true }
+							size="__unstable-large"
+							__nextHasNoMarginBottom
+							onChange={ fieldFontSize => setAttributes( { fieldFontSize } ) }
+							value={ attributes.fieldFontSize }
+						/>
+					</BaseControl>
+					<BaseControl>
+						<LineHeightControl
+							__nextHasNoMarginBottom={ true }
+							__unstableInputWidth="100%"
+							value={ attributes.lineHeight }
+							onChange={ setNumberAttribute( 'lineHeight', parseFloat ) }
+							size="__unstable-large"
+						/>
+					</BaseControl>
+					{ hasBorderControls && (
+						<>
+							<RangeControl
+								label={ __( 'Border Width', 'jetpack' ) }
+								value={ attributes.borderWidth }
+								initialPosition={ 1 }
+								onChange={ setNumberAttribute( 'borderWidth' ) }
+								min={ 0 }
+								max={ 100 }
+							/>
+							<RangeControl
+								label={ __( 'Border Radius', 'jetpack' ) }
+								value={ attributes.borderRadius }
+								initialPosition={ 0 }
+								onChange={ setNumberAttribute( 'borderRadius' ) }
+								min={ 0 }
+								max={ 100 }
+							/>
+						</>
+					) }
+				</PanelBody>
+				<PanelBody title={ __( 'Label Styles', 'jetpack' ) } initialOpen={ false }>
+					<BaseControl>
+						<FontSizePicker
+							withReset={ true }
+							size="__unstable-large"
+							__nextHasNoMarginBottom
+							onChange={ labelFontSize => setAttributes( { labelFontSize } ) }
+							value={ attributes.labelFontSize }
+						/>
+					</BaseControl>
+					<BaseControl>
+						<LineHeightControl
+							__unstableInputWidth="100%"
+							__nextHasNoMarginBottom={ true }
+							value={ attributes.labelLineHeight }
+							onChange={ setNumberAttribute( 'labelLineHeight', parseFloat ) }
+							size="__unstable-large"
+						/>
+					</BaseControl>
 				</PanelBody>
 			</InspectorControls>
 
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 f3a5b165901f..d9fb61f2600d 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
@@ -6,6 +6,7 @@ import { setFocus } from '../util/focus';
 import { useFormWrapper } from '../util/form';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
+import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
 export const JetpackDropdownEdit = ( {
 	attributes,
@@ -96,17 +97,20 @@ export const JetpackDropdownEdit = ( {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
+	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 className="jetpack-field-dropdown__toggle">
+				<div style={ blockStyle } className="jetpack-field-dropdown__toggle">
 					<RichText
 						value={ toggleLabel }
 						onChange={ value => {
@@ -139,11 +143,13 @@ export const JetpackDropdownEdit = ( {
 			<JetpackFieldControls
 				id={ id }
 				required={ required }
+				attributes={ attributes }
 				setAttributes={ setAttributes }
 				width={ width }
 				placeholder={ toggleLabel }
 				placeholderField="toggleLabel"
+				type="dropdown"
 			/>
-		</>
+		</div>
 	);
 };
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 5be24d7935ff..e04447af5935 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
@@ -2,6 +2,7 @@ import { RichText } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isNil } from 'lodash';
+import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
 const JetpackFieldLabel = ( {
 	setAttributes,
@@ -11,6 +12,7 @@ const JetpackFieldLabel = ( {
 	resetFocus,
 	required,
 	requiredText,
+	attributes,
 } ) => {
 	useEffect( () => {
 		if ( isNil( requiredText ) ) {
@@ -19,36 +21,40 @@ const JetpackFieldLabel = ( {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
+	const { labelStyle } = useJetpackFieldStyles( attributes );
+
 	return (
 		<div className="jetpack-field-label">
-			<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 && (
+			<div style={ labelStyle }>
 				<RichText
-					tagName="span"
-					value={ requiredText }
-					className="required"
+					tagName="label"
+					value={ label }
+					className="jetpack-field-label__input"
 					onChange={ value => {
-						setAttributes( { requiredText: 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="span"
+						value={ requiredText }
+						className="required"
+						onChange={ value => {
+							setAttributes( { requiredText: value } );
+						} }
+						withoutInteractiveFormatting
+						allowedFormats={ [ 'core/bold', 'core/italic' ] }
+					/>
+				) }
+			</div>
 		</div>
 	);
 };
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 0bd0abe5b96b..52e2b31327c3 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
@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import JetpackFieldControls from './jetpack-field-controls';
 import JetpackFieldLabel from './jetpack-field-label';
 import JetpackOption from './jetpack-option';
+import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
 function JetpackFieldMultiple( props ) {
 	const {
@@ -18,6 +19,7 @@ function JetpackFieldMultiple( props ) {
 		isSelected,
 		width,
 		options,
+		attributes,
 	} = props;
 
 	const [ inFocus, setInFocus ] = useState( null );
@@ -55,8 +57,10 @@ function JetpackFieldMultiple( props ) {
 		setAttributes( { options: newOptions } );
 	};
 
+	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
+
 	return (
-		<>
+		<div style={ blockStyle }>
 			<div
 				id={ `jetpack-field-multiple-${ instanceId }` }
 				className="jetpack-field jetpack-field-multiple"
@@ -68,6 +72,7 @@ function JetpackFieldMultiple( props ) {
 					setAttributes={ setAttributes }
 					isSelected={ isSelected }
 					resetFocus={ () => setInFocus( null ) }
+					attributes={ attributes }
 				/>
 				<ol
 					className="jetpack-field-multiple__list"
@@ -83,6 +88,7 @@ function JetpackFieldMultiple( props ) {
 							onAddOption={ addNewOption }
 							isInFocus={ index === inFocus && isSelected }
 							isSelected={ isSelected }
+							style={ type !== 'select' ? fieldStyle : {} }
 						/>
 					) ) }
 				</ol>
@@ -101,10 +107,12 @@ function JetpackFieldMultiple( props ) {
 			<JetpackFieldControls
 				id={ id }
 				required={ required }
+				attributes={ attributes }
 				setAttributes={ setAttributes }
+				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 4c22d29092ab..45fcdb82eeb9 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
@@ -4,9 +4,19 @@ import { __ } from '@wordpress/i18n';
 import { isNil } from 'lodash';
 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 { id, required, requiredText, label, setAttributes, placeholder, width } = props;
+	const {
+		id,
+		required,
+		requiredText,
+		label,
+		setAttributes,
+		placeholder,
+		width,
+		attributes,
+	} = props;
 
 	useEffect( () => {
 		if ( isNil( label ) ) {
@@ -15,14 +25,17 @@ export default function JetpackFieldTextarea( props ) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
+	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
+
 	return (
 		<>
-			<div className="jetpack-field">
+			<div style={ blockStyle } className="jetpack-field">
 				<JetpackFieldLabel
 					required={ required }
 					requiredText={ requiredText }
 					label={ label }
 					setAttributes={ setAttributes }
+					attributes={ attributes }
 				/>
 				<Disabled>
 					<TextareaControl
@@ -30,6 +43,7 @@ export default function JetpackFieldTextarea( props ) {
 						value={ placeholder }
 						onChange={ value => setAttributes( { placeholder: value } ) }
 						title={ __( 'Set the placeholder text', 'jetpack' ) }
+						style={ fieldStyle }
 					/>
 				</Disabled>
 			</div>
@@ -40,6 +54,7 @@ export default function JetpackFieldTextarea( props ) {
 				setAttributes={ setAttributes }
 				width={ width }
 				placeholder={ placeholder }
+				attributes={ attributes }
 			/>
 		</>
 	);
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 4658de789923..9e40c8538776 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
@@ -4,18 +4,32 @@ import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 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 { id, type, required, requiredText, label, setAttributes, placeholder, width } = props;
+	const {
+		id,
+		type,
+		required,
+		requiredText,
+		label,
+		setAttributes,
+		placeholder,
+		width,
+		attributes,
+	} = props;
+
+	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
 
 	return (
 		<>
-			<div className="jetpack-field">
+			<div className="jetpack-field" style={ blockStyle }>
 				<JetpackFieldLabel
 					required={ required }
 					requiredText={ requiredText }
 					label={ label }
 					setAttributes={ setAttributes }
+					attributes={ attributes }
 				/>
 				<Disabled>
 					<TextControl
@@ -24,6 +38,7 @@ export default function JetpackField( props ) {
 						value={ placeholder }
 						onChange={ value => setAttributes( { placeholder: value } ) }
 						title={ __( 'Set the placeholder text', 'jetpack' ) }
+						style={ fieldStyle }
 					/>
 				</Disabled>
 			</div>
@@ -34,6 +49,7 @@ export default function JetpackField( props ) {
 				width={ width }
 				setAttributes={ setAttributes }
 				placeholder={ placeholder }
+				attributes={ attributes }
 			/>
 		</>
 	);
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 09f8f2e6e5bb..9eaa81e1cb20 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
@@ -46,11 +46,11 @@ class JetpackOption extends Component {
 	}
 
 	render() {
-		const { isSelected, option, type } = this.props;
+		const { isSelected, option, type, style } = this.props;
 		return (
 			<li className="jetpack-option">
 				{ type && type !== 'select' && (
-					<input className="jetpack-option__type" type={ type } disabled />
+					<input style={ style } className="jetpack-option__type" type={ type } disabled />
 				) }
 				<input
 					type="text"
@@ -60,6 +60,7 @@ class JetpackOption extends Component {
 					onChange={ this.onChangeOption }
 					onKeyDown={ this.onKeyPress }
 					ref={ this.textInput }
+					style={ style }
 				/>
 				{ isSelected && (
 					<Button
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/use-jetpack-field-styles.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/use-jetpack-field-styles.js
new file mode 100644
index 000000000000..96409b578d96
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/components/use-jetpack-field-styles.js
@@ -0,0 +1,39 @@
+import { isNumber } from 'lodash';
+
+export const useJetpackFieldStyles = attributes => {
+	const blockStyle = {
+		'--jetpack--contact-form--border-color': attributes.borderColor,
+		'--jetpack--contact-form--border-radius': isNumber( attributes.borderRadius )
+			? `${ attributes.borderRadius }px`
+			: null,
+		'--jetpack--contact-form--border-size': isNumber( attributes.borderWidth )
+			? `${ attributes.borderWidth }px`
+			: null,
+		'--jetpack--contact-form--input-background': attributes.fieldBackgroundColor,
+		'--jetpack--contact-form--font-size': attributes.fieldFontSize,
+		'--jetpack--contact-form--line-height': attributes.lineHeight,
+		'--jetpack--contact-form--text-color': attributes.inputColor,
+	};
+
+	const labelStyle = {
+		color: attributes.labelColor,
+		fontSize: attributes.labelFontSize,
+		lineHeight: attributes.labelLineHeight,
+	};
+
+	const fieldStyle = {
+		backgroundColor: attributes.fieldBackgroundColor,
+		borderColor: attributes.borderColor,
+		borderRadius: isNumber( attributes.borderRadius ) ? attributes.borderRadius : null,
+		borderWidth: isNumber( attributes.borderWidth ) ? attributes.borderWidth : null,
+		color: attributes.inputColor,
+		fontSize: attributes.fieldFontSize,
+		lineHeight: attributes.lineHeight,
+	};
+
+	return {
+		blockStyle,
+		fieldStyle,
+		labelStyle,
+	};
+};
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss b/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
index fdc68bd84cfd..2b8d34e83020 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
+++ b/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
@@ -498,6 +498,9 @@ input.components-text-control__input {
 
 	&__toggle {
 		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-radius: var(--jetpack--contact-form--border-radius);
 		background-color: var(--jetpack--contact-form--input-background);
 		color: var(--jetpack--contact-form--text-color);
@@ -536,6 +539,9 @@ input.components-text-control__input {
 
 	&__popover {
 		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-radius: var(--jetpack--contact-form--border-radius);
 		background-color: var(--jetpack--contact-form--input-background);
 		color: var(--jetpack--contact-form--text-color);
@@ -552,3 +558,7 @@ input.components-text-control__input {
 		}
 	}
 }
+
+.block-editor-block-inspector .components-base-control .components-base-control:last-child {
+	margin-bottom: 0;
+}
diff --git a/projects/plugins/jetpack/modules/contact-form/css/grunion.css b/projects/plugins/jetpack/modules/contact-form/css/grunion.css
index 765dee11c0b7..f239c1ab54f0 100644
--- a/projects/plugins/jetpack/modules/contact-form/css/grunion.css
+++ b/projects/plugins/jetpack/modules/contact-form/css/grunion.css
@@ -258,6 +258,9 @@
 	flex-direction: row-reverse;
 	justify-content: space-between;
 	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-radius: var(--jetpack--contact-form--border-radius);
 	background-color: var(--jetpack--contact-form--input-background);
 	color: var(--jetpack--contact-form--text-color);
@@ -305,6 +308,9 @@
 
 .contact-form .contact-form-dropdown__menu ul.ui-menu {
 	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-radius: var(--jetpack--contact-form--border-radius);
 	background-color: var(--jetpack--contact-form--input-background);
 	color: var(--jetpack--contact-form--text-color);
@@ -329,5 +335,5 @@
 	position: relative;
 	border: none;
 	color: var(--jetpack--contact-form--input-background);
-	background-color: var(--jetpack--contact-form--primary-color);
+	background-color: var(--jetpack--contact-form--text-color);
 }
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 9de0180838b3..afd4b5347220 100644
--- a/projects/plugins/jetpack/modules/contact-form/grunion-contact-form.php
+++ b/projects/plugins/jetpack/modules/contact-form/grunion-contact-form.php
@@ -3167,13 +3167,13 @@ public static function get_default_label_from_type( $type ) {
 				$str = __( 'Message', 'jetpack' );
 				break;
 			case 'checkbox-multiple':
-				$str = __( 'Choose several', 'jetpack' );
+				$str = __( 'Choose several options', 'jetpack' );
 				break;
 			case 'radio':
-				$str = __( 'Choose one', 'jetpack' );
+				$str = __( 'Choose one option', 'jetpack' );
 				break;
 			case 'select':
-				$str = __( 'Select one', 'jetpack' );
+				$str = __( 'Select one option', 'jetpack' );
 				break;
 			case 'consent':
 				$str = __( 'Consent', 'jetpack' );
@@ -4036,6 +4036,20 @@ class Grunion_Contact_Form_Field extends Crunion_Contact_Form_Shortcode {
 	 */
 	public $error = false;
 
+	/**
+	 * Styles to be applied to the field
+	 *
+	 * @var string
+	 */
+	public $field_styles = '';
+
+	/**
+	 * Styles to be applied to the field
+	 *
+	 * @var string
+	 */
+	public $label_styles = '';
+
 	/**
 	 * Constructor function.
 	 *
@@ -4053,6 +4067,9 @@ public function __construct( $attributes, $content = null, $form = null ) {
 				'requiredtext'           => null,
 				'options'                => array(),
 				'id'                     => null,
+				'style'                  => null,
+				'fieldbackgroundcolor'   => null,
+				'textcolor'              => null,
 				'default'                => null,
 				'values'                 => null,
 				'placeholder'            => null,
@@ -4061,6 +4078,15 @@ public function __construct( $attributes, $content = null, $form = null ) {
 				'consenttype'            => null,
 				'implicitconsentmessage' => null,
 				'explicitconsentmessage' => null,
+				'borderradius'           => null,
+				'borderwidth'            => null,
+				'lineheight'             => null,
+				'labellineheight'        => null,
+				'bordercolor'            => null,
+				'inputcolor'             => null,
+				'labelcolor'             => null,
+				'labelfontsize'          => null,
+				'fieldfontsize'          => null,
 			),
 			$attributes,
 			'contact-field'
@@ -4238,6 +4264,54 @@ public function render() {
 		$field_width         = $this->get_attribute( 'width' );
 		$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;';
+		}
+		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;';
+		}
+		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' ) . ';';
+		}
+		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' ) ) . ';';
+		}
+		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' ) ) . ';';
+		}
+		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' ) ) . ';';
+		}
+		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' ) ) . ';';
+		}
+
+		if ( ! empty( $this->get_attribute( 'labelcolor' ) ) ) {
+			$this->label_styles .= 'color: ' . esc_attr( $this->get_attribute( 'labelcolor' ) ) . ';';
+		}
+		if ( ! empty( $this->get_attribute( 'labelfontsize' ) ) ) {
+			$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' ) . ';';
+		}
+
 		if ( ! empty( $field_width ) ) {
 			$class .= ' grunion-field-width-' . $field_width;
 		}
@@ -4321,16 +4395,28 @@ public function render() {
 	 * @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.
+	 * @param array  $extra_attrs Array of key/value pairs to append as attributes to the element.
 	 *
 	 * @return string HTML
 	 */
-	public function render_label( $type, $id, $label, $required, $required_field_text ) {
+	public function render_label( $type, $id, $label, $required, $required_field_text, $extra_attrs = array() ) {
 
+		if ( ! empty( $this->label_styles ) ) {
+			$extra_attrs['style'] = $this->label_styles;
+		}
+
+		$extra_attrs_string = '';
+		if ( is_array( $extra_attrs ) && ! empty( $extra_attrs ) ) {
+			foreach ( $extra_attrs as $attr => $val ) {
+				$extra_attrs_string .= sprintf( '%s="%s" ', esc_attr( $attr ), esc_attr( $val ) );
+			}
+		}
 		$type_class = $type ? ' ' . $type : '';
 		return "<label
 				for='" . esc_attr( $id ) . "'
-				class='grunion-field-label{$type_class}" . ( $this->is_error() ? ' form-error' : '' ) . "'
-				>"
+				class='grunion-field-label{$type_class}" . ( $this->is_error() ? ' form-error' : '' ) . "'"
+				. $extra_attrs_string . '
+				>'
 				. esc_html( $label )
 				. ( $required ? '<span>' . $required_field_text . '</span>' : '' )
 			. "</label>\n";
@@ -4351,6 +4437,11 @@ class='grunion-field-label{$type_class}" . ( $this->is_error() ? ' form-error' :
 	 */
 	public function render_input_field( $type, $id, $value, $class, $placeholder, $required, $extra_attrs = array() ) {
 		$extra_attrs_string = '';
+
+		if ( ! empty( $this->field_styles ) ) {
+			$extra_attrs['style'] = $this->field_styles;
+		}
+
 		if ( is_array( $extra_attrs ) && ! empty( $extra_attrs ) ) {
 			foreach ( $extra_attrs as $attr => $val ) {
 				$extra_attrs_string .= sprintf( '%s="%s" ', esc_attr( $attr ), esc_attr( $val ) );
@@ -4449,6 +4540,7 @@ public function render_url_field( $id, $label, $value, $class, $required, $requi
 	public function render_textarea_field( $id, $label, $value, $class, $required, $required_field_text, $placeholder ) {
 		$field  = $this->render_label( 'textarea', 'contact-form-comment-' . $id, $label, $required, $required_field_text );
 		$field .= "<textarea
+		                style='" . $this->field_styles . "'
 		                name='" . esc_attr( $id ) . "'
 		                id='contact-form-comment-" . esc_attr( $id ) . "'
 		                rows='20' "
@@ -4474,10 +4566,18 @@ public function render_textarea_field( $id, $label, $value, $class, $required, $
 	 */
 	public function render_radio_field( $id, $label, $value, $class, $required, $required_field_text ) {
 		$field = $this->render_label( '', $id, $label, $required, $required_field_text );
+
+		$field_style = 'style="';
+		if ( $this->get_attribute( 'fieldbackgroundcolor' ) ) {
+			$field_style .= 'border-width: ' . $this->get_attribute( 'borderwidth' ) . '; background-color: ' . $this->get_attribute( 'fieldbackgroundcolor' );
+		}
+		$field_style .= '"';
+
 		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 .= "<input
 									type='radio'
 									name='" . esc_attr( $id ) . "'
@@ -4486,7 +4586,7 @@ public function render_radio_field( $id, $label, $value, $class, $required, $req
 									. checked( $option, $value, false ) . ' '
 									. ( $required ? "required aria-required='true'" : '' )
 									. '/> ';
-				$field .= esc_html( $option ) . "</label>\n";
+				$field .= esc_html( $option ) . "</span></label>\n";
 				$field .= "\t\t<div class='clear-form'></div>\n";
 			}
 		}
@@ -4506,11 +4606,11 @@ public function render_radio_field( $id, $label, $value, $class, $required, $req
 	 * @return string HTML
 	 */
 	public function render_checkbox_field( $id, $label, $value, $class, $required, $required_field_text ) {
-		$field      = "<label class='grunion-field-label checkbox" . ( $this->is_error() ? ' form-error' : '' ) . "'>";
-			$field .= "\t\t<input type='checkbox' name='" . esc_attr( $id ) . "' value='" . esc_attr__( 'Yes', 'jetpack' ) . "' " . $class . checked( (bool) $value, true, false ) . ' ' . ( $required ? "required aria-required='true'" : '' ) . "/> \n";
-			$field .= "\t\t" . esc_html( $label ) . ( $required ? '<span>' . $required_field_text . '</span>' : '' );
-		$field     .= "</label>\n";
-		$field     .= "<div class='clear-form'></div>\n";
+		$field  = "<label class='grunion-field-label checkbox" . ( $this->is_error() ? ' form-error' : '' ) . "' style='" . $this->label_styles . "'>";
+		$field .= "\t\t<input type='checkbox' name='" . esc_attr( $id ) . "' value='" . esc_attr__( 'Yes', 'jetpack' ) . "' " . $class . checked( (bool) $value, true, false ) . ' ' . ( $required ? "required aria-required='true'" : '' ) . "/> \n";
+		$field .= "\t\t" . esc_html( $label ) . ( $required ? '<span>' . $required_field_text . '</span>' : '' );
+		$field .= "</label>\n";
+		$field .= "<div class='clear-form'></div>\n";
 		return $field;
 	}
 
@@ -4551,12 +4651,19 @@ private function render_consent_field( $id, $class ) {
 	 */
 	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_style = 'style="';
+		if ( $this->get_attribute( 'fieldbackgroundcolor' ) ) {
+			$field_style .= 'background-color: ' . $this->get_attribute( 'fieldbackgroundcolor' );
+		}
+		$field_style .= '"';
+
 		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 .= "<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 .= "<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";
 			}
 		}
@@ -4578,6 +4685,7 @@ 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' ) ) {
@@ -4594,7 +4702,7 @@ public function render_select_field( $id, $label, $value, $class, $required, $re
 								. "</option>\n";
 			}
 		}
-		$field .= "\t</select>\n";
+		$field .= "\t</select></div>\n";
 
 		wp_enqueue_style(
 			'jquery-ui-selectmenu',
@@ -4721,7 +4829,14 @@ public function render_field( $type, $id, $label, $value, $class, $placeholder,
 		 */
 		$required_field_text = esc_html( apply_filters( 'jetpack_required_field_text', $required_field_text ) );
 
-		$field = "\n<div {$shell_field_class} >\n"; // new in Jetpack 6.8.0
+		$block_style = 'style="';
+		if ( $type === 'select' ) {
+			$block_style .= $this->field_styles;
+		}
+		$block_style .= '"';
+
+		$field = "\n<div {$block_style} {$shell_field_class} >\n"; // new in Jetpack 6.8.0
+
 		// If they are logged in, and this is their site, don't pre-populate fields
 		if ( current_user_can( 'manage_options' ) ) {
 			$value = '';