### Start Local Development Environment

Source: https://github.com/formspree/formspree-js/blob/main/CONTRIBUTING.md

Execute this command to run a local development environment using an example app on localhost:3000.

```sh
yarn dev
```

--------------------------------

### Start Vite Project

Source: https://github.com/formspree/formspree-js/blob/main/examples/cra-demo/README.md

Run this command to start the Vite development server. This command is used after dependencies are installed.

```bash
yarn start
```

--------------------------------

### Install @formspree/core with yarn

Source: https://github.com/formspree/formspree-js/blob/main/README.md

Install the core submission client and types using yarn.

```sh
yarn add @formspree/core
```

--------------------------------

### Install @formspree/core with pnpm

Source: https://github.com/formspree/formspree-js/blob/main/README.md

Install the core submission client and types using pnpm.

```sh
pnpm add @formspree/core
```

--------------------------------

### Install @formspree/core with npm

Source: https://github.com/formspree/formspree-js/blob/main/README.md

Install the core submission client and types using npm.

```sh
npm install @formspree/core
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/formspree/formspree-js/blob/main/examples/cra-demo/README.md

Use this command to install project dependencies. Ensure you have Yarn installed.

```bash
yarn
```

--------------------------------

### Install and Build Commands

Source: https://github.com/formspree/formspree-js/blob/main/CLAUDE.md

Commands for installing dependencies, building packages, running the dev server, testing, type checking, linting, formatting, and creating changesets.

```sh
yarn                  # Install dependencies
yarn build            # Build all packages (required before dev)
yarn dev              # Run dev server with cra-demo example on localhost:3000
yarn test             # Run tests across all packages
yarn typecheck        # Type check all packages
yarn lint             # Lint all packages
yarn format           # Format code with Prettier
yarn changeset        # Create a changeset for PRs
```

--------------------------------

### Install @formspree/ajax with npm

Source: https://github.com/formspree/formspree-js/blob/main/README.md

Install the vanilla JavaScript library for declarative form handling using npm.

```sh
npm install @formspree/ajax
```

--------------------------------

### Install @formspree/ajax with yarn

Source: https://github.com/formspree/formspree-js/blob/main/README.md

Install the vanilla JavaScript library for declarative form handling using yarn.

```sh
yarn add @formspree/ajax
```

--------------------------------

### Install Formspree AJAX via NPM or Yarn

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-ajax/README.md

Install the library using your preferred package manager.

```sh
npm install @formspree/ajax

yarn add @formspree/ajax
```

--------------------------------

### Install @formspree/ajax with pnpm

Source: https://github.com/formspree/formspree-js/blob/main/README.md

Install the vanilla JavaScript library for declarative form handling using pnpm.

```sh
pnpm add @formspree/ajax
```

--------------------------------

### Install Dependencies and Build Project

Source: https://github.com/formspree/formspree-js/blob/main/CONTRIBUTING.md

Run these commands from the root formspree-js directory to install dependencies and build the project artifacts.

```sh
yarn
yarn build
```

--------------------------------

### Ajax Package Demo Command

Source: https://github.com/formspree/formspree-js/blob/main/CLAUDE.md

Command to build and run the ajax-demo example for the @formspree/ajax package.

```sh
yarn demo             # Build and run ajax-demo example (from packages/formspree-ajax)
```

--------------------------------

### Install @formspree/react with npm

Source: https://github.com/formspree/formspree-js/blob/main/README.md

Install the React hooks and components using npm. Requires React 16.8 or higher.

```sh
npm install @formspree/react
```

--------------------------------

### Install @formspree/react with yarn

Source: https://github.com/formspree/formspree-js/blob/main/README.md

Install the React hooks and components using yarn. Requires React 16.8 or higher.

```sh
yarn add @formspree/react
```

--------------------------------

### Install @formspree/react with pnpm

Source: https://github.com/formspree/formspree-js/blob/main/README.md

Install the React hooks and components using pnpm. Requires React 16.8 or higher.

```sh
pnpm add @formspree/react
```

--------------------------------

### Configure Formspree AJAX with Options and Callbacks

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-ajax/README.md

Initialize the form with detailed configuration, including required and optional parameters, custom data, and lifecycle callbacks.

```js
import { initForm } from '@formspree/ajax';

