{"id":21240640,"url":"https://github.com/chrisnajman/multi-form-demo","last_synced_at":"2026-03-19T19:26:37.560Z","repository":{"id":170892519,"uuid":"646920866","full_name":"chrisnajman/multi-form-demo","owner":"chrisnajman","description":"Demo in which input is passed from the forms on steps 1, 2 and 3, to Step 4 (Finishing Up) where a total price is calculated. Input choices can be changed before final submission.","archived":false,"fork":false,"pushed_at":"2025-03-04T08:22:47.000Z","size":54,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T09:29:24.436Z","etag":null,"topics":["accessibility","es6-modules","html-css-javascript","startviewtransition-api"],"latest_commit_sha":null,"homepage":"https://chrisnajman.github.io/multi-form-demo/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisnajman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-29T16:39:02.000Z","updated_at":"2025-03-04T08:22:50.000Z","dependencies_parsed_at":"2023-12-10T13:31:00.441Z","dependency_job_id":"b3e7eb7c-731e-425e-8313-50230ecb98b3","html_url":"https://github.com/chrisnajman/multi-form-demo","commit_stats":null,"previous_names":["chrisnajman/multi-form-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Fmulti-form-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Fmulti-form-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Fmulti-form-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Fmulti-form-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisnajman","download_url":"https://codeload.github.com/chrisnajman/multi-form-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243681002,"owners_count":20330155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","es6-modules","html-css-javascript","startviewtransition-api"],"created_at":"2024-11-21T00:52:14.790Z","updated_at":"2026-01-02T00:53:29.355Z","avatar_url":"https://github.com/chrisnajman.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multi-form Demo\n\n- [Website (Git Pages)](https://chrisnajman.github.io/multi-form-demo)\n\n## Description\n\nA series of forms which allows the user to:\n\n- Input personal details,\n- Choose a plan,\n- Choose add-ons (optional)\n- Review chosen items before final submission.\n\nInput is passed from the forms on steps 1, 2 and 3 to Step 4 (Finishing Up) where a total price is calculated.\n\nAt each step (apart from after final submission) the input data can be changed.\n\n**No data is saved**.\n\nThe page is a response to the [Frontend Mentor Multistep Form](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ) challenge.\n\n## Accessibility\n\n### Keyboard navigation\n\nI followed the project specification when scripting, but jettisoned much of the design. This was because I found that if I followed the design, successful keyboard navigation would only be partial, at best. So instead of hiding default form elements such as checkboxes and radio buttons, I've made a feature of them.\n\nI also modified the excellent [Accessible Custom Toggle Switch by Álvaro (Codepen)](https://codepen.io/alvarotrigo/pen/NWweaqW) so the keyboard user will know they are interacting with a checkbox (and not have to make a guess).\n\n#### To navigate between radio items:\n\n- Use the keyboard arrow keys to select an item, then click `Tab` to continue.\n\n#### To navigate between checkboxes:\n\n- Use the `Tab` key to get to an item, then click the space bar to select it. Click `Tab` to continue.\n\n#### To navigate buttons:\n\n- Use the `Tab` key to focus on a button, then press `Enter` to activate it.\n\n### Screen readers\n\n- `ARIA` and `role` attributes are used as required.\n\n## HTML\n\nAll steps take place on the same HTML page (index.html).\n\n## CSS\n\n- `grid` is used for the overall page layout as well as for the plan and add-ons steps.\n- `flex` is used throughout.\n- Responsive.\n\n## Javascript\n\n- ES6 modules\n- ES6 (no transpilation to ES5)\n- `document.startViewTransition` applied to 'Previous' and 'Next' buttons. Fallback supplied for unsupported browsers, e.g. Firefox (10/12/203). Note that e.g. Firefox logs `document.startViewTransition` as a type error to the console but functionality not affected.\n\n## Testing\n\n- Tested on:\n  - Windows 10\n    - Chrome\n    - Firefox\n    - Microsoft Edge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Fmulti-form-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisnajman%2Fmulti-form-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Fmulti-form-demo/lists"}