Standard Form Component

The Standard Form component provides a secure, accessible foundation for building forms in your AstroJS application. It includes built-in bot protection, real-time data handling, and comprehensive validation support.

Key Features

• Bot Protection: Built-in honeypot field

• Real-time Validation: Client-side input validation

• Data Persistence: Optional auto-save functionality

Basic Usage

Create forms with minimal configuration:

1
<Form name="contact-form">
2
    <Input type="text" name="name" required placeholder="Name" label="Name" />
3
    <Input type="email" name="email" required placeholder="Email" label="Email" />
4
</Form>

Auto-save Functionality

Implement auto-save functionality with debouncing. You can set the debounce rate in milliseconds, and define the function that runs on form auto-save. There’s three ways to set this up.

1
import { ready } from '@/components/NST-components/base';
2
import type { FormElement } from '@/components/NST-components/UI/form/data';
3
import { getData, setData } from '@/lib/client/storage';
4

5
const contactForm = await ready(
6
  document.querySelector<FormElement>('form-wrapper[name="contact-form"]')
7
);
8

9
if (contactForm) {
10
  contactForm.saveDataHandler = (formData) => {
11
    const contactFormData = {
12
      name: formData.get('name')?.toString(),
13
      email: formData.get('email')?.toString(),
14
      message: formData.get('message')?.toString(),
15
    };
16

17
    setData('contact-form', {
18
      ...getData('contact-form'),
19
      ...contactFormData,
20
    });
21
  };
22
}

1
import { ready } from '@/components/NST-components/base';
2
import type { FormElement } from '@/components/NST-components/UI/form/data';
3

4
const localDataKey = 'contact-form';
5

6
const contactForm = await ready(
7
  document.querySelector<FormElement>('form-wrapper[name="contact-form"]')
8
);
9

10
if (contactForm) {
11
  //Can also be set in the forms component props without needing a script
12
  contactForm.localDataKey = localDataKey;
13
}

1
import { ready } from '@/components/NST-components/base';
2
import type { FormElement } from '@/components/NST-components/UI/form/data';
3
import { genericSaveDataHandler } from '@/lib/client/storage';
4

5
const localDataKey = 'contact-form';
6

7
const contactForm = await ready(
8
  document.querySelector<FormElement>('form-wrapper[name="contact-form"]')
9
);
10

11
if (contactForm) {
12
  contactForm.saveDataHandler = genericSaveDataHandler(localDataKey, {
13
    dontSave: ['add_to_newsletter'],
14
  });
15
}

Form Component Props API

Form Functions API

The Form component provides the following functions:

The functions submitHandler, saveDataHandler, and loadData should be defined after the form is initialized in a client-side script.

Submit Handler Example

1
import { getData } from '@/lib/client/storage';
2
import { actions } from 'astro:actions';
3
import type { FormElement } from '@/components/NST-components/UI/form/data';
4
import type { ToastElement } from '@/components/NST-components/UI/toast/data';
5
import { ready } from '@/components/NST-components/base';
6

7
const contactForm = await ready(
8
  document.querySelector<FormElement>('form-wrapper[name="contact-form"]')
9
);
10

11
const toast = await ready(
12
  document.querySelector<ToastElement>('#contact-form-toast')
13
);
14

15
if (contactForm) {
16
  const userContactHistory = getData('contact-form');
17
  if (userContactHistory) {
18
    contactForm.loadData(userContactHistory);
19
  }
20

21
  contactForm.submitHandler = async (formData) => {
22
    const { error } = await actions['form/contact'](formData);
23

24
    if (!error) {
25
      toast?.show({
26
        message: 'Message sent successfully',
27
        duration: 3000,
28
        variant: 'success',
29
      });
30
    }
31

32
    return error;
33
  };
34
}

Best Practices

• Use a unique name for each form: This helps with debugging and identifying the form in local storage
• Check Sensitive Data Is Protected: Make sure to check that sensitive data is protected from being saved to local storage
• Do not add too many fields: Too many fields can overwhelm the user and make the form feel cluttered. Consider using a multi-step form instead.