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.
<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.
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
| Komunikat | Co sprawdzić |
|---|---|
| FORM_UNAVAILABLE | Public ID, status witryny/formularza, aktywne konto i licencję. |
| ORIGIN_NOT_ALLOWED | Adres strony wysyłającej dane i listę dozwolonych originów. |
| SUBMIT_TOO_FAST | Czy używasz aktualnego kodu z panelu z polem czasu rozpoczęcia. |
| SUBMISSION_LIMIT_REACHED | Miesięczne użycie i dostępny limit w dashboardzie. |
| PAYLOAD_TOO_LARGE / VALIDATION_ERROR | Wielkość 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ą.