const handle = initForm({
  // Required
  formElement: '#contact-form', // CSS selector or HTMLFormElement
  formId: 'YOUR_FORM_ID', // Your Formspree form ID

  // Optional
  origin: 'https://formspree.io', // API origin (default)
  debug: false, // Enable console logging

  // Extra data merged into every submission
  data: {
    source: 'website',
    campaign: () => getCampaign(),
    timestamp: async () => await getServerTime(),
  },

  // Lifecycle callbacks
  onInit: (context) => {},
  onSubmit: (context) => {},
  onSuccess: (context, result) => {},
  onError: (context, error) => {},
  onFailure: (context, error) => {},

  // Custom rendering (override defaults)
  enable: (context) => {}, 
  disable: (context) => {}, 
  renderFieldErrors: (context, error) => {}, 
  renderSuccess: (context, message) => {}, 
  renderFormError: (context, message) => {}, 
});

// Clean up when done
handle.destroy();
```

--------------------------------

### Initialize Formspree AJAX using Script Tag (CDN)

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-ajax/README.md

Include the library via a script tag for use without a bundler. Initialize the form with your form ID.

```html
<script>
  window.formspree = 
    window.formspree || 
    function () {
      (formspree.q = formspree.q || []).push(arguments);
    };
  formspree('initForm', { formElement: '#my-form', formId: 'YOUR_FORM_ID' });
</script>
<script src="https://unpkg.com/@formspree/ajax@1" defer></script>
```

--------------------------------

### Initialize Formspree via CDN

Source: https://github.com/formspree/formspree-js/blob/main/examples/ajax-demo/public/index-cdn.html

Load the global.js script and then call `window.formspree()` to initialize your form. This method is suitable for projects that do not use a bundler.

```javascript
formspree('initForm', {
  formElement: '#contact-form',
  formId: 'meekngvn',
  debug: true,
});
```

--------------------------------

### Publish New Version

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-core/README.md

Run this command to publish a new version of the Formspree Core library.

```bash
npm run release
```

--------------------------------

### Initialize Formspree AJAX via CDN

Source: https://github.com/formspree/formspree-js/blob/main/README.md

Use the global `window.formspree()` API to initialize Formspree AJAX with a form element and form ID. Load the script via a script tag.

```html
<script>
  window.formspree =
    window.formspree ||
    function () {
      (formspree.q = formspree.q || []).push(arguments);
    };
  formspree('initForm', { formElement: '#my-form', formId: 'YOUR_FORM_ID' });
</script>
<script src="https://unpkg.com/@formspree/ajax@1" defer></script>
```

--------------------------------

### Initialize Formspree AJAX using ESM with a Bundler

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-ajax/README.md

Import and initialize the form using the `initForm` function when using a module bundler.

```js
import { initForm } from '@formspree/ajax';

initForm({
  formElement: '#contact-form',
  formId: 'YOUR_FORM_ID',
});
```

--------------------------------

### Run Tests and Typecheck

Source: https://github.com/formspree/formspree-js/blob/main/CONTRIBUTING.md

Commands to execute tests and perform type checking across all packages in the project.

```sh
yarn test
yarn typecheck
```

--------------------------------

### Package-Specific Build Commands

Source: https://github.com/formspree/formspree-js/blob/main/CLAUDE.md

Commands to run tests, build, or lint individual packages within the monorepo.

```sh
yarn test             # Run tests for this package
yarn build            # Build this package only
yarn lint             # Lint this package
```

--------------------------------

### Initialize Formspree AJAX with Custom Origin

Source: https://github.com/formspree/formspree-js/blob/main/examples/ajax-demo/README.md

Initializes Formspree AJAX using a custom origin URL, useful for staging or specific deployment environments. Enables debug logging.

```typescript
initForm({
  formElement: '#contact-form',
  formId: 'your-form-id',
  origin: 'https://staging.formspree.io',
  debug: true,
});
```

--------------------------------

### Initialize Formspree AJAX

Source: https://github.com/formspree/formspree-js/blob/main/examples/ajax-demo/README.md

Basic initialization of Formspree AJAX for a form element. Handles success, validation errors, and unexpected failures.

```typescript
import { initForm } from '@formspree/ajax';

