Simple form 🧘‍♂️

The simple way to handle forms in your Astro project

---
import { z } from "zod";
import { createForm } from "simple:form";

const checkout = createForm({
  quantity: z.number(),
  email: z.string().email(),
  allowAlerts: z.boolean(),
});

const result = await Astro.locals.form.getData(checkout);

if (result?.data) {
  await myDb.insert(result.data);
  // proceed to checkout
}
---

<form method="POST">
  <label for="quantity">Quantity</label>
  <input id="quantity" {...checkout.inputProps.quantity} />

  <label for="email">Email</label>
  <input id="email" {...checkout.inputProps.email} />

  <label for="allowAlerts">Allow alerts</label>
  <input id="allowAlerts" {...checkout.inputProps.allowAlerts} />
</form>

📚 Visit the docs for more information and usage examples.

simple-stack-form

0.1.12

Patch Changes

• #40 23cb93c Thanks @dsnjunior! - Add min and max input props to number input if present on schema

0.1.11

Patch Changes

• #38 43eb52c Thanks @dsnjunior! - Set input type as email for inputs validating email values

0.1.10

Patch Changes

• #34 574fee1 Thanks @bholmesdev! - Add a generic React template to use simple-form in non-Astro projects.

  To try it, install simple-stack-form as a dependency in your React-based project:

  # pnpm
  pnpm i simple-stack-form
  # npm
  npm i simple-stack-form

  And run the simple-form create command. This will create a base template for validation, and leave onSubmit handling to you.

  # pnpm
  pnpx run simple-form create
  # npm
  npx simple-form create

0.1.9

Patch Changes

• #31 0d489e5 Thanks @bholmesdev! - Async validation would cause the form to submit even when form errors are present. This fix updates all form templates to call Astro's submit method manually.

0.1.8

Patch Changes

• #29 79d5cc5 Thanks @dsnjunior! - Make inputProps keys from created forms typed. This way will be easier to identify what inputs are available for the each form.

0.1.7

Patch Changes

• 3405d5b Thanks @dsnjunior! - Add Solid JS template

0.1.6

Patch Changes

• #18 86034e4 Thanks @bholmesdev! - Fix accidental form submission on client validation errors