Formularz do strony z integracjami API
[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.
Załączniki 5
-
277 1 0 https://xpressoil.pro zgodnie z Twoim technicznym zadaniem.
Planuję zrobić:
Modalne okno z tłem glassmorphism, które nie zasłania całej strony;
Wszystkie 4 kroki z potrzebnymi polami i walidacją (typ wymiany, pakiety, autoinformacje, kontakty, adres, data i godzina);
Integracje do wysyłania danych do Telegrama, Google Sheets/Excel;
Podłączenie API Google Maps do automatycznego uzupełniania adresu i API Google Calendar do wyboru dostępnego czasu;
Zapewnienie poprawnej walidacji i responsywności.
Przystępuję do pracy natychmiast.
-
1486 4 0 Dzień dobry.
Obecnie jestem otwarty na współpracę, mam ponad 10 lat doświadczenia w rozwoju
-
692 21 0 Witam. Mogę złożyć zamówienie. Mam doświadczenie. Piszcie, umówimy się.
-
93816 1268 1 10 Witam. Mam duże doświadczenie w tworzeniu stron internetowych. Jestem gotowy do współpracy
-
510 2 0 1 Dzień dobry!
Zapoznałem się z Państwa technicznym zadaniem dotyczącym realizacji 4-krokowej formy rezerwacji dla strony XpressOil — zadanie jest jasne, uporządkowane i całkowicie realistyczne do jakościowej realizacji.
Posiadam doświadczenie w tworzeniu niestandardowych formularzy z wielopoziomową logiką, integracjami z API (Google Maps, Telegram, Google Sheets, kalendarze), a także pracą z responsywnym układem i modalnymi oknami w stylu glassmorphism. Dobrze orientuję się w frontendowym rozwoju (React / Tailwind / Next.js), pewnie pracuję z backendowymi integracjami przez Webhook/N8N.
Co mogę zagwarantować:
- Realizację pełnoprawnej formy krok-po-kroku z dostosowaniem do urządzeń mobilnych
… - Podłączenie Google Maps Autocomplete + dynamiczny kalendarz (z wolnymi slotami)
- Wysyłanie danych do Telegrama, Google Sheets lub Excel według ustalonej struktury
- Tło integracji z API Motor.com (lub przygotowanie pod nią)
- Staranną walidację, elementy UX i spójny design zgodny ze stylem strony
- Czysty kod, możliwość dalszego wsparcia lub rozbudowy
Mogę rozpocząć od razu po uzgodnieniu szczegółów technicznych (klucze API, konto Google do Calendar/Sheets). Termin — do 12 dni roboczych od podpisania umowy. Wynagrodzenie — stałe.
Z poważaniem,
Słidenko Nazarij
-
2245 22 0 Dzień dobry, Andrzeju. Wypełnię formularz rezerwacji na stronie w najlepszym wydaniu. Zrobię wszystko zgodnie z projektem i zapewnię wygodną oraz intuicyjną interakcję z formularzem. Mogę stworzyć małą instrukcję, aby w razie potrzeby mógł ją Pan samodzielnie dostosować.
Zawsze jestem do kontaktu. Zrobię wszystko szybko i jakościowo.
Aktualne zlecenia dla freelancerów w kategorii Programowanie stron internetowych
Sklep internetowy z obuwiemW związku z rozszerzeniem asortymentu oraz zaangażowaniem partnerów w systemie dropshipping poszukujemy specjalisty lub zespołu do stworzenia nowoczesnego sklepu internetowego z obuwiem. WAŻNE: należy stworzyć zautomatyzowany system ewidencji towarów z podłączeniem partnerskich… Sklepy internetowe i e-commerce, Programowanie stron internetowych ∙ 1 godzina 10 minut temu ∙ 42 oferty |
Rozwój platformy AM Mobility (serwis samochodowy, parking, ubezpieczenie, wynajem samochodów)
21 212 PLN
Szukamy zespołu lub doświadczonego programisty Full Stack do stworzenia MVP platformy AM Mobility. AM Mobility to jednolita cyfrowa ekosystem dla kierowców, łącząca w jednej aplikacji i platformie internetowej: parking; serwis samochodowy; wulkanizację; myjnię samochodową;… Javascript & Typescript, Programowanie stron internetowych ∙ 5 godzin 28 minut temu ∙ 71 ofert |
Mini aplikacje Telegram. SklepDzień dobry Wymagane jest stworzenie aplikacji w tg (sklep internetowy) Przykład - w zasadzie 1 do 1 jak tutaj brandspacebot Ważne jest Wasze doświadczenie, stos, na którym proponujecie to zrobić i dlaczego Cena i czas realizacji na początek, będę czekać na pytania Programowanie stron internetowych, Tworzenie chatbota ∙ 9 godzin 52 minuty temu ∙ 67 ofert |
Animacje Gsap
83 PLN
Dzień dobry. Trzeba wprowadzić poprawki w bieżącym projekcie. Potrzebny specjalista, który dobrze pracuje na gsap/lenis Trzeba zrobić animację kart. Szczegółowe wymagania tutaj:… Javascript & Typescript, Programowanie stron internetowych ∙ 11 godzin 14 minut temu ∙ 14 ofert |
Zrób mój сайт
58 PLN
Jest skonfigurowana aplikacja ap my site, trzeba załadować do niej produkty z systemu WooCommerce. Żadne dodatkowe ustawienia nie są potrzebne, interesuje mnie cena i czas realizacji. Programowanie stron internetowych ∙ 1 dzień 4 godziny temu ∙ 23 oferty |