diff --git a/projects/packages/forms/changelog/add-forms-native-dataviews-media-display b/projects/packages/forms/changelog/add-forms-native-dataviews-media-display
new file mode 100644
index 0000000000000..d1607232c3afc
--- /dev/null
+++ b/projects/packages/forms/changelog/add-forms-native-dataviews-media-display
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: use DataViews mediaField to display responders avatars
diff --git a/projects/packages/forms/src/dashboard/components/gravatar/index.tsx b/projects/packages/forms/src/dashboard/components/gravatar/index.tsx
index 7700be8e6fb20..50d375e943c8c 100644
--- a/projects/packages/forms/src/dashboard/components/gravatar/index.tsx
+++ b/projects/packages/forms/src/dashboard/components/gravatar/index.tsx
@@ -5,6 +5,7 @@ import { Hovercards } from '@gravatar-com/hovercards';
import '@gravatar-com/hovercards/dist/style.css';
import { useEffect, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
import { sha256 } from 'js-sha256';
import './style.scss';
@@ -23,6 +24,7 @@ type GravatarProps = {
email: string;
size?: number;
useHovercard?: boolean;
+ isRounded?: boolean;
};
/**
@@ -40,6 +42,7 @@ export default function Gravatar( {
email,
size = 48,
useHovercard = true,
+ isRounded = true,
}: GravatarProps ): JSX.Element | null {
const profileImageRef = useRef( null );
const hovercardRef = useRef( null );
@@ -80,10 +83,14 @@ export default function Gravatar( {
const hashedEmail = sha256( email );
+ const classes = clsx( 'jp-forms__gravatar', {
+ 'is-rounded': isRounded,
+ } );
+
return (
[
+ {
+ id: 'avatar',
+ label: __( 'Avatar', 'jetpack-forms' ),
+ render: ( { item } ) => {
+ const authorInfo = decodeEntities(
+ item.author_name || item.author_email || item.author_url || item.ip
+ );
+ const defaultImage = item.author_name || item.author_email ? 'initials' : 'mp';
+
+ return (
+ <>
+