Skip to content
Astro Utils

Getting started

Introduction

Astro-Utils Forms is a set of tools to help you build forms in Astro. It provides similar functionality to ASP.NET Web Forms, but with a modern approach.

Some of the features:

  • ✅ Client & Server side form validation
  • ✅ Forms CSRF protection
  • ✅ Web Controls (Data Binding) + View State
  • ✅ JWT session

Installation

First install the package

Terminal window
npm install @astro-utils/forms

Adding integration & middleware

Edit your astro.config.ts to add the integration

import { defineConfig } from 'astro/config';
import formDebug from "@astro-utils/forms/dist/integration.js";


export default defineConfig({
  output: 'server',
  integrations: [formDebug]
});

This integration change the way Astro handle the render - will render in the order it was written, to allow the forms to work properly.

Edit src/middleware.ts to add the middleware

import astroFormsMiddleware from "@astro-utils/forms";
import {sequence} from "astro/middleware";


export const onRequest = sequence(astroFormsMiddleware());

Editing Main Layout

Add WebForms component to the main project layout

---
import { WebForms } from "@astro-utils/forms/forms.js";


export interface Props {
  title: string;
}


const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <WebForms>
      <slot />
    </WebForms>
  </body>
</html>