Add logo
- Dominant language
- TypeScript
- Stars
- 38
- Forks
- 22
- PR merge metrics
- No merged PRs in 30d
Description
### Description
As an organization,
I want to upload and display my logo on my forms,
So that I can establish brand identity and build credibility with my respondents
[User feedback](https://www.notion.so/getodk/Want-to-have-basic-branding-in-their-forms-8f1e168131aa4e3880b0281be7a101f7?pvs=4)
"Want to incorporate the brand so users know they are using an official form. I can imagine that helps with trust."
---
### Checklist
- [x] **Does it need UI/UX design?**
- If yes, describe the UI/UX requirements or attach a Figma link in the "Design" section.
- [x] **Does it need API design?**
- If yes, specify the endpoints, methods, or data structures needed.
- [ ] **Does it need design around state flow?**
- If yes, outline the state flow requirements.
- [ ] **Does it need a test plan?**
- If yes, add the test plan as a comment in this task or attach the document.
---
### User story
As an admin,
I want to upload and display an organizational logo on my forms,
So that I can establish brand identity and build credibility with my respondents
---
### Design
Admin configuration flow
**Upload & Validation**
- Admin navigates to server settings
- Uploads logo - system accepts PNG, JPG, or SVG
- Alt text: Text field appears upon upload: "Describe this logo for screen readers."
- Global Application: a toggle/checkbox: "Apply to all existing and future projects."
- If enabled, the logo appears on all forms by default
- If disabled, it remains an asset available for selection at the project level
**Logo/layout**
- On desktop, logo is centered above the form title within the header card
- On mobile, logo is left-aligned with the title for optimized readability on small screens
- Fixed height, like we have with image uploads, so that it works for both horizontal and vertical logos
[Figma](https://www.figma.com/design/6v0NnvayfDlaQhYpjv37Bn/ODK-Web-Forms?node-id=4434-3533&t=bLMXZjpjU8tqTHxf-1)
---
### Dependencies
- https://github.com/getodk/central/issues/1680
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the admin server-settings flow and the existing image-upload behavior, then review how form headers render in desktop and mobile layouts. Check the dependency on central#1680 and use the linked Figma design for the configuration flow. Done means supported logos can be uploaded, described for screen readers, applied at the chosen scope, and displayed in the specified layouts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100