INTEGRATIEGIDS · HOEKIG & SPA

Integratie van hoekige contactformulieren (standalone en signalen)

Verbind Angular 17/18+ applicaties met Lugatu met behulp van standalone componenten, reactieve signalen en HttpClient voor betrouwbare levering van contactformulieren zonder een SMTP-server te onderhouden.

Sluit het hoekproject aan → Ontdek de React-gids

1. Standalone contactformuliercomponent met reactieve signalen

Modern Angular geeft de voorkeur aan zelfstandige componenten en signalen boven zware NgModules. Deze implementatie biedt een toegankelijk contactformulier met reactieve laad-, fout- en successtatussen die rechtstreeks naar Lugatu worden verzonden.

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 en Angular Universal Server-to-Server Forwarding

Als uw Angular-applicatie wordt uitgevoerd met Angular SSR (Node/Express-engine), kunt u vragen via een route-handler aan de serverzijde proxyen om uw Lugatu Server-to-Server API-sleutel te beschermen.

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. Botverdediging en Honeypot-configuratie

Lugatu inspecteert het _gotcha-veld automatisch. Houd het onzichtbaar voor menselijke bezoekers met behulp van display:none en tabindex="-1". Spambots die elke DOM-invoer vullen, veroorzaken stille onderdrukking.

tip

Gebruik nooit formulierlabels voor honeypot-invoer. Laat automatisch aanvullen uitgeschakeld en sluit het veld uit van namen die voor schermlezers toegankelijk zijn.

Beveiliging en authenticatie invariant

Beveiligingsinvariant: server-naar-server API-sleutels (lug_live_...) mogen nooit worden gebundeld in Angular-middelen of Environment.ts-bestanden aan de clientzijde. Gebruik het openbare eindpunt voor directe clientinzendingen of stuur deze door via servereindpunten.

Problemen oplossen en veel voorkomende inslikfouten

HTTP 403 FORBIDDEN_BROWSER_ORIGIN bij indiening vanuit Angular

Eindpunten in openbare vorm maken cross-origine-inzendingen vanuit elke browser mogelijk. Als u het server-naar-server-eindpunt (POST /api/v1/forms/{id}/submissions) rechtstreeks vanuit Angular aanroept, schakel dan over naar het openbare eindpunt (POST /api/v1/public/forms/{id}/submissions) of stuur het door via een backend.

Veelgestelde vragen

Ondersteunt Lugatu Angular SSR met cliënthydratatie?

Ja. Inzendingen van openbare Lugatu-formulieren worden uitgevoerd via client-side fetch of HttpClient na gebruikersinteractie, wat volledig compatibel is met Angular SSR en clienthydratatie.

Klaar om uw formuliereindpunt te maken?

Ga binnen enkele seconden gratis aan de slag. Geen creditcard vereist.

Begin gratis →