Forms: Update form submission confirmation page template (#46521)

* Forms: Update form submission confirmation page template

- Change back link text from 'Go back' to '← Back'
- Update default heading to 'Thank you for your response.'
- Add sparkle emoji (✨) decoration to heading
- Update CSS for new design:
  - Centered layout with max-width 600px
  - Fields with label above value
  - Horizontal dividers between fields
  - Improved typography (muted labels, bold values)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* Simplify changelog copy

* Forms: Update E2E test to match new confirmation heading

Update the form submission E2E test to expect "Thank you for your response."
instead of "Your message has been sent" to match the new default heading.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* Use CSS logical properties for RTL support

- Change margin-left to margin-inline-start for sparkle decoration
- Change text-align: left to text-align: start for go-back-message

This addresses RTL language support by using logical CSS properties
that automatically adapt to the text direction.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* Use theme-compatible colors for form submission page

Replace hardcoded colors with theme-aware alternatives:
- Border color: Use currentColor with color-mix() for 20% opacity,
  falling back to solid currentColor for older browsers
- Field label: Use inherit with opacity for secondary text effect

This ensures the submission confirmation page adapts to different
WordPress themes instead of using fixed gray values.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* Make sparkle emoji part of default heading text

Move the sparkle emoji from being hardcoded in the template to being
part of the customThankyouHeading default value. This makes it
automatically optional - users who customize the heading text will
not have the sparkle unless they add it themselves.

Also adds get_translated_with_fallback() helper to show the previous
translation ("Your message has been sent") if the new string
("Thank you for your response.") hasn't been translated yet.

Removes the now-unused .sparkle-decoration CSS class.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* Add translation fallback for thank you heading

When the new heading copy ("Thank you for your response.") hasn't been
translated yet, fall back to the old copy ("Your message has been sent")
without the sparkle emoji.

This ensures non-English users see translated text rather than
untranslated English during the transition period.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* Fix Phan error in translation check

Use string comparison instead of translate_entry() which expects
a Translation_Entry object, not a string.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

---------

Co-authored-by: Claude Opus 4.5 <[email protected]>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/20965369221

Upstream-Ref: Automattic/jetpack@8e6cfcf

Author: vianasw

CHANGELOG.md

@@ -14,6 +14,7 @@ This is an alpha version! The changes listed here are not final.
 - Slideshow: Ensure slideshows do not stretch to parent container width on mobile if no list height is set.
 
 ### Other changes <!-- Non-user-facing changes go here. This section will not be copied to readme.txt. -->
+- Forms: update E2E test to match new form submission confirmation heading.
 - Tests: Add coverage for modules added to sync configuration mid-progress.
 - Update composer lock following Publicize changes.
 

jetpack_vendor/automattic/jetpack-forms/CHANGELOG.md

@@ -15,6 +15,7 @@ This is an alpha version! The changes listed here are not final.
 
 ### Changed
 - Forms: update dataviews actions to match between old and new dashboard.
+- Forms: update form submission confirmation page with new design.
 - Update package dependencies.
 - Update read/unread status column style to match old dashboard.
 - Use Gravatar component in new dashboard inbox.

jetpack_vendor/automattic/jetpack-forms/dist/blocks/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('jetpack-connection', 'jetpack-script-data', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-jp-i18n-loader', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => 'a6321396bb8add9aa94d');
+<?php return array('dependencies' => array('jetpack-connection', 'jetpack-script-data', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-jp-i18n-loader', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '9838c0cd174b9c148855');

jetpack_vendor/automattic/jetpack-forms/dist/blocks/editor.js

@@ -18,7 +18,7 @@ export default {
 	},
 	customThankyouHeading: {
 		type: 'string',
-		default: __( 'Your message has been sent', 'jetpack-forms' ),
+		default: __( 'Thank you for your response.', 'jetpack-forms' ),
 	},
 	customThankyouMessage: {
 		type: 'string',

jetpack_vendor/automattic/jetpack-forms/dist/contact-form/css/grunion-rtl.css

@@ -868,7 +868,7 @@ function JetpackContactFormEdit( {
 								<TextControl
 									label={ __( 'Message heading', 'jetpack-forms' ) }
 									value={ customThankyouHeading }
-									placeholder={ __( 'Your message has been sent', 'jetpack-forms' ) }
+									placeholder={ __( 'Thank you for your response.', 'jetpack-forms' ) }
 									onChange={ ( newHeading: string ) =>
 										setAttributes( { customThankyouHeading: newHeading } )
 									}

jetpack_vendor/automattic/jetpack-forms/dist/contact-form/css/grunion.css

@@ -205,7 +205,7 @@ public function __construct( $attributes, $content = null, $set_id = true ) {
 			'submit_button_text'     => __( 'Submit', 'jetpack-forms' ),
 			// These attributes come from the block editor, so use camel case instead of snake case.
 			'customThankyou'         => '', // Whether to show a custom thankyou response after submitting a form. '' for no, 'noSummary' to disable the summary, 'message' for a custom message, 'redirect' to redirect to a new URL. Deprecated.
-			'customThankyouHeading'  => __( 'Your message has been sent', 'jetpack-forms' ), // The text to show above customThankyouMessage.
+			'customThankyouHeading'  => self::get_default_thank_you_heading(), // The text to show above customThankyouMessage.
 			'customThankyouMessage'  => '', // The message to show when customThankyou is set to 'message'.
 			'customThankyouRedirect' => '', // The URL to redirect to when confirmationType is set to 'redirect'.
 			'confirmationType'       => null, // The type of confirmation to show after submitting a form. 'text' for a text message, 'redirect' for a redirect link.
@@ -600,6 +600,35 @@ private static function get_secret() {
 		return $secret;
 	}
 
+	/**
+	 * Get the default thank you heading with conditional sparkle.
+	 *
+	 * Returns the new copy with sparkle emoji if translated, otherwise
+	 * falls back to the old copy without sparkle.
+	 *
+	 * TEMPORARY: This method can be removed once the new copy has been translated.
+	 * Replace the call with: __( 'Thank you for your response.', 'jetpack-forms' ) . ' ✨'
+	 *
+	 * @return string The translated heading.
+	 */
+	private static function get_default_thank_you_heading() {
+		// English locales always get the new copy with sparkle.
+		if ( str_starts_with( get_locale(), 'en' ) ) {
+			return __( 'Thank you for your response.', 'jetpack-forms' ) . ' ✨';
+		}
+
+		// Check if new string has a translation by comparing with the original.
+		$original   = 'Thank you for your response.';
+		$translated = __( 'Thank you for your response.', 'jetpack-forms' );
+
+		if ( $translated !== $original ) {
+			return $translated . ' ✨';
+		}
+
+		// Fall back to old string without sparkle.
+		return __( 'Your message has been sent', 'jetpack-forms' );
+	}
+
 	/**
 	 * Helper function to get the attributes of the contact form.
 	 *
@@ -1342,7 +1371,7 @@ private static function render_noscript_success_message( $is_reload_nonce_valid,
 		$success_message = '';
 
 		if ( ! $disable_go_back ) {
-			$success_message = '<p class="go-back-message"> <a class="link" href="' . esc_url( $back_url ) . '">' . esc_html__( 'Go back', 'jetpack-forms' ) . '</a> </p>';
+			$success_message = '<p class="go-back-message"> <a class="link" href="' . esc_url( $back_url ) . '">' . esc_html__( '← Back', 'jetpack-forms' ) . '</a> </p>';
 		}
 
 		$success_message .= '<h4 id="contact-form-success-header">' . esc_html( $form->get_attribute( 'customThankyouHeading' ) ) . "</h4>\n\n";
@@ -1437,7 +1466,7 @@ private static function render_ajax_success_wrapper( $form, $submission_success
 
 		if ( ! $disable_go_back ) {
 			$html .= '<p class="go-back-message">';
-			$html .= '<a class="link" role="button" tabindex="0" data-wp-on--click="actions.goBack" href="' . esc_url( $back_url ) . '">' . esc_html__( 'Go back', 'jetpack-forms' ) . '</a>';
+			$html .= '<a class="link" role="button" tabindex="0" data-wp-on--click="actions.goBack" href="' . esc_url( $back_url ) . '">' . esc_html__( '← Back', 'jetpack-forms' ) . '</a>';
 			$html .= '</p>';
 		}
 

jetpack_vendor/automattic/jetpack-forms/src/blocks/contact-form/attributes.ts

@@ -224,11 +224,10 @@ that needs to mimic the input element styles */
 
 .contact-form-submission {
 	box-sizing: border-box;
-	margin-bottom: 4em;
-	padding: 1.5em 1em;
+	margin: 0 auto 4em;
+	padding: 0;
 	width: 100%;
-	border-top: 1px solid #000;
-	border-bottom: 1px solid #000;
+	max-width: 600px;
 }
 
 .contact-form-submission p {
@@ -250,32 +249,55 @@ that needs to mimic the input element styles */
 }
 
 .contact-form-submission h4 {
-	margin-top: 32px;
-	margin-bottom: 32px;
-	font-weight: 200;
+	margin-top: 16px;
+	margin-bottom: 40px;
+	font-size: 1.75rem;
+	font-weight: 500;
+	line-height: 1.3;
 }
 
 .contact-form-submission .go-back-message {
-	margin-top: 20px;
-	margin-bottom: 32px;
-	text-align: left;
+	margin-top: 0;
+	margin-bottom: 0;
+	text-align: start;
 }
 
 .contact-form-submission .go-back-message .link {
-	font-weight: 200;
+	font-size: 0.875rem;
+	font-weight: 400;
 	color: inherit;
+	text-decoration: none;
 	cursor: pointer;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.contact-form-submission .jetpack_forms_contact-form-success-summary {
+	padding: 24px 0;
+	border-bottom: 1px solid currentColor;
+	border-bottom-color: color-mix(in sRGB, currentColor 20%, transparent);
+
+	&:first-of-type {
+		border-top: 1px solid currentColor;
+		border-top-color: color-mix(in sRGB, currentColor 20%, transparent);
+	}
 }
 
 .contact-form-submission .field-name {
-	font-weight: 200;
+	font-size: 0.875rem;
+	font-weight: 400;
+	color: inherit;
+	opacity: 0.6;
+	margin-bottom: 8px;
 }
 
 .contact-form-submission .field-images {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
-	margin-bottom: 20px;
+	margin-top: 8px;
 
 	&[hidden] {
 		display: none;
@@ -308,7 +330,8 @@ that needs to mimic the input element styles */
 }
 
 .contact-form-submission .field-value {
-	margin-bottom: 20px;
+	margin-bottom: 0;
+	font-size: 1rem;
 	font-weight: 600;
 	white-space: pre-wrap;
 }