[MODULE: xpressoil_booking_form_v1]
Type: Popup window
Purpose: Booking form on the website https://xpressoil.pro
General description:
It is necessary to implement a responsive 4-step service booking form. The form should open as a modal window with a semi-transparent, slightly blurred background (glassmorphism), not covering the entire site. The visual style must strictly match the site https://xpressoil.pro. After submission, all data are transmitted to Telegram and Excel. CRM and SAP integrations are planned at the processing stage after form submission.
Example: https://quick-oilbook.preview.emergentagent.com/
Example 2: Elite Auto Care
🔹 Step 1 — Type of replacement, package selection, and additional services:
- Switch:
• Private replacement
• Commercial replacement
- Choose one of 3 packages:
• Basic
• Standard
• Premium
- Under each package — a brief description of included services
- Additional services block — checkboxes (without price indication):
• Tire rotation
• Brakes
• Rotors
• Battery
• Light bulb
• Air filter – engine
• Air filter – cabin
• Windshield wipers
🔹 Step 2 — Vehicle information:
- VIN (optional)
- Make
- Model
- Year of manufacture (dropdown from 1990 to current)
- Engine type
- Additional field (comment, optional)
- Text at the bottom of the block:
“We use oil and consumables according to your vehicle’s specifications.”
- ⚠️ Integration with API Motor.com and SAP is performed **after form submission**, technical information (oil types, filters, fluids) is fetched **in the background** for internal processing. The client does not see this data.
🔹 Step 3 — Contact information:
- Name (required)
- Surname
- Phone (required, with US format mask and validation)
- Email (optional, with format validation)
- Dropdown: Contact method (Call / Text / Email)
🔹 Step 4 — Address and date:
- Address input with autocomplete via Google Maps API
- Automatic city and ZIP code filling
- Date selection via calendar
- Time selection (intervals of 1 hour from 08:00 to 20:00)
- Integration with Google Calendar API to display only available slots
- Switch: “Call before arrival” (optional)
Data submission:
- After filling out, a message appears: “Thank you! Your request has been received.”
- Data are sent:
• To Telegram via Webhook or N8N
• To Google Sheets / Excel according to the specified structure
• ⚠️ To the server for background processing using Motor.com https://www.motor.com/developer-hub/ (integration after submit, invisible to the client)
- Data includes: request type, package, additional options, vehicle, date/time, address, client contact
Validation:
- Phone: digits only, required, US format
- Email: format validation
- Required fields: name, phone, address, request type, package
Visual style:
- Strictly according to the site https://xpressoil.pro
- White form, rounded corners, light blurred background
- Colors: dark blue, green, white
- All elements are responsive for mobile and desktop
Comment:
The client enters only basic data. All technical information is retrieved after submission and used for internal purposes.
