Create an account

Account fields and valid-only actions.

Complete the Forms setup 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

---
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

---
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>

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]
});

Preview Interactive demo

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.