A4A: Fix discrepancies in the Signup form v2 styling. #99414

jkguidaven · 2025-02-06T15:11:39Z

This PR fixes discrepancies on the Signup form v2 styling based on the original design.

NOTE: When testing this, make sure you set your Browser's preference to light mode. The Dark mode theme will be addressed on a separate PR.

Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/1729
Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/1730
Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/1732
Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/1733

Proposed Changes

Removed some form overrides as the current Form controls already aligns with the design. This includes, form label colors, additional divs and spacing.
Add the FormFooter component to standardize footer in the Form.

Why are these changes being made?

This is part of the new Signup form project for WC Asia preparation.

Testing Instructions

Use the A4A live link and go to the /signup/wc-asia page.
Test that the form styling follows the new design.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-02-06T15:11:53Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-132423

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-132423&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-132423&env=a8c-for-agencies

jkguidaven · 2025-02-06T15:12:27Z

...c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx

+	const topGoalOptions = [
+		{ label: translate( 'Access to cutting-edge technology' ), value: 'cutting_edge_tech' },
+		{
+			label: translate( 'Comprehensive support and troubleshooting' ),
+			value: 'comprehensive_support',
+		},
+		{
+			label: translate( 'Lead generation and new business opportunities' ),
+			value: 'lead_generation',
+		},
+		{ label: translate( 'Training and education for your team' ), value: 'training_education' },
+		{
+			label: translate( 'Exclusive discounts or revenue-sharing options' ),
+			value: 'exclusive_discounts',
+		},
+	];
+
+	const mainGoal2025Options = [
+		{ label: translate( 'Scaling the agency significantly' ), value: 'scaling_agency' },
+		{ label: translate( 'Diversifying offered services' ), value: 'diversifying_services' },
+		{
+			label: translate( 'Increasing the number of long-term clients' ),
+			value: 'increasing_clients',
+		},
+		{ label: translate( 'Expanding into new markets or territories' ), value: 'expanding_markets' },
+		{
+			label: translate( "Strengthening the agency's brand and reputation" ),
+			value: 'strengthening_brand',
+		},
+	];
+
+	const workModelOptions = [
+		{
+			label: translate(
+				'Refer customers to Automattic products/services to purchase on their own'
+			),
+			value: 'refer_customers',
+		},
+		{
+			label: translate( "Purchase on our clients' behalf and resell Automattic products/services" ),
+			value: 'purchase_resell',
+		},
+		{ label: translate( 'A combination of referring and reselling' ), value: 'combination' },
+		{ label: translate( 'Other models (please explain)' ), value: 'other' },
+	];
+


To make it easier for us to change template later, we put options into arrays.

jkguidaven · 2025-02-06T15:13:23Z

...c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx

+const BluePrintFormRadio = ( {
+	label,
+	checked,
+	onChange,
+}: {
+	label: string;
+	checked: boolean;
+	onChange: () => void;
+} ) => {
+	return (
+		<div
+			className="blue-print-form__radio"
+			onClick={ onChange }
+			role="button"
+			tabIndex={ 0 }
+			onKeyDown={ ( e ) => {
+				if ( e.key === 'Enter' ) {
+					onChange();
+				}
+			} }
+		>
+			<FormRadio label={ label } checked={ checked } onChange={ onChange } />
+		</div>
+	);
+};


The current FormRadio does not support click event on the label. This wrapper allows us to make the entire radio and label clickable improving UX.

matticbot · 2025-02-06T15:13:51Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~145 bytes added 📈 [gzipped])

name                     parsed_size           gzip_size
a8c-for-agencies-signup       -606 B  (-0.4%)     +145 B  (+0.3%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

jkguidaven · 2025-02-06T15:13:52Z

...-for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/index.tsx

@@ -46,124 +47,116 @@ export default function PersonalizationForm( { onContinue }: Props ) {
 				title={ translate( 'Personalize your experience' ) }
 				description={ translate( "We'll tailor the product and onboarding for you." ) }
 			>
-				<div className="signup-multi-step-form__fields">


We don't need this. The current form already has 16px spacing.

jkguidaven · 2025-02-06T15:14:12Z

...a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/index.tsx

 			) }
 		>
