diff --git a/projects/packages/forms/changelog/update-forms-external-links-ui b/projects/packages/forms/changelog/update-forms-external-links-ui
new file mode 100644
index 000000000000..ab0edf5040a3
--- /dev/null
+++ b/projects/packages/forms/changelog/update-forms-external-links-ui
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Replace link-style `Button` components and bare `` tags with `Link` from `@wordpress/ui` in integrations, the responses modal, and response inspector mailto/tel links. Open Akismet-related URLs in a new tab only in the block editor so the dashboard keeps navigation in the same tab.
diff --git a/projects/packages/forms/routes/responses/integrations-modal.tsx b/projects/packages/forms/routes/responses/integrations-modal.tsx
index 9d579cdfbaf2..caab714a674f 100644
--- a/projects/packages/forms/routes/responses/integrations-modal.tsx
+++ b/projects/packages/forms/routes/responses/integrations-modal.tsx
@@ -214,9 +214,9 @@ const IntegrationCardComponent = ( {
{ message }
-
+
{ id === 'akismet' && (
<>
|
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/akismet.tsx b/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/akismet.tsx
index f0181f953606..73017a603af0 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/akismet.tsx
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/akismet.tsx
@@ -56,13 +56,21 @@ export function buildAkismetCard( {
'Akismet is active. There is one step left. Please add your Akismet key.',
'jetpack-forms'
),
- { a: }
+ {
+ a: (
+
+ ),
+ }
) }
) : (
-
+
{ __( 'View form responses', 'jetpack-forms' ) }
-
+
) }
|
- ),
+ a: ,
}
) }
diff --git a/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-email/index.tsx b/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-email/index.tsx
index 64b6eaebf4d5..2bc1e37993f7 100644
--- a/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-email/index.tsx
+++ b/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-email/index.tsx
@@ -1,6 +1,7 @@
import {
__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
} from '@wordpress/components';
+import { Link } from '@wordpress/ui';
import CopyClipboardButton from '../../../copy-clipboard-button';
import './style.scss';
@@ -14,10 +15,10 @@ const FieldEmail = ( { email } ) => {
justify="left"
spacing="2"
>
-
+
{ emailParts[ 0 ] }
@{ emailParts[ 1 ] }
-
+
);
diff --git a/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-phone/index.tsx b/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-phone/index.tsx
index 1f9361248172..1518bb993a6a 100644
--- a/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-phone/index.tsx
+++ b/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-phone/index.tsx
@@ -2,6 +2,7 @@
* WordPress dependencies
*/
import { useEffect, useState } from '@wordpress/element';
+import { Link } from '@wordpress/ui';
/**
* Internal dependencies
*/
@@ -65,7 +66,7 @@ const FieldPhone = ( { phone }: FieldPhoneProps ) => {
return (
- { formattedNumber }
+ { formattedNumber }
);
};
diff --git a/projects/packages/forms/src/dashboard/components/inspector/response-fields/index.tsx b/projects/packages/forms/src/dashboard/components/inspector/response-fields/index.tsx
index 5d72eacedd07..25a613efe98d 100644
--- a/projects/packages/forms/src/dashboard/components/inspector/response-fields/index.tsx
+++ b/projects/packages/forms/src/dashboard/components/inspector/response-fields/index.tsx
@@ -1,6 +1,7 @@
/**
* Internal dependencies
*/
+import { Link } from '@wordpress/ui';
import clsx from 'clsx';
import {
isFieldsCollection,
@@ -56,7 +57,7 @@ const ResponseFieldsIterator = ( {
}
if ( isLikelyPhoneNumber( value ) ) {
- return { String( value ) };
+ return { String( value ) };
}
return value as import('react').ReactNode;