INTEGRASJONSGUIDE · ANGULAR & SPA

Kantet kontaktskjemaintegrasjon (frittstående og signaler)

Koble Angular 17/18+-applikasjoner til Lugatu ved hjelp av frittstående komponenter, reaktive signaler og HttpClient for pålitelig levering av kontaktskjemaer uten å vedlikeholde en SMTP-server.

Connect Angular Project → Utforsk React Guide

1. Frittstående kontaktskjemakomponent med reaktive signaler

Modern Angular favoriserer frittstående komponenter og signaler fremfor tunge NgModules. Denne implementeringen gir et tilgjengelig kontaktskjema med reaktiv lasting, feil og suksesstilstander som sendes direkte til Lugatu.

contact-form.component.ts typescript

import { Component, signal, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <form (ngSubmit)="onSubmit()" class="space-y-4 max-w-md">
      <div>
        <label for="name" class="block text-sm font-semibold mb-1">Your Name</label>
        <input id="name" type="text" [(ngModel)]="name" name="name" required class="w-full border rounded-xl p-2.5" />
      </div>
      <div>
        <label for="email" class="block text-sm font-semibold mb-1">Email Address</label>
        <input id="email" type="email" [(ngModel)]="email" name="email" required class="w-full border rounded-xl p-2.5" />
      </div>
      <div>
        <label for="message" class="block text-sm font-semibold mb-1">Message</label>
        <textarea id="message" rows="4" [(ngModel)]="message" name="message" required class="w-full border rounded-xl p-2.5"></textarea>
      </div>

      <!-- Honeypot spam defense -->
      <input type="text" [(ngModel)]="gotcha" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />

      <button type="submit" [disabled]="isSubmitting()" class="btn-primary-editorial py-2.5 px-6">
        {{ isSubmitting() ? 'Sending...' : 'Send Message' }}
      </button>

      <p *ngIf="isSuccess()" class="text-sm text-green-700 font-medium">Thank you! Your message has been received.</p>
      <p *ngIf="errorMessage()" class="text-sm text-red-600">{{ errorMessage() }}</p>
    </form>
  `,
})
export class ContactFormComponent {
  private http = inject(HttpClient);

  name = signal('');
  email = signal('');
  message = signal('');
  gotcha = signal('');

  isSubmitting = signal(false);
  isSuccess = signal(false);
  errorMessage = signal('');

  onSubmit() {
    if (this.gotcha()) return; // Silent discard for automated bot submissions

    this.isSubmitting.set(true);
    this.errorMessage.set('');

    const payload = {
      fields: {
        name: this.name(),
        email: this.email(),
        message: this.message(),
      },
      honeypot: this.gotcha(),
    };

    this.http.post('https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions', payload)
      .subscribe({
        next: () => {
          this.isSubmitting.set(false);
          this.isSuccess.set(true);
          this.name.set('');
          this.email.set('');
          this.message.set('');
        },
        error: () => {
          this.isSubmitting.set(false);
          this.errorMessage.set('Submission failed. Please try again.');
        },
      });
  }
}

2. SSR og Angular Universal Server-to-Server-videresending

Hvis Angular-applikasjonen din kjører med Angular SSR (Node / Express-motor), kan du proxy-forespørsler gjennom en rutebehandler på serversiden for å beskytte din Lugatu Server-to-Server API-nøkkel.

server.ts typescript

// Express / Node backend endpoint in Angular SSR
server.post('/api/contact', async (req, res) => {
  const { name, email, message, _gotcha } = req.body;
  if (_gotcha) return res.status(200).json({ ok: true });

  try {
    const response = await fetch(`https://www.lugatu.com/api/v1/forms/${process.env.LUGATU_FORM_ID}/submissions`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.LUGATU_API_KEY}`,
        'Content-Type': 'application/json',
        'Idempotency-Key': crypto.randomUUID(),
      },
      body: JSON.stringify({ fields: { name, email, message } }),
    });

    res.status(response.status).json({ ok: response.ok });
  } catch (error) {
    res.status(500).json({ error: 'Failed to deliver message' });
  }
});

3. Bot Defence & Honeypot-konfigurasjon

Lugatu inspiserer _gotcha-feltet automatisk. Hold den usynlig for menneskelige besøkende ved å bruke display:none og tabindex="-1". Spambotter som fyller hver DOM-inngang utløser stille undertrykkelse.

tip

Bruk aldri skjemaetiketter for honeypot-innganger. La autofullføring være av og ekskluder feltet fra skjermlesertilgjengelige navn.

Sikkerhet og autentisering Invariant

Sikkerhetsinvariant: Server-til-server API-nøkler (lug_live_...) må aldri pakkes inn i Angular-ressurser eller environment.ts-filer på klientsiden. Bruk det offentlige endepunktet for direkte klientinnsendinger eller videresend via serverendepunkter.

Feilsøking og vanlige svelgingsfeil

HTTP 403 FORBIDDEN_BROWSER_ORIGIN ved innsending fra Angular

Offentlige endepunkter tillater innsendinger på tvers av opprinnelse fra alle nettlesere. Hvis du ringer server-til-server-endepunktet (POST /api/v1/forms/{id}/submissions) direkte fra Angular, bytt til det offentlige endepunktet (POST /api/v1/public/forms/{id}/submissions) eller videresend gjennom en backend.

Ofte stilte spørsmål

Støtter Lugatu Angular SSR med klienthydrering?

Ja. Lugatu offentlige skjemainnsendinger utføres via henting på klientsiden eller HttpClient etter brukerinteraksjon, som er fullstendig kompatibel med Angular SSR og klienthydrering.

Klar til å opprette skjemaendepunktet ditt?

Kom i gang gratis på sekunder. Ingen kredittkort kreves.

Start gratis →