[MODULE: xpressoil_booking_form_v1]
Typ: Popup
Zastosowanie: Formularz rezerwacji na stronie https://xpressoil.pro
Ogólny opis:
Należy zaimplementować responsywny, 4-etapowy formularz rezerwacji usługi. Formularz powinien otwierać się jako modalne okno z półprzezroczystym, lekko rozmytym tłem (glassmorphism), nie zakrywającym całej strony. Styl wizualny ściśle odpowiada stronie https://xpressoil.pro. Po wysłaniu wszystkie dane są przesyłane do Telegrama i Excel. Integracje z CRM i SAP są planowane na etapie przetwarzania po wysłaniu formularza.
Przykład: https://quick-oilbook.preview.emergentagent.com/
Przykład 2: Elite Auto Care
🔹 Krok 1 — Typ wymiany, wybór pakietu i usług dodatkowych:
- Przełącznik:
• Prywatna wymiana
• Komercyjna wymiana
- Wybór jednego z 3 pakietów:
• Basic
• Standard
• Premium
- Pod każdym pakietem — krótki opis usług wchodzących w skład
- Sekcja usług dodatkowych — pola wyboru (bez podawania ceny):
• Rotacja opon
• Hamulce
• Tarcze
• Akumulator
• Żarówka
• Filtr powietrza – silnik
• Filtr powietrza – kabina
• Wycieraczki
🔹 Krok 2 — Informacje o samochodzie:
- VIN (opcjonalnie)
- Marka
- Model
- Rok produkcji (lista rozwijana od 1990 do obecnego roku)
- Typ silnika
- Dodatkowe pole (komentarz, opcjonalnie)
- Tekst na dole sekcji:
“Używamy oleju i materiałów eksploatacyjnych zgodnie ze specyfikacją Twojego pojazdu.”
- ⚠️ Integracja z API Motor.com oraz SAP odbywa się **po wysłaniu formularza**, dane techniczne (rodzaje olejów, filtrów, płynów) są pobierane **w tle** do celów wewnętrznych. Klient nie widzi tych danych.
🔹 Krok 3 — Informacje kontaktowe:
- Imię (wymagane)
- Nazwisko
- Telefon (wymagany, z maską formatu US i walidacją)
- Email (opcjonalnie, z weryfikacją formatu)
- Dropdown: Sposób kontaktu (Call / Text / Email)
🔹 Krok 4 — Adres i data:
- Wprowadzenie adresu z autouzupełnianiem przez Google Maps API
- Automatyczne podanie miasta i ZIP
- Wybór daty przez kalendarz
- Wybór godziny (interwały co 1 godzinę od 08:00 do 20:00)
- Integracja z Google Calendar API w celu wyświetlenia tylko dostępnych terminów
- Przełącznik: “Zadzwonić przed przyjazdem” (opcjonalnie)
🔹 Wysyłanie danych:
- Po wypełnieniu wyświetla się komunikat: “Dziękujemy! Twoje zgłoszenie zostało przyjęte do przetwarzania.”
- Dane są wysyłane:
• Do Telegrama przez Webhook lub N8N
• Do arkusza Google Sheets / Excel według ustalonej struktury
• ⚠️ Na serwer do przetwarzania w tle z użyciem Motor.com https://www.motor.com/developer-hub/ (integracja po wysłaniu, niewidoczna dla klienta)
- Dane obejmują: typ zgłoszenia, pakiet, opcje dodatkowe, auto, data/godzina, adres, dane kontaktowe klienta
🔹 Walidacja:
- Telefon: tylko cyfry, pole obowiązkowe, format US
- Email: sprawdzanie formatu
- Pola obowiązkowe: imię, telefon, adres, typ zgłoszenia, pakiet
🔹 Styl wizualny:
- Ściśle zgodnie ze stroną https://xpressoil.pro
- Biały formularz, zaokrąglone rogi, lekko rozmyte tło
- Kolory: ciemnoniebieski, zielony, biały
- Wszystkie elementy responsywne na urządzenia mobilne i komputery
Uwagi:
Klient wprowadza tylko podstawowe dane. Cała techniczna informacja jest pobierana po wysłaniu i wykorzystywana do celów wewnętrznych.