Skip to content

Cohort landing pages for Tech4Dev and UNDP, with forms saving to Google Sheets - #396

Open
saqibmanan wants to merge 26 commits into
mainfrom
cohort-local-inclusive-ai
Open

saqibmanan wants to merge 26 commits into
mainfrom
cohort-local-inclusive-ai

Conversation

@saqibmanan

@saqibmanan saqibmanan commented Oct 29, 2026 •

Copy link
Copy Markdown
Contributor

Adds two standalone cohort landing pages, each with application forms that save straight into a Google Sheet.

Page URL Closes
Local & Inclusive AI Cohort (CivicDataLab with Gram Vaani, for Tech4Dev) /cohorts/tech4dev/ 7 Nov, 11:59 PM IST
AI & Digital Tools for CSOs (CivicDataLab with UNDP India) /cohorts/undp/ 30 Nov, 11:59 PM IST

What's on the pages

  • Content from the landing-page docs, styled with Inter (as in the CivicDataSpace design system) and the designer's brush artwork. The speech bubbles are 9-sliced so they keep their brush edges at any size.
  • Countdown ("N days left to apply") is worked out in the browser, so the static build never shows a stale number. After the deadline, the Apply buttons hide and the forms are replaced with "Applications closed".
  • Tech4Dev only: a 4-question eligibility check ("Are we a fit?"), saved to the Sheet's Short tab. It is collapsed behind a "Check if we're a fit" button to keep the page short; the hero and investment buttons, and any #fit link, open it.
  • Application forms in 4 steps, with Back/Next and checks on each step. If a submission fails, the answers stay filled in. Responses go to the Long tab.
    • Tech4Dev: the NGO screening questionnaire, Q1–Q21.
    • UNDP: the baseline assessment questionnaire, Q1–Q22 (Inception Report, Annex A). It supports tick boxes with limits, options that must be chosen alone, optional questions, and a consent question that blocks submission on "No".
  • Sheet columns are named after the questions themselves, e.g. Q1. Your full name. "Other" answers are saved inline, e.g. Other: <text>.

Layout

  • Two shared content widths: wide (1100px) and text (760px), so section edges line up on desktop and phone.
  • Tech4Dev Programme structure is a vertical timeline at text width, with a winding path that fills in as you scroll and compact step cards. The path is static (fully filled) when reduced motion is set.
  • Tech4Dev What you will leave with is horizontal cards with tick badges, at text width.
  • Tighter section spacing; the Tech4Dev page is about 9,650px tall on desktop, down from about 11,900px.
  • No copy changes apart from the new "Hide the fit check" toggle label.

How the forms save

Each form posts to a Google Apps Script web app (scripts/cohort-apps-script/Code.gs, with setup steps in its README) that adds a row to that cohort's Sheet. The web app URLs are in src/components/cohort/config.js. Both deployments are live, and real submissions from the pages have been tested end to end. The script has a hidden spam-trap field, checks the email address, caps the length of each answer and blocks spreadsheet formula injection.

Code layout

  • src/pages/cohorts/tech4dev.js, undp.js: each page's content
  • src/components/cohort/layout.js: shared layout, styles and hooks
  • src/components/cohort/ApplyForm.js, FitCheck.js, questions.js, ui.js: the forms
  • src/images/cohort/: artwork, trimmed and compressed to webp

Still open (not blocking)

  • Gram Vaani logo: left off until the official high-resolution file arrives.
  • UNDP skill-area cards use placeholder line icons until the CDL icon files arrive.

Testing

Checked in a local dev build, on desktop and at phone width:

  • Both pages render with no console errors and no sideways scrolling.
  • Every form's checks and step navigation work.
  • Real submissions land in both Sheets.
  • Section widths measured at 1280px and 390px: both pages line up on the two shared widths, with no horizontal overflow.
  • Visible text on both pages compared against the previous build: UNDP identical; Tech4Dev identical apart from the toggle label.
  • Fit check: collapsed by default; opens from each button and from #fit; toggle closes and reopens.
  • Not yet tested in the Node 14 CI build or on a real device.

