# Create an account

Account fields and valid-only actions.

Source: https://withastro-utils.github.io/docs/examples/signup/

Complete the [Forms setup](https://withastro-utils.github.io/docs/guides/forms/getting-started/index.md) first, or use the configuration, middleware, and layout files in the sidebar. Install `@astro-utils/forms` and `@astrojs/node` in an existing Astro project.

## Try the interaction

Enter a name and email, then submit. An invalid email is rejected before the action runs.

### src/layouts/Layout.astro

```astro title="src/layouts/Layout.astro"
---
import { WebForms } from '@astro-utils/forms/forms.js';
---
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title><slot name="title" /></title>
    </head>
    <body>
        <WebForms>
            <slot />
        </WebForms>
    </body>
</html>
```

### src/pages/signup.astro

```astro title="src/pages/signup.astro"
---
import { BButton, BInput, Bind, BindForm, FormErrors } from '@astro-utils/forms/forms.js';
import Layout from '../layouts/Layout.astro';

const bind = Bind({ name: '', email: '' });
let message = '';

function signUp() {
    try {
        signupUser({ name: bind.name, email: bind.email });
        message = `Account details received for ${bind.email}.`;

        bind.defaults();
        Astro.locals.forms.redirectTimeoutSeconds('/', 2); // demo - not redirecting
    } catch (error){
        message = `Error: ${error.message}`;
    }
}
---
<Layout>
    <span slot="title">Create an account</span>
    <BindForm {bind}>
        <FormErrors />
        
        <label for="name">Name</label>
        <BInput id="name" name="name" required maxlength={40} />

        <label for="email">Email</label>
        <BInput id="email" name="email" type="email" required maxlength={120} />

        <BButton onClick={signUp} whenFormOK>Create account</BButton>
        {message && <p role="status">{message}</p>}
    </BindForm>
</Layout>
```

### src/middleware.ts

```ts title="src/middleware.ts"
import forms from '@astro-utils/forms';

export const onRequest = forms();
```

### astro.config.mjs

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
import forms from '@astro-utils/forms/dist/integration.js';

export default defineConfig({
    output: 'server',
    adapter: node({ mode: 'standalone' }),
    integrations: [forms]
});
```

## How it works

The runnable source stores the submitted details in the signed session. It does not create a database account or send an email. Replace that small callback with your account service once the form works.

## Continue

Learn how to [show custom validation errors](https://withastro-utils.github.io/docs/guides/forms/data-binding/index.md#validate-a-reserved-name).