ПОСІБНИК З ІНТЕГРАЦІЇ · ANGULAR & SPA

Інтеграція кутової контактної форми (окремо та сигнали)

Підключіть програми Angular 17/18+ до Lugatu за допомогою автономних компонентів, реактивних сигналів і HttpClient для надійної доставки контактної форми без підтримки SMTP-сервера.

Connect Angular Project → Ознайомтеся з посібником React

1. Автономний компонент контактної форми з реактивними сигналами

Сучасний Angular надає перевагу автономним компонентам і сигналам, а не важким модулям Ng. Ця реалізація забезпечує доступну контактну форму з реактивним завантаженням, помилками та успішними станами, які надсилаються безпосередньо до 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 і Angular Universal Server-to-Server Forwarding

Якщо ваша програма Angular працює з Angular SSR (процесор Node/Express), ви можете надсилати запити через обробник маршрутів на стороні сервера, щоб захистити ваш ключ Lugatu Server-to-Server API.

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. Захист від ботів і конфігурація Honeypot

Lugatu автоматично перевіряє поле _gotcha. Зберігайте його невидимим для відвідувачів, використовуючи display:none і tabindex="-1". Спам-боти, що заповнюють кожен вхід DOM, викликають тихе придушення.

tip

Ніколи не використовуйте мітки форми для вводу honeypot. Залиште автозаповнення вимкненим і виключіть поле з імен, доступних програмі зчитування з екрана.

Інваріант безпеки та автентифікації

Інваріант безпеки: міжсерверні ключі API (lug_live_...) ніколи не можна об’єднувати в активи Angular або файли environment.ts на стороні клієнта. Використовуйте загальнодоступну кінцеву точку для прямого надсилання клієнтом або пересилання через кінцеві точки сервера.

Усунення несправностей і поширені помилки передавання

HTTP 403 FORBIDDEN_BROWSER_ORIGIN під час надсилання з Angular

Публічні кінцеві точки форми дозволяють перехресне надсилання з будь-якого браузера. Якщо ви викликаєте міжсерверну кінцеву точку (POST /api/v1/forms/{id}/submissions) безпосередньо з Angular, переключіться на публічну кінцеву точку (POST /api/v1/public/forms/{id}/submissions) або пересилайте через бекенд.

Часті запитання

Чи підтримує Lugatu Angular SSR із гідратацією клієнта?

так Надсилання публічних форм Lugatu виконується через вибірку на стороні клієнта або через HttpClient після взаємодії користувача, що повністю сумісно з Angular SSR і гідратацією клієнта.

Готові створити кінцеву точку форми?

Почніть безкоштовно за лічені секунди. Кредитна картка не потрібна.

Почніть безкоштовно →