# Angular Integration Guide

Complete guide to integrate MyFormConnect with Angular

      Setup time: **5-10 minutes
      Difficulty: **Easy
        Compatible versions: **Angular 15+**

Submit an Angular contact form to MyFormConnect with the browser `fetch` API and `FormData`. No custom Nest/Express backend required.

## ** Prerequisites

- ** A MyFormConnect account — [sign up here](/users/sign_up)
- ** A form created in your MyFormConnect dashboard with its UUID copied
- ** An Angular project
- ** Basic template-driven or reactive forms familiarity

## ** Integration Methods

### fetch + FormData

                5 minutes

                Easy

Use a template-driven form, build `FormData` from the native form element, and POST with `fetch`. Prefer this over `JSON.stringify` or setting `Content-Type` manually.

                  1

#### Copy your form UUID

                    Get the UUID for the destination form in MyFormConnect.

1. Log in to your MyFormConnect dashboard
2. Open the form
3. Copy the form UUID

##### Important Note

                            Keep the UUID accurate — submissions follow the UUID in the URL.

                  2

#### Add the Angular contact form

                    Create a component that posts `FormData` via `fetch`.

1. Generate or create a `ContactForm` component
2. Replace `YOUR_FORM_UUID` with your UUID
3. Add the component to your contact route

```
import { Component } from '@angular/core';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: `
    <p *ngIf="status === 'success'">Thanks — we will be in touch soon.</p>
    <form *ngIf="status !== 'success'"
          action="https://myformconnect.io/f/YOUR_FORM_UUID"
          method="POST"
          data-mfc="true"
          (submit)="onSubmit($event)">
      <label for="name">Name *</label>
      <input id="name" name="name" type="text" required />

      <label for="email">Email *</label>
      <input id="email" name="email" type="email" required />

      <label for="message">Message</label>
      <textarea id="message" name="message" rows="4"></textarea>

      <button type="submit" [disabled]="status === 'loading'">
        {{ status === 'loading' ? 'Sending…' : 'Send Message' }}
      </button>
      <p *ngIf="status === 'error'">{{ errorMessage }}</p>
    </form>
  `
})
export class ContactFormComponent {
  endpoint = 'https://myformconnect.io/f/YOUR_FORM_UUID';
  status: 'idle' | 'loading' | 'success' | 'error' = 'idle';
  errorMessage = '';

  async onSubmit(e: Event) {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    this.status = 'loading';
    this.errorMessage = '';

    try {
      const res = await fetch(this.endpoint, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: new FormData(form)
      });
      if (!res.ok) throw new Error('Submission failed');
      this.status = 'success';
      form.reset();
    } catch {
      this.status = 'error';
      this.errorMessage = 'Something went wrong. Please try again.';
    }
  }
}
```

##### Important Note

                            Use `fetch` + `FormData` as shown. If you prefer `HttpClient`, still send `FormData` as the body — never `JSON.stringify` the fields.

                  3

#### Test in the browser

                    Submit once and confirm the lead in MyFormConnect.

1. Serve the app and open the contact page
2. Fill in the form and submit
3. Check **Leads** or **Form Responses** in the dashboard

##### Important Note

                            Add `http://localhost:4200` under Domains if Domain Restriction is enabled.

## ** Troubleshooting

              Verify the UUID in the endpoint URL, then check **Leads** or **Form Responses**. Ensure Domains includes your Angular origin when restriction is enabled.

              Pass a `FormData` instance as the body. Do not call `JSON.stringify` and do not set `Content-Type: application/json`.

              Send `Accept: application/json` and `X-Requested-With: XMLHttpRequest` so the endpoint returns JSON for your `fetch` handler.

#### Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

          [** Contact Support](/support)

## ** Related Integrations

      [Next.js Integration Guide →](/docs/frameworks/nextjs)      [Vue Integration Guide →](/docs/frameworks/vue)      [Static Sites Integration Guide →](/docs/deployment/static-sites)

## ** References & Official Documentation

- ** [Getting Started Guide](/docs/getting-started)
- ** [Custom Webhooks](/docs/tools/code/custom-webhooks)

## ** Next Steps

#### ** Configure MyFormConnect

- ** Set up your timezone
- ** Configure lead notifications
- ** Set up advanced spam detection
- ** Add team members to your account

#### ** Advanced Features

- ** Use our custom form templates
- ** Try AI Insights for Leads
- ** Integrate with your CRM
- ** Set up automated workflows