A4A: add signup multiple steps form

[andrii-lysenko]

Resolves https://github.com/Automattic/automattic-for-agencies-dev/issues/1728

Proposed Changes

This PR adds new Mutiple step contact form. The main purpose is to have a skeleton, so it's not 100% properly styled yet. Validation is disabled as well.

The main goal is to bootstrap all the steps and attach necessary logic.

This also adds form for the first page.

Why are these changes being made?

Testing Instructions

• Using live link below navigate to /signup/wc-asia.
• Check multiple steps by clicking Continue button.

Screen.Recording.2025-01-30.at.5.05.43.PM.mov

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]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

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

• blaze-dashboard
• command-palette-wp-admin
• help-center
• notifications
• odyssey-stats
• whats-new

To test WordPress.com changes, run install-plugin.sh $pluginSlug a4a/add-signup-multiple-steps-form on your sandbox.

[matticbot]

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

Sections (~1217 bytes added 📈 [gzipped])

name                     parsed_size           gzip_size
a8c-for-agencies-signup      +5849 B  (+4.1%)    +1217 B  (+2.8%)

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.

[yashwin]

Thanks for working on this!

I noticed the background on the video added here is white, whereas it shows a dark background here:

I also left some comments, let me what you think!

[yashwin]

Can we use htmlFor for all the fields on this form?

We could use FormLabel that supports it or add the support on the FormField component

[andrii-lysenko]

Thanks for noting that. Let's address this one with one of the page tasks, to avoid growing this PR. What do you think?

[andrii-lysenko]

@yashwin @jkguidaven Thank you for the reviews. I addressed some of the comments like usage of preventWindows and removing &__ from styles replacing with the full name. As per others, I suggest addressing these on per page basis, as we will improve every page styles and code. What do you think? These include also using htmlFor as it probably require changing the component outside the form itself, so I would like not to grow this PR even more.

I've also change base of this PR to trunk and will close #99137 to avoid problems with merging.

[andrii-lysenko]

Closing this PR to avoid confusion. All the changes will be delivered from this PR: #99186

I will take notes on unresolved suggestions on the appropriate tasks. Thank you!