Jak wysłać dane formularza HTML za pomocą JavaScript fetch()

Jeśli kiedykolwiek tworzyłeś formularz kontaktowy i obserwowałeś, jak cała strona przeładowuje się po kliknięciu "Wyślij" przez użytkownika, już wiesz, jak irytujące może być to doświadczenie. Używając technik wysyłania formularzy HTML z fetch i JavaScript, możesz przesyłać dane formularza do backendu w tle, utrzymać użytkownika na tej samej stronie i wyświetlić czytelny komunikat sukcesu lub błędu bez pełnego odświeżania strony. Ten tutorial przeprowadzi Cię przez każdy krok, od napisania podstawowego HTML-a po skierowanie wywołania fetch() na endpoint Sendform, dzięki czemu Twoje zgłoszenia trafią bezpośrednio do skrzynki odbiorczej lub podłączonego workflow.

Dlaczego używać fetch() zamiast domyślnego wysyłania formularza

Domyślne zachowanie przeglądarki przy wysyłaniu formularza robi dokładnie jedną rzecz: serializuje pola formularza, wysyła żądanie POST (lub GET) na URL określony w action, a następnie ładuje odpowiedź zwróconą przez serwer. To oznacza, że użytkownik widzi białe migotanie, traci pozycję przewijania i czeka na wyrenderowanie nowej strony. Przy wolnym połączeniu może to sprawić wrażenie zepsutego.

Fetch API rozwiązuje to poprzez programowe wykonywanie żądań HTTP, całkowicie w JavaScript, bez nawigowania. To umożliwia wysyłanie formularza bez przeładowania strony, co utrzymuje zaangażowanie użytkowników i pozwala kontrolować każdy aspekt doświadczenia użytkownika, włączając stany ładowania, walidację inline oraz animowane banery sukcesu.

Dodatkowe praktyczne powody, by preferować fetch():

• Możesz dołączać niestandardowe nagłówki (na przykład token CSRF czy klucz autoryzacji), których zwykły formularz HTML nie może wysłać.
• Możesz serializować dane jako JSON, FormData lub stringi zakodowane URL w zależności od tego, czego oczekuje endpoint.
• Obsługa błędów jest jawna. To Ty decydujesz, co oznacza "niepowodzenie" i jak to komunikować.
• Działa na każdej statycznej stronie, włączając te hostowane na GitHub Pages, Netlify czy CDN, ponieważ logika znajduje się całkowicie w przeglądarce.

Podstawowa konfiguracja formularza HTML

Przed napisaniem choćby jednej linijki JavaScript potrzebujesz dobrze ustrukturyzowanego formularza HTML. Kluczowym szczegółem jest to, że nie potrzebujesz atrybutu action wskazującego gdziekolwiek, ponieważ JavaScript obsłuży wysyłanie. Potrzebujesz jednak znaczących atrybutów name przy każdym input - stają się one kluczami pól w wysyłanym payloadzie.

<form id="contact-form" novalidate>
  <div>
    <label for="name">Twoje imię</label>
    <input type="text" id="name" name="name" required placeholder="Jan Kowalski">
  </div>

  <div>
    <label for="email">Adres email</label>
    <input type="email" id="email" name="email" required placeholder="[email protected]">
  </div>

  <div>
    <label for="message">Wiadomość</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <button type="submit">Wyślij wiadomość</button>

  <!-- Obszar informacji zwrotnej -->
  <div id="form-feedback" aria-live="polite"></div>
</form>

Kilka rzeczy wartych uwagi w tym znaczniku:

• novalidate na elemencie formularza wyłącza natywne dymki walidacji przeglądarki, dając Ci pełną kontrolę nad komunikatami błędów w JavaScript.
• Div id="form-feedback" z aria-live="polite" to miejsce, gdzie pojawią się komunikaty sukcesu i błędów. Atrybut ARIA zapewnia, że czytniki ekranu automatycznie ogłoszą informację zwrotną.
• Każdy input ma zarówno id (dla powiązania z label), jak i name (dla payloadu formularza).

Przechwytywanie zdarzenia submit

Pierwszym krokiem w każdym wysyłaniu formularza przez JavaScript jest przechwycenie domyślnego zachowania przeglądarki. Robisz to, nasłuchując zdarzenia submit na elemencie formularza i natychmiast wywołując event.preventDefault().

const form = document.getElementById('contact-form');

form.addEventListener('submit', async function (event) {
  event.preventDefault(); // Zatrzymaj domyślną nawigację strony

  // Podstawowa walidacja po stronie klienta
  const name = form.elements['name'].value.trim();
  const email = form.elements['email'].value.trim();
  const message = form.elements['message'].value.trim();

  if (!name || !email || !message) {
    showFeedback('Proszę wypełnić wszystkie pola.', 'error');
    return;
  }

  // Przejdź do wysyłania danych (następna sekcja)
  await submitForm({ name, email, message });
});

Oddzielając logikę walidacji od wywołania sieciowego, utrzymujesz kod czytelnym i łatwym do rozszerzenia. Słowo kluczowe async w handlerze zdarzenia pozwala używać await wewnątrz niego, co sprawia, że wywołanie Fetch API wygląda synchronicznie i unika głęboko zagnieżdżonych łańcuchów promise.

Kierowanie fetch() na endpoint Sendform

Tu dzieje się prawdziwa praca. Zamiast budować własny serwer do odbierania, przechowywania i przekazywania zgłoszeń formularzy, możesz użyć Sendform jako swojego backendu. Po utworzeniu formularza w panelu Sendform otrzymujesz unikalny URL endpointu. Ten URL to wszystko, czego potrzebujesz.