-			<div className="signup-multi-step-form__fields">


We don't need this. The current form already has 16px spacing.

matticbot · 2025-02-06T15:28:17Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/a4a/signup-form-v2-styling on your sandbox.

andrii-lysenko · 2025-02-06T23:12:57Z

...c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx

@@ -18,6 +22,32 @@ type FormData = {
 	specificApproach: string;
 };

+const BluePrintFormRadio = ( {


I think we can name it BlueprintFormRadio with small p.

andrii-lysenko

Thanks for adding proper styling. The code is clean and UI looks great for me. I think we can merge this and iterate if needed.

a8ci18n · 2025-02-07T10:23:15Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17234101

Some locales (Brazilian Portuguese, Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @jkguidaven for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2025-02-10T00:34:37Z

Translation for this Pull Request has now been finished.

jkguidaven added the A8c Agencies label Feb 6, 2025

jkguidaven self-assigned this Feb 6, 2025

jkguidaven commented Feb 6, 2025

View reviewed changes

jkguidaven requested a review from a team February 6, 2025 15:16

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Feb 6, 2025

jkguidaven marked this pull request as ready for review February 6, 2025 15:17

jkguidaven mentioned this pull request Feb 6, 2025

A4A: adds 'Dark' mode support on the new Signup form. #99420

Merged

8 tasks

andrii-lysenko reviewed Feb 6, 2025

View reviewed changes

andrii-lysenko approved these changes Feb 6, 2025

View reviewed changes

jkguidaven added 5 commits February 7, 2025 17:23

Update contact form styling to match design.

fe808de

Update Personalization form style to follow design.

a8d7d1b

Standardize form content and footer.

33c0bea

Update Blueprint form to follow design.

d594e5d

Minor class name correction.

a498ff1

jkguidaven force-pushed the update/a4a/signup-form-v2-styling branch from 706e9cb to a498ff1 Compare February 7, 2025 09:25

jkguidaven merged commit b2d2e73 into trunk Feb 7, 2025
13 checks passed

jkguidaven deleted the update/a4a/signup-form-v2-styling branch February 7, 2025 09:45

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Feb 7, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A4A: Fix discrepancies in the Signup form v2 styling. #99414

A4A: Fix discrepancies in the Signup form v2 styling. #99414

jkguidaven commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited by matticbot

Loading

jkguidaven Feb 6, 2025

jkguidaven Feb 6, 2025

matticbot commented Feb 6, 2025 •

edited

Loading

jkguidaven Feb 6, 2025

jkguidaven Feb 6, 2025

matticbot commented Feb 6, 2025 •

edited

Loading

andrii-lysenko Feb 6, 2025

andrii-lysenko left a comment

a8ci18n commented Feb 7, 2025

a8ci18n commented Feb 10, 2025

A4A: Fix discrepancies in the Signup form v2 styling. #99414

A4A: Fix discrepancies in the Signup form v2 styling. #99414

Conversation

jkguidaven commented Feb 6, 2025 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Feb 6, 2025 • edited by matticbot Loading

jkguidaven Feb 6, 2025

Choose a reason for hiding this comment

jkguidaven Feb 6, 2025

Choose a reason for hiding this comment

matticbot commented Feb 6, 2025 • edited Loading

jkguidaven Feb 6, 2025

Choose a reason for hiding this comment

jkguidaven Feb 6, 2025

Choose a reason for hiding this comment

matticbot commented Feb 6, 2025 • edited Loading

andrii-lysenko Feb 6, 2025

Choose a reason for hiding this comment

andrii-lysenko left a comment

Choose a reason for hiding this comment

a8ci18n commented Feb 7, 2025

a8ci18n commented Feb 10, 2025

jkguidaven commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited by matticbot

Loading

matticbot commented Feb 6, 2025 •

edited

Loading

matticbot commented Feb 6, 2025 •

edited

Loading