Closes #397

…ive-ai

Standalone page with the call-for-applications content, a live deadline
countdown, an eligibility check that saves answers to a Google Sheet via
an Apps Script web app, and placeholders for artwork and the long form.
…cript deployment

Speech bubbles are 9-sliced from the brush artwork so they keep their
edges at any size; the tail is a separate piece. Images trimmed and
compressed to webp (~520 KB total).
21 questions in four sections, saved to the Sheet's Long tab. Shared
form styles move to ui.js; the error-text style is renamed so it no
longer shadows the built-in Error.
One section per step with a progress bar and Back/Next. Each step is
validated before moving on; answers persist when going back.
The script now finds the email by column name instead of a fixed key.
Layout, styles and hooks move to cohort/layout.js, questions to
cohort/questions.js, and per-cohort deadline/script URL to config.js.
ApplyForm and FitCheck take their questions and script URL as props.
No visible change to the Tech4Dev page.
…tools-for-csos

Reuses the shared cohort layout with UNDP's artwork: white brush bubbles
for the numbers, the coral brush card for the fee, a share button, and a
placeholder where the application form goes once the questions arrive.
…on form

ApplyForm gains tick-box questions (with a cap and options that must be
chosen alone), optional questions, a 'specify' box on any option ending
in ': please specify', and a consent question that blocks submission on
No. Questions come from Annex A of the UNDP inception report.
Tiled from a 600px crop (72 KB) instead of the 3.7 MB original. The
page background is now a CohortHead prop; Tech4Dev keeps its default.
Both pages
- Hero uses the designer's speech bubble as one piece; the tail sits in its
  own 9-slice corner so it is never stretched.
- Key numbers move into a full-width dark textured band.
- Body text is 17-18 px and headings share one size per level.
- A blank required question gets a red bar, with one summary line above the
  buttons instead of "This question is required" under every question.
- A DPDP Act consent line sits above each form.
- Error text is red again (the page's paragraph colour was greying it).

Tech4Dev
- Bigger CDL logo; darker, larger people art pulled up under the bubble's
  tail, with two small chat bubbles beside it.
- "Does your NGO..." becomes a pull-quote on a #47729C block.
- Focus areas are coral (#E57568) chips.
- Programme structure runs as a horizontal path on desktop, 15 November to
  31 March, ending at a pilot-ready flag; mobile keeps the vertical list.
- "What you will leave with" is a grid of cards that lift on hover.
- Closing CTA block: "From AI pilot to implementation. What's your next
  move?", with the hills art on its right end.
- Removed "Not sure yet? Check if we're a fit first."

UNDP
- Bigger logo tab; the illustration sits to the right of the bubble on
  desktop.
- Stats band: 100, Free of cost, Primarily virtual, and the closing date.
- "Approximately" removed.
- Coral participation-fee card text is white.
- Expectations and learning outcomes sit side by side in two blue blocks.
- Removed "Programme led by UNDP India. Delivery partner: CivicDataLab."
The white background is cut out to transparent, and the bubble is 9-sliced
like the brush one, with the whole tail in the bottom-left slice. HeroBubble
takes art="flat"; UNDP keeps the brush bubble.
…om 6.png

Two chat bubbles (8.png, 9.png) replace the flipped copy of the hero bubble.
The numbers band now uses the strokes of 6.png on dark navy, toned down so
the white text stays readable.
One card per row with a coral edge, in a wider section so each fits on one
line on desktop; they wrap on phones. Hover nudges the card to the right.
…sible fit check

- Tech4Dev: Programme structure as a vertical timeline with a winding path that fills on scroll; step cards
- Tech4Dev: What you will leave with as horizontal cards with tick badges, at text width
- Tech4Dev: fit check collapsed behind a button; hero and investment buttons open it
- Shared content widths (wide 1100, text 760) so edges line up; tighter section spacing
- No copy changes apart from the new 'Hide the fit check' toggle label

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Cohort landing pages for Tech4Dev and UNDP, with forms saving to Google Sheets

1 participant