Форма для сайта с API интеграциями
[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
- Біла форма, закруглені кути, легкий розмитий фон
- Кольори: темно-синій, зелений, білий
- Всі елементи адаптивні під мобільні та десктопи
Коментар:
Клієнт вводить лише базові дані. Вся технічна інформація витягується після відправлення та використовується для внутрішніх цілей.
Приложения 5
-
277 1 0 https://xpressoil.pro згідно з вашим технічним завданням.
Планую зробити:
Модальне вікно з glassmorphism-фоном, що не перекриває весь сайт;
Всі 4 кроки з потрібними полями та валідацією (тип заміни, пакети, автоінформація, контакти, адреса, дата та час);
Інтеграції для відправки даних у Telegram, Google Sheets/Excel;
Підключення Google Maps API для автозаповнення адреси і Google Calendar API для вибору доступного часу;
Забезпечення коректної валідації та адаптивності.
Приступаю до роботи негайно.
-
1486 4 0 Добрый день.
В настоящее время открыт для сотрудничества, имею более 10 лет опыта в разработке
-
693 21 0 Здравствуйте. Могу сделать заказ. Опыт есть. Пишите договоримся.
-
93843 1268 1 10 Привет. Есть большой опыт в разработке сайтов. Готов к сотрудничеству
-
510 2 0 1 Добрый день!
Я ознакомился с вашим техническим заданием по реализации 4-шаговой формы бронирования для сайта XpressOil — задача ясная, структурированная, и вполне реализуемая для качественного выполнения.
У меня есть опыт разработки кастомных форм с многоуровневой логикой, интеграциями с API (Google Maps, Telegram, Google Sheets, календари), а также работы с адаптивной версткой и модальными окнами в стиле glassmorphism. Хорошо ориентируюсь во frontend-разработке (React / Tailwind / Next.js), уверенно работаю с backend-интеграциями через Webhook/N8N.
Что могу гарантировать:
- Реализацию полноценной step-by-step формы с адаптацией под мобильные устройства
… - Подключение Google Maps Autocomplete + динамический календарь (с свободными слотами)
- Отправку данных в Telegram, Google Sheets или Excel по заданной структуре
- Фоновую интеграцию с API Motor.com (или подготовку под нее)
- Аккуратную валидацию, UX-детали и согласованный дизайн в соответствии со стилем сайта
- Чистый код, возможность дальнейшей поддержки или расширения
Могу приступить сразу после согласования технических деталей (API-ключи, Google-аккаунт для Calendar/Sheets). Срок — до 12 рабочих дней под ключ. Оплата — фиксированная.
С уважением,
Слиденко Назарий
-
2245 22 0 Добрый день, Андрей. Выполню форму бронирования на сайт в лучшем виде. Сделаю всё строго по дизайну и реализую удобное и интуитивное взаимодействие с формой. Могу создать небольшую инструкцию, чтобы если что, вы могли самостоятельно её настроить.
Я всегда на связи. Сделаю всё быстро и качественно.
Актуальные фриланс-проекты в категории Python
Найти товарный фид (Google Merchant XML) для сайта на OpenCart
700 UAH
Необходимо найти прямую ссылку на действующий товарный фид (XML) конкурента для Google Merchant Center Платформа (CMS): OpenCart / ocStore Найти оригинальный фидТребования к результату: Рабочая ссылка на XML-файл Python, Парсинг данных ∙ 2 дня 8 часов назад ∙ 22 ставки |
Розработка Тик-Ток фермы (контент-завод)Необзодимо разработать систему для централизованного управления несколькими TikTok-аккаунтами с автоматической публикацией контента, использованием индивидуальных прокси и имитацией естественной активности аккаунтов. Функциональные требования1. Управление аккаунтами Добавление… Python, Разработка ботов ∙ 2 дня 20 часов назад ∙ 19 ставок |
Улучшить работу Claude Code и работа с написанием софтаСейчас разрабатываю СРМ и Аналитику, софт. Делаю через Клод Код, но понимаю что результаты не лучшие в плане изменений. Есть 2 задачи - Нужно помочь сделать пресет по навыкам, мд и так далее чтобы улучшить качество. Взять проверенные с которыми работали, а не с интернета… AI и машинное обучение, Python ∙ 3 дня 2 часа назад ∙ 24 ставки |
Система OCRНужна система распознавания текста на почтовых конвертах (индекс кому - только числа). Текст иногда может быть рукописным. Распознавание марок (подсчет количества и номинала) Python ∙ 3 дня 5 часов назад ∙ 25 ставок |
Создание Human AI Assistant для Telegram-групп### 1.1. Ключевая концепция системы Система должна выполнять две основные функции: #### 1. Анализ клиентской коммуникации AI-ассистент должен автоматически анализировать всю коммуникацию в Telegram-группах и понимать контекст общения. В частности, система должна: -… AI и машинное обучение, Python ∙ 4 дня 17 часов назад ∙ 43 ставки |