getodk / getodk/web-forms

Add logo

Open
#353 2 comments 0 reactions 0 assignees View on GitHub
front-end needs tech design xforms-engine
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)

Image

---

### 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.