Poniższa funkcja wysyłania używa FormData API do budowania payloadu, który Sendform akceptuje natywnie:

async function submitForm(data) {
  // Zastąp ten URL swoim rzeczywistym endpointem Sendform
  const SENDFORM_ENDPOINT = 'https://sendform.net/pl/YOUR_FORM_ID';

  const formData = new FormData();
  formData.append('name', data.name);
  formData.append('email', data.email);
  formData.append('message', data.message);

  try {
    const response = await fetch(SENDFORM_ENDPOINT, {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      showFeedback('Dziękujemy! Twoja wiadomość została wysłana.', 'success');
      form.reset();
    } else {
      const errorData = await response.json().catch(() => ({}));
      const errorMsg = errorData.message || 'Coś poszło nie tak. Spróbuj ponownie.';
      showFeedback(errorMsg, 'error');
    }
  } catch (networkError) {
    showFeedback('Błąd sieci. Sprawdź połączenie i spróbuj ponownie.', 'error');
  }
}

Kluczowe decyzje podjęte w tym kodzie:

• Nagłówek Content-Type nie jest ustawiany ręcznie. Gdy przekazujesz obiekt FormData jako body, przeglądarka automatycznie ustawia prawidłową granicę multipart/form-data.
• Sprawdzenie response.ok obejmuje wszystkie kody statusu HTTP 2xx, nie tylko 200. To jest bardziej niezawodne niż porównywanie response.status === 200.
• Zewnętrzny try/catch łapie błędy na poziomie sieci (błędy DNS, stan offline), których response.ok nigdy nie zobaczy.

Obsługa odpowiedzi - komunikaty sukcesu i błędów

Wysłanie danych to tylko połowa pracy. Użytkownicy potrzebują natychmiastowej, jasnej informacji zwrotnej. Funkcja pomocnicza showFeedback() wymieniona powyżej wpisuje komunikat do div-a feedback, który dodałeś do HTML-a:

function showFeedback(message, type) {
  const feedbackEl = document.getElementById('form-feedback');
  feedbackEl.textContent = message;
  feedbackEl.className = type === 'success' ? 'feedback-success' : 'feedback-error';
}

To jest celowo minimalne. W prawdziwym projekcie możesz zamienić textContent na animowany komponent lub bibliotekę powiadomień toast, ale wzorzec pozostaje ten sam: aktualizuj DOM na podstawie wyniku wywołania fetch().

Dla bardziej zaawansowanych scenariuszy, takich jak przekierowanie na niestandardową stronę podziękowania lub uruchomienie automatyzacji po zgłoszeniu, sprawdź nasz artykuł o tym, jak automatyzować workflow formularzy z webhook-ami, Zapier i API.

Najlepsze praktyki i wskazówki

Sprawienie, żeby kod działał to jedno. Wdrożenie go w sposób, który wytrzyma w produkcji to drugie. Oto najważniejsze wskazówki, które warto mieć na uwadze:

• Wyłącz przycisk submit podczas żądania. Ustaw button.disabled = true przed wywołaniem fetch() i włącz ponownie w bloku finally. To zapobiega duplikacji zgłoszeń, jeśli użytkownik kliknie wielokrotnie.
• Pokaż stan ładowania. Zmień tekst przycisku na "Wysyłanie..." lub dodaj klasę spinnera podczas trwania żądania. Użytkownicy, którzy nie widzą informacji zwrotnej, często zakładają, że nic się nie stało i klikają ponownie.
• Waliduj także po stronie serwera. Walidacja po stronie klienta służy doświadczeniu użytkownika. Sendform i każda usługa backendowa powinna traktować wszystkie przychodzące dane jako niezaufane.
• Używaj wszędzie HTTPS. Wysyłanie danych formularza przez zwykły HTTP naraża dane wejściowe użytkownika podczas transmisji. Endpointy Sendform są domyślnie HTTPS, ale upewnij się, że Twoja strona także jest serwowana przez HTTPS.
• Dodaj ochronę przed spamem. Pole honeypot lub integracja CAPTCHA znacząco redukuje śmieciowe zgłoszenia. Aby głębiej poznać ten temat, zobacz nasz przewodnik o najlepszych praktykach ochrony przed spamem w formularzach.
• Testuj celowo ścieżkę błędów. Tymczasowo zmień URL endpointu na coś nieprawidłowego i potwierdź, że pojawia się Twój komunikat błędu. Większość programistów testuje tylko ścieżkę sukcesu.
• Trzymaj URL endpointu poza kontrolą wersji. Jeśli Twój projekt jest open source, przechowuj endpoint Sendform w zmiennej środowiskowej lub pliku konfiguracyjnym, który jest wymieniony w .gitignore.

Podsumowanie

Zastąpienie domyślnego wysyłania formularza wywołaniem fetch() to jedna z najbardziej wpływowych poprawek, jakie możesz wprowadzić do każdego formularza kontaktowego czy przechwytywania leadów. Rezultatem jest szybsze, bardziej profesjonalne doświadczenie, które utrzymuje użytkowników na Twojej stronie i daje Ci pełną kontrolę nad komunikatami zwrotnymi. Połącz to z endpointem Sendform, a całkowicie wyeliminujesz potrzebę jakiegokolwiek kodu po stronie serwera. Twój formularz jest aktywny, Twoje zgłoszenia docierają do skrzynki odbiorczej, a użytkownicy nigdy nie widzą irytującego przeładowania strony. Utwórz swój darmowy endpoint Sendform już dziś i otrzymaj pierwsze zgłoszenie w ciągu minut.

Często zadawane pytania