canonical
Apply design for static contact form
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
QA
- Go to demo
- Check that the demo adheres to the design
To-do
- Fix form submission error and marketo issues
- Update design for other static forms
Issue / Card
Fixes #
Screenshots
[If relevant, please include a screenshot.]
Help
Demo
Jenkins 
demos.haus 
@britneywwc SCSS and Prettier CI actions are failing, can you check please?
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.
@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
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.
@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.
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!