Site code reference

Forms in code

How to put a form on a Starjay site with the three form components, and how to style them.

A form has two parts:

A form definition, created and changed with modify_form. It holds the fields (type, label, required, placeholder, help text, options), where submissions go, and the messages. You can't write it as a file.
Markup built from three platform components, which you place and style:

---
import FormBase from '@starjay/design-system/components/forms/FormBase.astro'
import FormField from '@starjay/design-system/components/forms/FormField.astro'
import FormSubmit from '@starjay/design-system/components/forms/FormSubmit.astro'
---

The components handle the data and accessibility: labels, error messages, the spam-protection field, the status message after sending, and submission. You handle layout and style.

Props

<FormBase>

Prop	What it styles
`formId` (required)	Which form definition to use
`class`	The `<form>` element. Use it for layout: `flex flex-col gap-4`, `grid grid-cols-2 gap-6`.
`statusErrorClass`	The status line after a failed send
`statusSuccessClass`	The status line after a successful send

Put the fields, the submit button, and any headings, wrappers or <fieldset> groups inside it.

<FormField>

Prop	What it styles
`formId` (required)	Must match the parent `FormBase`
`name` (required)	The field's id in the form definition
`class`	The wrapper `<div>`. Use it for grid spans and flex sizing.
`labelClass`	The `<label>`
`inputClass`	The input, text area or select (also radio and checkbox controls)
`helpClass`	The help text
`errorClass`	The field's error message

<FormSubmit> takes class. The button label goes inside it.

Styling

The components come unbranded: black and white only. Brand them with the site's token classes through the props above. Your classes replace conflicting base classes, so inputClass="border-accent-300" replaces the base border color without any reset.

Example

---
// src/components/sections/ContactForm.astro
import FormBase from '@starjay/design-system/components/forms/FormBase.astro'
import FormField from '@starjay/design-system/components/forms/FormField.astro'
import FormSubmit from '@starjay/design-system/components/forms/FormSubmit.astro'

interface Props {
  heading?: string
}

const { heading = '' } = Astro.props as Props
---

<section data-component="ContactForm" class="w-full bg-surface-50 py-20">
  <div class="mx-auto max-w-xl px-6">
    <h2 class="mb-8 font-display text-3xl text-ink-900">{heading}</h2>
    <FormBase formId="contact" class="grid grid-cols-1 gap-4 sm:grid-cols-2" statusSuccessClass="text-accent-700">
      <FormField formId="contact" name="name" inputClass="border-ink-200 focus:ring-accent-400" />
      <FormField formId="contact" name="email" inputClass="border-ink-200 focus:ring-accent-400" />
      <FormField formId="contact" name="message" class="sm:col-span-2" inputClass="border-ink-200 focus:ring-accent-400" />
      <FormSubmit class="justify-self-start rounded-md bg-accent-600 px-8 py-3 text-white hover:bg-accent-700">
        Send message
      </FormSubmit>
    </FormBase>
  </div>
</section>

Definitions