# Angular quickstart

Add a working contact form to an Angular app. You write the form, and Formerie checks it, stores it, and emails you.

## Install

npm:

```sh
npm install @formerie/angular @formerie/client
```

pnpm:

```sh
pnpm add @formerie/angular @formerie/client
```

Yarn:

```sh
yarn add @formerie/angular @formerie/client
```

Bun:

```sh
bun add @formerie/angular @formerie/client
```

Formerie packages are in alpha, so APIs can still change between releases.

## Add the form

Save this as `contact.component.ts`, a standalone component. It needs Angular 17 or later.

```ts
import { Component, inject, signal } from "@angular/core";
import { FormerieService } from "@formerie/angular";
import type { SubmitResponse } from "@formerie/client";

@Component({
  selector: "app-contact",
  standalone: true,
  template: `
    <form (submit)="submit($event)">
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required></textarea>
      <button [disabled]="submitting()">Send</button>
      @if (result(); as current) {
        <p>{{ current.ok ? "Thanks!" : current.error.message }}</p>
      }
    </form>
  `,
})
export class ContactComponent {
  private readonly formerie = inject(FormerieService);

  readonly submitting = signal(false);
  readonly result = signal<SubmitResponse | null>(null);

  async submit(event: Event) {
    event.preventDefault();
    this.submitting.set(true);
    this.result.set(
      await this.formerie.submit(
        { workspace: "acme", form: "contact" },
        { fields: Object.fromEntries(new FormData(event.target as HTMLFormElement)) },
      ),
    );
    this.submitting.set(false);
  }
}
```

Each input's `name` is the field it fills in Formerie.

## Set up the form in the app

1. Open [app.formerie.com](https://app.formerie.com) and create a form named **Contact**. It comes with the
   name, email, and message fields this code sends.
2. On the **Delivery** tab, add your email address, then choose **Save delivery**. Confirm the email
   Formerie sends you.
3. On the **Publish** tab, choose **API-only** and add the address your dev server prints, such as `http://localhost:4200`, under
   **Your website addresses**. `localhost` and `127.0.0.1` count as different addresses. Add your live site's address the
   same way when you deploy.
4. Choose **Publish form**.
5. In the code above, replace `acme` with the workspace handle shown on the **Publish** tab.

## Check it arrived

Run your app, fill in the form, and send it. "Thanks!" appears on the page. In the app, your response shows
under **Submissions**, and its email under **Deliveries**.

Seeing a CORS error, or `NETWORK_ERROR`? Your site's address isn't on the **Publish** tab yet, or you haven't published since adding it.
See [Troubleshooting](/guides/troubleshooting/).

## Going further

### Your own hostname

`FormerieService` is provided at the root, so it needs no setup. To submit to a hostname you've [connected](/guides/custom-domains/), give the
service its address through `FORMERIE_CLIENT_CONFIG`, in the `providers` you pass to `bootstrapApplication`, and use the
target `{ branded: true, form: "contact" }`:

```ts
import { FORMERIE_CLIENT_CONFIG } from "@formerie/angular";

export const providers = [
  { provide: FORMERIE_CLIENT_CONFIG, useValue: { endpoint: "https://forms.example.com" } },
];
```

## Read next

- [Recipes](/guides/recipes/): quote requests, surveys, and routing by topic
- [Show field errors and more](/guides/framework-entry-points/#going-further)
- [JavaScript SDK](/guides/javascript-sdk/) and [API](/guides/api-reference/): the full reference