[MODULE: xpressoil_booking_form_v1]
Тип: Вспливаюче вікно (popup)
Призначення: Форма бронювання на сайті https://xpressoil.pro
Загальний опис:
Необхідно реалізувати адаптивну 4-крокову форму бронювання послуги. Форма повинна відкриватися як модальне вікно з напівпрозорим, злегка розмитим фоном (glassmorphism), не перекриваючи сайт повністю. Візуальний стиль строго відповідає сайту https://xpressoil.pro. Після відправки всі дані передаються в Telegram і Excel. CRM та SAP-інтеграції передбачені на етапі обробки після надсилання форми.
Приклад: https://quick-oilbook.preview.emergentagent.com/
Приклад 2: Elite Auto Care
🔹 Крок 1 — Тип заміни, вибір пакета та додаткових послуг:
- Перемикач:
• Приватна заміна
• Комерційна заміна
- Вибір одного з 3 пакетів:
• Basic
• Standard
• Premium
- Під кожним пакетом — короткий опис послуг, що входять
- Блок додаткових послуг — чекбокси (без зазначення ціни):
• Tire rotation
• Brakes
• Rotors
• Battery
• Light bulb
• Air filter – engine
• Air filter – cabin
• Windshield wipers
🔹 Крок 2 — Інформація про автомобіль:
- VIN (необов’язково)
- Марка
- Модель
- Рік випуску (випадаючий список від 1990 до поточного)
- Тип двигуна
- Додаткове поле (коментар, не обов’язково)
- Внизу блоку текст:
“Ми використовуємо масло та витратні матеріали відповідно до специфікацій вашого автомобіля.”
- ⚠️ Інтеграція з API Motor.com та SAP здійснюється **після відправки форми**, технічна інформація (типи олив, фільтрів, рідин) підтягується **у фоновому режимі** для внутрішньої обробки. Клієнт ці дані не бачить.
🔹 Крок 3 — Контактна інформація:
- Ім’я (обов’язкове)
- Прізвище
- Телефон (обов’язкове, з маскою формату US та валідацією)
- Email (необов’язково, з перевіркою формату)
- Dropdown: Спосіб зв’язку (Call / Text / Email)
🔹 Крок 4 — Адреса та дата:
- Введення адреси з автозаповненням через Google Maps API
- Автоматичне підставлення міста та ZIP
- Вибір дати через календар
- Вибір часу (інтервали по 1 годині з 08:00 до 20:00)
- Інтеграція з Google Calendar API для відображення лише вільних інтервалів
- Перемикач: “Подзвонити перед приїздом” (опціонально)
🔹 Відправлення даних:
- Після заповнення відображається повідомлення: “Дякуємо! Ваша заявка прийнята в обробку.”
- Дані надсилаються:
• У Telegram через Webhook або N8N
• У таблицю Google Sheets / Excel за заданою структурою
• ⚠️ На сервер для фонової обробки з використанням Motor.com https://www.motor.com/developer-hub/ (інтеграція після сабміту, невидима для клієнта)
- Дані включають: тип заявки, пакет, додаткові опції, авто, дата/час, адреса, контакт клієнта
🔹 Валідація:
- Телефон: лише цифри, обов’язкове поле, формат US
- Email: перевірка формату
- Обов’язкові поля: ім’я, телефон, адреса, тип заявки, пакет
🔹 Візуальний стиль:
- Строго згідно з сайтом https://xpressoil.pro
- Біла форма, закруглені кути, легкий розмитий фон
- Кольори: темно-синій, зелений, білий
- Всі елементи адаптивні під мобільні та десктопи
Коментар:
Клієнт вводить лише базові дані. Вся технічна інформація витягується після відправлення та використовується для внутрішніх цілей.
