Add Form component by bazottie · Pull Request #302 · voorhoede/head-start

bazottie · 2025-09-11T15:25:06Z

Large parts are copied from projects by @jurgenbelien and @velomovies

Changes

Adds a Form component
Adds a Form Block
Adds Forms field with little bit of logic in dato
- text, email, phone, number, date, textarea, select, radio, checkbox
Adds server side form validation with API route
Form submissions is another ticket Transactional emails #112
Adds success, error and not found page for form submissions
Adds Spam protection via Cloudflare Turnstile

Associated issue

#113

How to test

Open preview link
Navigate to /demos/form-block-demo/
Fill in the form a couple of times, see f it works like you expect it to do.
Modify the form in dato to check if the form changes like you expect it to do.
Submitting the form now shows you an error page because the turnstile keys are not set yet.
Locally it shows an error page when something goes wrong in the form. And an inline error when something goes wrong validating the form values.

Checklist

I have performed a self-review of my own code
I have made sure that my PR is easy to review (not too big, includes comments)
I have made updated relevant documentation files (in project README, docs/, etc)
~~I have added a decision log entry if the change affects the architecture or changes a significant technology~~
I have notified a reviewer

cloudflare-workers-and-pages · 2025-09-11T15:26:50Z

Deploying head-start with Cloudflare Pages

Latest commit:	`56e410d`
Status:	✅ Deploy successful!
Preview URL:	https://baceb638.head-start.pages.dev
Branch Preview URL:	https://feat-forms.head-start.pages.dev

View logs

…urnstile on form back button

…00 and 500 errors in different if behaviours

Copilot

Pull request overview

This PR introduces a CMS-driven “Form” capability to Head Start: a new Form component + FormBlock, a DatoCMS schema/migration for form definitions, and an API route that validates submissions (with Cloudflare Turnstile support).

Changes:

Adds a new Forms content collection (DatoCMS GraphQL + Astro content loader) and a FormBlock to render a referenced form by slug.
Adds server-side form validation + per-form action handlers under /api/forms/[slug]/.
Adds Turnstile integration and client-side progressive enhancement for inline error rendering.

Reviewed changes

Copilot reviewed 38 out of 39 changed files in this pull request and generated 19 comments.

Show a summary per file

File	Description
src/pages/api/forms/[slug]/index.ts	New POST endpoint for form validation + dispatch to per-form action module
src/pages/api/forms/[slug]/_contact.ts	Example form action handler returning a success view
src/pages/[locale]/_index.query.graphql	Adds `FormBlock` fragment inclusion on home page query
src/lib/renderer/index.ts	Import order tweak + adds `renderToResponse` helper
src/lib/forms/validate.ts	Implements server-side validation + Turnstile gating
src/lib/forms/turnstile.ts	Implements Turnstile `/siteverify` call
src/lib/forms/index.ts	Exposes form helpers from `src/lib/forms/*`
src/content/Pages/CollectionEntry.query.graphql	Adds `FormBlock` fragment inclusion for pages
src/content/PagePartials/CollectionEntry.query.graphql	Adds `FormBlock` fragment inclusion for page partials
src/content/Forms/index.ts	New Astro content collection loader for Forms
src/content/Forms/CollectionEntry.query.graphql	GraphQL query for a single Form record
src/content/config.ts	Registers the new `Forms` collection
src/components/FormField/FormField.astro	Renders individual fields and groups (fieldset for checkbox/radio)
src/components/FormField/fieldTypes.ts	Defines supported field types and a type guard
src/components/FormField/Fields/Textarea.astro	Textarea field component
src/components/FormField/Fields/Select.astro	Select field component
src/components/FormField/Fields/RadioGroup.astro	Radio group renderer
src/components/FormField/Fields/Input.astro	Input field component
src/components/FormField/Fields/Fieldset.astro	Wrapper for checkbox/radio groups
src/components/FormField/Fields/CheckboxGroup.client.ts	Web component to enforce “at least one required” for checkbox groups
src/components/FormField/Fields/CheckboxGroup.astro	Checkbox group renderer + client script include
src/components/Form/Turnstile.astro	Turnstile widget markup injection
src/components/Form/index.ts	Component barrel exports for Form views
src/components/Form/FormSuccess.astro	Success view
src/components/Form/FormNotFound.astro	Not-found view
src/components/Form/FormError.astro	Error view
src/components/Form/Form.test.ts	Unit tests for Form rendering + API behavior
src/components/Form/Form.astro	Form renderer (fields + submit + Turnstile + error template)
src/blocks/FormBlock/README.md	Documentation for the new FormBlock
src/blocks/FormBlock/FormBlock.fragment.graphql	GraphQL fragment for the FormBlock
src/blocks/FormBlock/FormBlock.astro	Block implementation resolving Form entry and rendering `<web-form>`
src/blocks/FormBlock/Form.client.ts	Client-side enhancement: AJAX submit + inline errors + Turnstile gating
src/blocks/blocksByTypename.ts	Registers `FormBlockRecord` mapping
env.d.ts	Adds Turnstile env vars typing
datocms-environment.ts	Changes the configured DatoCMS environment
config/datocms/migrations/1780562401_featForms.ts	Migration adding Form models/blocks and wiring them into page body blocks
astro.config.ts	Adds Turnstile env schema entries
.github/workflows/node-ci.yml	Adds Turnstile env vars to CI environment
.env.example	Adds Turnstile env var placeholders

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

 * @see docs/decision-log/2023-10-24-datocms-env-file.md on why file is preferred over env vars
 */
