Jak zoptymalizować formularz zamówienia w sklepie?

Formularz zamówienia jest miejscem, w którym klient przestaje tylko przeglądać ofertę i musi wykonać pracę. Nadmiar pól, wymuszona rejestracja oraz komunikat „sprawdź formularz” bez wskazania błędu wystarczą, aby zamknąć kartę. Optymalizacja polega na skróceniu formularza do niezbędnych danych, walidacji inline i automatyzacji danych firmowych przez API GUS.

Dlaczego formularz zatrzymuje zakup?

Checkout obejmuje cały proces finalizacji zamówienia – od koszyka, przez wybór dostawy i płatności, aż po potwierdzenie. Formularz zamówienia jest tylko jego częścią, ale to właśnie tutaj klient musi wpisywać dane, poprawiać błędy i podejmować decyzje dotyczące faktury czy adresu.

Największe tarcie powstaje wtedy, gdy użytkownik nie wie, ile pól musi jeszcze uzupełnić, formularz wymaga danych niepotrzebnych do realizacji zamówienia albo błąd pojawia się dopiero po kliknięciu przycisku kończącego zakup. Problemem bywa też wymuszona rejestracja. Właściciel sklepu ma nad tym obszarem bezpośrednią kontrolę, dlatego poprawę często można wdrożyć bez zmiany cen, oferty czy logistyki.

Jak ograniczyć liczbę pól?

Dla typowego sklepu B2C formularz powinien mieścić się zwykle w granicach 7–9 pól. Ostateczna liczba zależy od rodzaju dostawy, sprzedaży B2B i wymagań księgowych, ale dane należy zbierać tylko wtedy, gdy mają konkretne zastosowanie.

Nie pokazuj pól firmowych każdemu klientowi. Sekcja „Faktura na firmę” może być ukryta za checkboxem lub przełącznikiem. Jeżeli klient jej nie zaznaczy, formularz pozostaje krótki. Gdy faktura jest potrzebna, trzeba zebrać wymagane dane nabywcy, w tym NIP. To rozróżnienie jest ważne – prawo może wymagać danych do faktury, ale nie wymaga wyświetlania ich wszystkim osobom od początku.

Najczęściej można usunąć albo warunkowo ukryć następujące elementy:

• Adres 2 – w większości zamówień nie jest potrzebny, dlatego może zostać polem opcjonalnym lub zniknąć całkowicie.
• Firma – pokazuj ją dopiero po wybraniu faktury na firmę.
• Uwagi do zamówienia – nie powinny być obowiązkowe, a w prostym procesie można je ukryć.
• Hasło i rejestracja – zakup jako gość powinien być dostępny bez tworzenia konta.
• Powtórzenie adresu – drugi adres pokazuj tylko wtedy, gdy klient zaznaczy inną wysyłkę niż adres rozliczeniowy.

Checkout jednostronicowy ogranicza liczbę przejść między ekranami i zwykle dobrze pasuje do prostych zakupów B2C. Wieloetapowy układ ma sens przy złożonej dostawie, wielu magazynach lub rozbudowanych regułach logistycznych. Sam podział na kroki nie naprawi jednak nadmiarowych pól. Najpierw skróć formularz, a dopiero potem oceniaj, czy potrzebujesz kilku ekranów.

Jak wdrożyć zmiany w WooCommerce i PrestaShop?

Obie platformy pozwalają modyfikować formularz bez edycji plików core, ale wykorzystują inne mechanizmy. WooCommerce opiera się głównie na hookach WordPressa i JavaScripcie. PrestaShop korzysta z modułów, formularzy Symfony oraz szablonów Twig.

Walidacja inline w WooCommerce

Domyślna walidacja WooCommerce uruchamia się przy wysłaniu formularza. Możesz uzupełnić ją o informację wyświetlaną natychmiast po opuszczeniu pola. Zdarzenie blur sprawdza konkretny input, a klasy WooCommerce oznaczają wiersz jako poprawny lub błędny.

jQuery(function ($) {
    const $form = $('form.checkout');

    $form.on('blur', 'input[required], select[required]', function () {
        const $field = $(this).closest('.form-row');
        const value = ($(this).val() || '').trim();

        $field.removeClass(
            'woocommerce-invalid ' +
            'woocommerce-invalid-required-field ' +
            'woocommerce-validated'
        );

        if (!value) {
            $field.addClass(
                'woocommerce-invalid ' +
                'woocommerce-invalid-required-field'
            );
        } else {
            $field.addClass('woocommerce-validated');
        }
    });
});

Skrypt nie zastępuje walidacji po stronie serwera. Jego zadaniem jest szybsze wskazanie problemu. Dodaj go w motywie potomnym i ładuj tylko na stronie checkoutu:

add_action('wp_enqueue_scripts', function () {
    if (is_checkout()) {
        wp_enqueue_script(
            'checkout-inline-validation',
            get_stylesheet_directory_uri() .
            '/assets/js/checkout-inline-validation.js',
            array('jquery'),
            '1.0',
            true
        );
    }
});

Komunikat przy polu powinien opisywać konkretny problem, na przykład „Podaj kod pocztowy w formacie 00-000”. Samo „Wystąpił błąd” zmusza klienta do szukania przyczyny w całym formularzu.

Automatyczne dane firmy z API GUS

