Loading ...

es 7

// App.js import React, { useState } from “react”; import ‘./App.css’; function App() { const [step, setStep] = useState(1); const [progress, setProgress] = useState(12.5); const [formData, setFormData] = useState({ deviceType: “”, brand: “”, category: “”, model: “”, service: “”, deliveryMethod: “”, store: “”, firstName: “”, lastName: “”, email: “”, phone: “”, serialIMEI: “”, notes: “”, appointmentTime: “”, }); const handleNext = () => { if (step < 8) { setStep(step + 1); setProgress(progress + 12.5); } }; const handleBack = () => { if (step > 1) { setStep(step – 1); setProgress(progress – 12.5); } }; const handleChange = (e) => { setFormData({ …formData, [e.target.name]: e.target.value, }); }; const handleSubmit = (e) => { e.preventDefault(); alert(“Booking submitted successfully!”); console.log(formData); }; return (

Repair Booking Form

{step === 1 && (

Step 1: Select the Device

)} {step === 2 && (

Step 2: Select the Brand

)} {step === 3 && (

Step 3: Select the Category

)} {step === 4 && (

Step 4: Select the Model

)} {step === 5 && (

Step 5: Select the Service

)} {step === 6 && (

Step 6: Delivery Method

)} {step === 7 && (

Step 7: Choose a Store

)} {step === 8 && (

Step 8: Customer Information

)}
); } export default App;

Newsletter signup

    Book an Engineer

    Collection Day

    Computer / Laptop

    Brand

    Operating System

    First name

    Last name

    Email address

    Contact phone number

    Address

    City

    Special requests

    Make an Appointment