-export const datocmsEnvironment = 'deploy-search-form';
+export const datocmsEnvironment = 'dev-sandbox-21-05';


turnstile token to string, removes use turnstile input

bazottie changed the title ~~Add form components, api routes, and migrations~~ Add Form component Sep 11, 2025

jbmoelker added the 📝 Forms label Feb 10, 2026

JopMolenaar force-pushed the feat/forms branch from 340897f to 7af58f6 Compare June 3, 2026 15:27

JopMolenaar self-assigned this Jun 4, 2026

JopMolenaar force-pushed the feat/forms branch from 26852db to 7483df8 Compare June 17, 2026 12:10

bazottie and others added 22 commits June 18, 2026 16:25

Add form components, api routes, and migrations

273f635

Update form content collection with meta

6ab8683

Update end.d.ts

cbfeff7

Update action in form api route

4df6e6a

Update action loading and component response structure

24d3277

add Form tests

c012106

refactor(migrations): more generic migration

2229be2

feat(Forms): add submit label to form record

a5f7bc0

feat(forms): cms migration

8f08384

fix(): update formblock with current main

e7c2bb9

chore(): semicolon

c63e6ef

chore(): ~/ imports in form test

2e686c3

fix(): fix new translation form block

9221733

feat(FormBlock): adds different kind of inputs

6cf7f72

fix(): lint and html validating errors, + remove width defaults

213c597

fix(): add fieldsets for grouped checkboxes and radios

163b027

chore(): as const

1a82697

fix(): adds field types in separate file

78a1a67

chore(): adds migrations for forms [needsa to be checked]

22c6bcc

fix(): adds extra tests, form success and error page fix

8ffb97c

fix: error messages form fields and api.

d3ac93d

chore: removes border-color

9d7afe1

JopMolenaar force-pushed the feat/forms branch from 3252d17 to 9d7afe1 Compare June 18, 2026 14:26

fix(): updates migrations

a9e0b34

JopMolenaar added 11 commits June 18, 2026 17:36

fix(): adds form block readme

46854ac

fix(): form client ts improvements + comment checkbox group script

840e410

fix(): merge input component files together

532c5e8

chore(): formatting

ee1ee8a

fix(): translation and phone regex

4c9d190

fix(): adds error page for 500 errors

02f9acf

fix(): gate submit button, show error page on 500 error fix, render t…

8d9c235

…urnstile on form back button

fix(): removes turnstile check for showing error page

c9e3f26

fix(): cleans up form.client.ts by seperating functions and placing 4…

bc136f1

…00 and 500 errors in different if behaviours

fix(): form block tests

760c956

fix(): remove inline errors on new inline errors or submit

a0094f5

JopMolenaar marked this pull request as ready for review June 24, 2026 09:22

Copilot AI review requested due to automatic review settings June 24, 2026 09:22

Copilot started reviewing on behalf of JopMolenaar June 24, 2026 09:22 View session

Copilot AI reviewed Jun 24, 2026

View reviewed changes

JopMolenaar added 2 commits June 24, 2026 12:50

fix(): return 404, adds number type in dato, removes result logs

f9e00f2

fix(): focus inline error,

56e410d

turnstile token to string, removes use turnstile input

Navigation Menu

Uh oh!

Add Form component - #302

Add Form component#302
bazottie wants to merge 36 commits into
mainfrom
feat/forms

bazottie commented Sep 11, 2025 •

edited by JopMolenaar

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Sep 11, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

bazottie commented Sep 11, 2025 • edited by JopMolenaar Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Associated issue

How to test

Checklist

Uh oh!

cloudflare-workers-and-pages Bot commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying head-start with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bazottie commented Sep 11, 2025 •

edited by JopMolenaar

Loading

cloudflare-workers-and-pages Bot commented Sep 11, 2025 •

edited

Loading