initForm({
  formElement: '#contact-form',
  formId: 'your-form-id',
  onSuccess: ({ form }) => {
    console.log('Success!');
    form.reset();
  },
  onError: (_context, error) => {
    const messages = error.getFormErrors().map((e) => e.message);
    console.error('Validation errors:', messages);
  },
  onFailure: (_context, error) => {
    console.error('Unexpected error:', error);
  },
});
```

--------------------------------

### Generate Changeset for Pull Request

Source: https://github.com/formspree/formspree-js/blob/main/CONTRIBUTING.md

Use this command to create a changeset file when opening a pull request. Changeset files are used for releasing new package versions.

```sh
yarn changeset
```

--------------------------------

### useForm return value structure

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-react/CHANGELOG.md

Illustrates the initial structure of the return value from the `useForm` hook, where state variables were wrapped in a `state` object. This was a change in the beta.1 release.

```javascript
const [state, submit] = useForm('xyz');
```

--------------------------------

### Appending Extra Data to Form Submissions

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-ajax/README.md

Use the 'data' option during initialization to append static strings, synchronous functions, or asynchronous functions to every submission. Undefined values are ignored.

```javascript
initForm({
  formElement: '#my-form',
  formId: 'YOUR_FORM_ID',
  data: {
    source: 'landing-page',
    referrer: () => document.referrer || undefined,
    sessionId: async () => await fetchSessionId(),
  },
});
```

--------------------------------

### Initialize Formspree AJAX with Extra Data

Source: https://github.com/formspree/formspree-js/blob/main/examples/ajax-demo/README.md

Initializes Formspree AJAX and includes additional custom data with the form submission, such as a source identifier and timestamp.

```typescript
initForm({
  formElement: '#contact-form',
  formId: 'your-form-id',
  data: {
    source: 'website',
    timestamp: new Date().toISOString(),
  },
  onSuccess: ({ form }) => {
    form.reset();
  },
});
```

--------------------------------

### Use useForm Hook in React

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-react/CHANGELOG.md

The useForm hook is the primary way to integrate Formspree with your React application. It manages form state and submission.

```javascript
const [state, handleSubmit] = useForm(formKey, opts);
```

--------------------------------

### Update useForm argument structure

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-react/CHANGELOG.md

Shows the change in how the `useForm` hook accepts its arguments, moving from a string ID to an object with an `id` property. This change was introduced to accommodate more options.

```diff
- const [state, submit] = useForm('XXXXXXXX')
+ const [state, submit] = useForm({ id: 'XXXXXXXX' })
```

--------------------------------

### HTML Structure for Formspree AJAX

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-ajax/README.md

Basic HTML structure including elements for success messages, error messages, form fields, and a submit button, utilizing Formspree's data attributes.

```html
<div data-fs-success></div>
<div data-fs-error></div>

<form id="contact-form">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" data-fs-field />
  <span data-fs-error="email"></span>

  <button type="submit" data-fs-submit-btn>Send</button>
</form>
```

--------------------------------

### Use useSubmit Hook in React

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-react/CHANGELOG.md

The useSubmit hook is suitable for code that manages submission state using other libraries or custom logic. It provides submission functionality without dictating state management.

```javascript
const [state, handleSubmit] = useSubmit(formKey, opts);
```

--------------------------------

### Customizing Formspree JS Default Styles

Source: https://github.com/formspree/formspree-js/blob/main/packages/formspree-ajax/README.md

Override the default styles for error messages, invalid fields, and success/form error banners using custom CSS selectors.

```css
/* Error message text */
[data-fs-error] {
  color: #dc3545;
  font-size: 12px;
}

/* Invalid field border */
[data-fs-field][aria-invalid='true'] {
  border-color: #dc3545;
}

/* Success message banner */
[data-fs-success][data-fs-active] {
  background: #d4edda;
  color: #155724;
}

/* Form-level error banner */
[data-fs-error=''][data-fs-active] {
  background: #f8d7da;
  color: #721c24;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.