GUIDA ALL'INTEGRAZIONE · ANGOLARE & SPA

Integrazione modulo di contatto angolare (autonomo e segnali)

Connetti le applicazioni Angular 17/18+ a Lugatu utilizzando componenti autonomi, segnali reattivi e HttpClient per la consegna affidabile di moduli di contatto senza mantenere un server SMTP.

Connetti progetto angolare → Esplora la guida React

1. Componente modulo di contatto autonomo con segnali reattivi

Modern Angular preferisce componenti e segnali autonomi rispetto ai pesanti NgModule. Questa implementazione fornisce un modulo di contatto accessibile con stati di caricamento reattivo, errore e successo inviati direttamente a 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. Inoltro SSR e Angular Universal da server a server

Se la tua applicazione Angular viene eseguita con Angular SSR (motore Node/Express), puoi inoltrare le richieste tramite un gestore di instradamento lato server per proteggere la tua chiave API Lugatu Server-to-Server.

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. Configurazione della difesa bot e dell'honeypot

Lugatu ispeziona automaticamente il campo _gotcha. Mantienilo invisibile ai visitatori umani utilizzando display:none e tabindex="-1". Gli spambot che riempiono ogni input del DOM attivano la soppressione silenziosa.

tip

Non utilizzare mai le etichette dei moduli per gli input dell'honeypot. Lascia il completamento automatico disattivato ed escludi il campo dai nomi accessibili allo screen reader.

Invariante di sicurezza e autenticazione

Invariante di sicurezza: le chiavi API server-to-server (lug_live_...) non devono mai essere raggruppate in risorse Angular lato client o file Environment.ts. Utilizza l'endpoint pubblico per invii client diretti o inoltra tramite endpoint server.

Risoluzione dei problemi ed errori comuni di importazione

HTTP 403 FORBIDDEN_BROWSER_ORIGIN durante l'invio da Angular

Gli endpoint del modulo pubblico consentono invii multiorigine da qualsiasi browser. Se stai chiamando l'endpoint server-to-server (POST /api/v1/forms/{id}/submissions) direttamente da Angular, passa all'endpoint pubblico (POST /api/v1/public/forms/{id}/submissions) o inoltra tramite un backend.

Domande frequenti

Lugatu supporta Angular SSR con l'idratazione del client?

SÌ. Gli invii di moduli pubblici di Lugatu vengono eseguiti tramite recupero lato client o HttpClient dopo l'interazione dell'utente, che è completamente compatibile con Angular SSR e l'idratazione del client.

Pronto per creare l'endpoint del modulo?

Inizia gratuitamente in pochi secondi. Nessuna carta di credito richiesta.

Inizia gratis →