Kalkulatory online pozwalają potencjalnym klientom samodzielnie oszacować koszty, ilość materiałów czy parametry zamówienia – bez konieczności kontaktu z działem handlowym. To oszczędność czasu po obu stronach i lepsze doświadczenie użytkownika.
W tym przewodniku pokażę Ci krok po kroku, jak stworzyć w pełni funkcjonalny kalkulator w WordPressie, używając wtyczki WS Form. Jako przykład zbudujemy kalkulator dla firm produkujących płyty warstwowe – pomoże on obliczyć, ile płyt zmieści się na TIR-a lub ile transportów będzie potrzebnych dla danego zamówienia.
Wolisz format wideo? Na naszym kanale YouTube znajdziesz wersję wideo tego tutoriala!
1. Przygotowanie środowiska
- Zainstaluj i aktywuj wtyczkę WS Form (pełna nazwa: WS Form PRO).
Można ją pobrać z wsform.com lub bezpośrednio w panelu WordPress → Wtyczki → Dodaj nową → WS Form.
- Po instalacji w menu bocznym WordPress pojawi się nowa zakładka WS Form.
2. Utwórz nowy formularz
- Przejdź do WS Form → Add New (Dodaj nowy).
- Wybierz Blank (Pusty) formularz, aby rozpocząć od zera.
- Nadaj nazwę formularzowi, np. Kalkulator TIR-ów.
3. Dodaj pola wprowadzania danych
- Pole liczby (Number Field)
Przeciągnij kafelek “Numer” do pola sekcji
- Kliknij ikonę koła zębatego, aby otworzyć ustawienia
- Nadaj nazwę np. Liczba metrów kwadratów płyt warstwowych i zaznacz: Show Label i Required ✔
- W pole Suffix wpisz: m², a w Help text: „Podaj liczbę metrów kwadratowych nowych płyty w zaokrągleniu do 5 m².”
4. Dodaj pole grubości płyty
Ustaw:
- Label: Grubość płyty
- Suffix: mm
- Help text: „Podaj całkowitą grubość pojedynczej płyty.”
5. Dodaj pole wyboru szerokości płyty
- Przeciągnij Select.
- W zakładce Options ustaw:
Label: Wybierz szerokość płyty
Opcje:
– 1000
– 1100
– 1200
W polu First Row Placeholder wpisz: „Wybierz szerokość płyty.”
6. Dodaj pole długości płyty – Suwak (Range Slider)
- W zakładce Basic ustaw:
– Label: Długość najdłuższej płyty w paczce
– Help text: Długość najdłuższej płyty definiuje długość całej paczki, dodaj minimum 25 mm na styropianowe opakowanie
- W zakładce tick marks ustaw:
Value:
– 500
– 6000
– 12 000
Label:
– MIN
– Standard
– MAX
- W zakładce Advanced ustaw:
Restricion:
– minimum – 500
– maximum – 12 000
Help position – top
7. Dodaj pole text editor – aby poprawić czytelność kalkulatora
- Przeciągnij Text Editor
- W pole tekstowe wpisz: “Najdłuższa paczka ma wymiar” i odwołaj się do Range Slidera wpisując: #text() i kliknij w ikone hasztagu.
- Z listy zmiennych wybierz tą która Cię interesuje – w tym przypadku jest to #filed(80)
- Po kliknięciu w wybraną zmienną pojawi się ona w polu tekstowym.
8. Dodaj pole obliczeniowe – powierzchnia płyt
- Dodaj pole text editor
- W edytorze wpisz “Powierzchnia 1 płyty” i kliknij w ikone kalkulatora, aby otworzyć kalkulator.
- Wpisz #calc i dodaj pole Szerokość płyty i pomnóż je przez pole Długość najdłuższej płyty w paczce
- Zmodyfikuj obliczenia tak, aby wartość końcowa nie była podawana w mm (podziel przez 1000 000)
Efekt końcowy:
9. Dodaj pole obliczeniowe – ilość płyt
- Dodaj kolejne pole obliczeniowe: Liczba płyt
Efekt końcowy:
- Zmień funkcje z calc na floor, aby zaokrąglać wartości w dół.
Efekt końcowy:
10. Dodaj sekcję dla warunków logicznych (Conditional Logic)
Często użytkownicy mają różne potrzeby – jedni znają dokładny metraż i chcą wiedzieć, ile TIR-ów potrzeba. Inni chcą sprawdzić, ile metrów kwadratowych zmieści się na jednym TIR-ze.
Rozwiążemy to za pomocą logiki warunkowej.
- Utwórz sekcję Pytania wstępne
„Czy znam liczbę metrów kwadratowych?”
- Utwórz dwie osobne sekcje
– Liczymy ile TIR-ów potrzeba
– Liczymy ile się zmieści na TIR-a
- Ustaw warunki logiczne w zakładce options dla sekcji pytania wstępne.
– „Znam liczbę metrów kwadratowych”,
– „Chcę policzyć, ile się zmieści na TIR-a”
- Wejdź w zakładką conditional logic
- Wybierz pole które rozpocznie sekwencje warunków logicznych – “Czy znam liczbę metrów kwadratowych”
- Wybierz wiersz zaznaczony + “Znam”
- Następnie w zakładkach THEN i ELSE wybierz kolejno:
dla THEN: SET VISIBILITY
dla ELSE: HIDDEN
- Dodaj drugi warunek – jeżeli chce policzyć ile wejdzie na jednego tira, wtedy ile się zmieści na tira jest widoczna, a jeżeli nie, aby była niewidoczna.
Efekt końcowy:
11. Dodaj akcje po wypełnieniu formularza (Actions)
Mamy działający kalkulator, ale co się stanie po jego wypełnieniu?
W zakładce Actions możesz ustawić:
- Wyświetlenie komunikatu po wysłaniu
– Na przykład: „Dziękujemy! Kalkulacja została wysłana.”
- Wysłanie maila
- Możliwe są również takie akcje jak:
– Webhook / Integracje
Wysyłanie danych do CRM (np. HubSpot, Pipedrive, Salesforce).
Lub do automatyzacji marketingu (GetResponse, MailerLite, Make, Zapier)
– Generowanie PDF-a
12. Testowanie i publikacja
- Kliknij Preview (Podgląd), aby sprawdzić działanie kalkulatora.
- Upewnij się, że wszystkie pola i obliczenia działają poprawnie.
- Kliknij Publish (Opublikuj).
- Wklej shortcode formularza na swoją stronę lub landing page. Numer ID znajdziesz w liście formularzy WS Form.
Podsumowanie
Budowanie kalkulatora w WordPressie za pomocą WS Form to prosty proces, który może znacząco wpłynąć na Twoją sprzedaż B2B. Kluczowe korzyści to:
- Automatyzacja wycen i obliczeń
- Lepsza jakość leadów (użytkownik sam się kwalifikuje)
- Oszczędność czasu działu handlowego
- Lepsza analityka (widzisz, co użytkownicy kalkulują)
- Profesjonalny wizerunek firmy
Jeśli masz pytania lub potrzebujesz pomocy w implementacji kalkulatora dla swojej branży – skontaktuj się z nami! Chętnie pomożemy 🙂
