Skip to content
Docs
Français formerie.com Sign up
 Docs

Try a topic, a function name, or an error code such as FORM_CLOSED.

 Français formerie.com

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

Install @formerie/angular @formerie/client
Shell 
npm install @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.

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

Going further

Your own hostname

To submit to a hostname you’ve connected, give the service its address through FORMERIE_CLIENT_CONFIG:

TypeScript
import { FORMERIE_CLIENT_CONFIG } from "@formerie/angular";

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

View as Markdown