W przypadku klienta B2B pole NIP może uruchamiać przycisk „Uzupełnij dane firmy”. Po poprawnym numerze system pobiera nazwę i adres z właściwego źródła danych, a następnie wpisuje je do formularza. Skraca to proces i ogranicza literówki na fakturze.

Przykładowy endpoint WordPressa pokazuje schemat rozwiązania. Adres usługi i sposób autoryzacji trzeba dostosować do aktualnej dokumentacji wybranego rejestru. Nie wywołuj zewnętrznego API bezpośrednio z przeglądarki, jeżeli wymaga ono klucza.

add_action('wp_ajax_fetch_company_by_nip', 'fetch_company_by_nip');
add_action('wp_ajax_nopriv_fetch_company_by_nip', 'fetch_company_by_nip');

function fetch_company_by_nip() {
    $nip = preg_replace('/\D+/', '', $_POST['nip'] ?? '');

    if (!preg_match('/^\d{10}$/', $nip)) {
        wp_send_json_error('Nieprawidłowy NIP');
    }

    $date = current_time('Y-m-d');
    $url = 'https://wl-api.mf.gov.pl/api/search/nip/' .
        rawurlencode($nip) . '?date=' . rawurlencode($date);

    $response = wp_remote_get($url, array(
        'timeout' => 8,
    ));

    if (is_wp_error($response)) {
        wp_send_json_error('Nie udało się pobrać danych firmy');
    }

    $body = json_decode(
        wp_remote_retrieve_body($response),
        true
    );

    $company = $body['result']['subject'] ?? null;

    if (!$company) {
        wp_send_json_error('Nie znaleziono firmy');
    }

    wp_send_json_success($company);
}

Po stronie klienta potrzebujesz obsługi kliknięcia przycisku, wysłania żądania AJAX oraz mapowania odpowiedzi na pola firmy i adresu. Zadbaj o komunikat ładowania, obsługę braku wyniku i możliwość ręcznej korekty danych. Dane pobrane z rejestru nie powinny blokować złożenia zamówienia, jeśli klient ma uzasadniony powód, aby wpisać je samodzielnie.

Usuwanie pól w PrestaShop

W PrestaShop nie edytuj bezpośrednio kontrolera ani plików rdzenia. Utwórz moduł i zmodyfikuj builder formularza za pomocą dostępnego hooka. Przykładowy kod usuwa pole address2 po utworzeniu formularza:

use Symfony\Component\Form\FormBuilderInterface;

public function hookActionObjectAddressFormBuilderModifierAfterCreation($params)
{
    /** @var FormBuilderInterface $formBuilder */
    $formBuilder = $params['form_builder'];

    if ($formBuilder->has('address2')) {
        $formBuilder->remove('address2');
    }
}

W zależności od wersji PrestaShop i konkretnego formularza nazwa hooka lub pola może się różnić, dlatego sprawdź definicję używanego buildera w danej instalacji. Format adresu jest powiązany także z konfiguracją kraju i klasą AddressFormat. Walidację oraz komunikaty zmieniaj przez moduł i system tłumaczeń, nie przez modyfikację core.

Jak przeprowadzić 15-minutowy audyt?

Krótki audyt powinien odtworzyć zachowanie zwykłego klienta, a nie administratora zalogowanego do sklepu. Wykonaj go w trybie incognito na telefonie i komputerze:

1. Dodaj produkt do koszyka i rozpocznij zakup jako gość, sprawdzając, czy rejestracja nie jest wymagana.
2. Policz pola widoczne przed wyborem faktury i zaznacz te, które nie są potrzebne do dostawy lub kontaktu.
3. Opuść wymagane pola bez wpisywania danych i sprawdź, czy błąd pojawia się przy konkretnym polu.
4. Wpisz błędny e-mail, kod pocztowy i NIP, a następnie oceń, czy komunikaty wyjaśniają sposób poprawy.
5. Odśwież stronę po zmianie dostawy i sprawdź, czy dane nie znikają oraz czy klient nie musi wpisywać ich ponownie.
6. Przejdź zakup na telefonie, zwracając uwagę na klawiaturę, przewijanie i widoczność przycisku kończącego zamówienie.

Jeśli formularz ma wiele pól, błędy pojawiają się dopiero po wysłaniu, a zakup bez rejestracji jest ukryty, zacznij od tych trzech zmian. Problemy z dostawą, płatnością lub przeliczaniem stawek wymagają osobnego audytu logiki checkoutu.

Lista wdrożeniowa

Przed publikacją zmian sprawdź poniższe elementy:

• Usuń – pola „Adres 2”, obowiązkowe uwagi i domyślnie widoczne dane firmy.
• Włącz – zakup jako gość oraz warunkowe wyświetlanie sekcji faktury.
• Dodaj – walidację inline dla wymaganych pól i konkretny komunikat przy każdym błędzie.
• Zautomatyzuj – pobieranie danych firmy po NIP z obsługą błędnego lub nieznalezionego numeru.
• Przetestuj – poprawny zakup, błędne dane, telefon, różne metody dostawy i fakturę firmową.
• Monitoruj – przejścia między checkoutem a potwierdzeniem zamówienia przed i po wdrożeniu.

Wymogi dotyczące danych na fakturze i obsługi danych osobowych zależą od sytuacji prawnej oraz modelu sprzedaży. Przed wdrożeniem zmian skonsultuj rozwiązanie z księgowym lub prawnikiem, jeśli sklep obsługuje złożoną sprzedaż B2B.