Refresh static contact form for /kernel/real-time

[britneywwc]

Done

• Update design for static form on /kernel/real-time/contact-us
• Design: https://www.figma.com/design/mxftgCWDJ6s3LrlaedREkP/24.10-Static-forms?node-id=1-3&t=wJYqljxJE6kXFa8h-0
• Make form labels more accessible
• Fix missing payload on marketo submission

QA

• Go to demo
• Check that the demo adheres to the design
• Check that required fields work as expected
• Once submitted, check that payload is correct (included screenshots below)
• Check that form payload is submitted to marketo successfully

Issue / Card

Fixes WD-13103

Screenshots

Help

QA steps - Commit guidelines

[webteam-app]

Demo

Jenkins

demos.haus

[britneywwc]

@petesfrench @juanruitina This is ready for review

[akbarkz]

@britneywwc SCSS and Prettier CI actions are failing, can you check please?

[juanruitina]

It seems fieldset only picks up legend as the label if it's immediately nested under it, so we will need to be a bit more explicit. aria-labelledby should do the trick (code is just a suggestion, feel free to tweak as you wish)

Current implementation (see accessibility inspector on the right):

With aria-labelledby (inspector does pick label):

Unrelated: I think you should us p-section--hero in the first section so the spacing is right.

[petesfrench]

@juanruitina This feels weird being able to select both, the versions you use and, that you don't use any. I also wonder if this could lead to funneling problems for the marketing team

[juanruitina]

I would be OK with disabling "I don't use Ubuntu today" and "I don't know" if any of the fields above them is checked. Similarly, disabling all other fields when either "I don't use Ubuntu today" and "I don't know" are checked.

[petesfrench]

@britneywwc I had a little play around and was able to implement the pre-existing script static-forms.js, this looks for the .js-formfield class name and dynamically adds the heading and user's input to the 'Comments_for_lead' fieldset. I think this is a better approach, as it means we wont have to hard code any forms.

You can see what I did here: https://github.com/canonical/ubuntu.com/pull/14061/files# I have left comments to indicate the changes I made. This is super rough, so if you aren't sure about anything please reach out. Hope this helps.

[juanruitina]

Right now it is possible to select both "I don't use Ubuntu" and "I don't know", I think the other option should also be disabled together with the releases above. Feel free to change to UX+1 once you fix this. Thank you!