Przejdź do instrukcji
Spis dokumentacji

Integracja formularza

Użyj zwykłego HTML albo wyślij dane przez JavaScript. Nazwy pól decydują o tym, co zobaczysz w panelu.

Formularz HTML

Adres wysyłki znajdziesz w Formularze → wybrany formularz → Integracja. Podstaw go do action, ustaw method="POST" i dodaj atrybut name do każdego pola, które ma trafić do zgłoszenia.

Najprostszy formularzHTML
<form action="https://forms.example.com/f/TWOJ_PUBLIC_ID" method="POST">
  <label>E-mail <input type="email" name="email" required /></label>
  <label>Wiadomość <textarea name="message" required></textarea></label>
  <button type="submit">Wyślij</button>
</form>

Po wysłaniu otrzymasz odpowiedź success: true. Możesz też ustawić w panelu własny adres przekierowania po sukcesie — zwykły POST HTML przeniesie użytkownika na tę stronę.

Wysyłka przez fetch

Dla aplikacji z własnym interfejsem użyj JSON i nagłówka Accept: application/json. Przykład zakłada elementy o ID contact-form oraz result. Dla CAPTCHA lub minimalnego czasu użyj wariantu fetch z panelu, który dołącza wymagane pola.

Obsługa wysyłki i komunikatuJavaScript
const form = document.getElementById('contact-form');
const result = document.getElementById('result');
let sending = false;
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  if (sending) return;
  sending = true;
  try {
    const response = await fetch('https://forms.example.com/f/TWOJ_PUBLIC_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(Object.fromEntries(new FormData(form)))
    });
    const data = await response.json();
    result.textContent = response.ok && data.success
      ? 'Wysłano wiadomość.'
      : (data.error?.message || 'Nie udało się wysłać.');
    if (response.ok && data.success) form.reset();
  } catch {
    result.textContent = 'Sprawdź połączenie i spróbuj ponownie.';
  } finally {
    sending = false;
  }
});

Najczęstsze problemy

KomunikatCo sprawdzić
FORM_UNAVAILABLEPublic ID, status witryny/formularza, aktywne konto i licencję.
ORIGIN_NOT_ALLOWEDAdres strony wysyłającej dane i listę dozwolonych originów.
SUBMIT_TOO_FASTCzy używasz aktualnego kodu z panelu z polem czasu rozpoczęcia.
SUBMISSION_LIMIT_REACHEDMiesięczne użycie i dostępny limit w dashboardzie.
PAYLOAD_TOO_LARGE / VALIDATION_ERRORWielkość danych i liczbę pól. Wysyłanie plików nie jest obsługiwane.

Nie zmieniaj nazw zarezerwowanych pól, np. _captcha i _form_started_at. Używaj osobnego name dla zwykłych pól. Powyższy prosty fetch obsługuje pojedynczą wartość pod każdą nazwą.

Integracja formularza · ZoraForms Docs