let currentStep = 1; let formData = { departure: '', destination: '', departureDate: '', returnDate: '', adults: 0, children: 0, selectedOutboundFlight: null, selectedBaggageOption: null, }; let flightOptions = [ { id: 1, departure: 'NYC', destination: 'London', price: 500 }, { id: 2, departure: 'NYC', destination: 'London', price: 600 }, { id: 3, departure: 'NYC', destination: 'London', price: 700 }, ]; let baggageOptions = [ { id: 1, name: 'Standard Baggage', price: 50 }, { id: 2, name: 'Extra Baggage', price: 75 }, { id: 3, name: 'Premium Baggage', price: 100 }, ]; function showStep(step) { const steps = document.querySelectorAll('.step'); steps.forEach(s => s.classList.remove('active')); document.getElementById(`step-${step}`).classList.add('active'); } function nextStep(step) { if (step === 1) { formData.departure = document.getElementById('departure').value; formData.destination = document.getElementById('destination').value; formData.departureDate = document.getElementById('departure-date').value; formData.returnDate = document.getElementById('return-date').value; formData.adults = parseInt(document.getElementById('adults').value); formData.children = parseInt(document.getElementById('children').value); } if (step === 2) { const flightOptionId = document.querySelector('input[name="flight"]:checked').value; formData.selectedOutboundFlight = flightOptions.find(flight => flight.id == flightOptionId); } if (step === 3) { const baggageOptionId = document.querySelector('input[name="baggage"]:checked').value; formData.selectedBaggageOption = baggageOptions.find(baggage => baggage.id == baggageOptionId); } currentStep++; updateSummary(); showStep(currentStep); } function prevStep(step) { currentStep--; showStep(currentStep); } function updateSummary() { if (currentStep === 4) { let summary = `

Departure: ${formData.departure}

Destination: ${formData.destination}

Departure Date: ${formData.departureDate}

Return Date: ${formData.returnDate}

Adults: ${formData.adults}

Children: ${formData.children}

Outbound Flight: ${formData.selectedOutboundFlight.departure} to ${formData.selectedOutboundFlight.destination} - $${formData.selectedOutboundFlight.price}

Baggage: ${formData.selectedBaggageOption.name} - $${formData.selectedBaggageOption.price}

`; document.getElementById('booking-summary').innerHTML = summary; // Calculate total price const totalPrice = (formData.selectedOutboundFlight.price + formData.selectedBaggageOption.price) * (formData.adults + formData.children); document.getElementById('total-price').innerText = `$${totalPrice}`; } } function displayFlightOptions() { const flightOptionsDiv = document.getElementById('flight-options'); flightOptionsDiv.innerHTML = ''; flightOptions.forEach(flight => { flightOptionsDiv.innerHTML += ` ${flight.departure} to ${flight.destination} - $${flight.price}
`; }); } function displayBaggageOptions() { const baggageOptionsDiv = document.getElementById('baggage-options'); baggageOptionsDiv.innerHTML = ''; baggageOptions.forEach(baggage => { baggageOptionsDiv.innerHTML += ` ${baggage.name} - $${baggage.price}
`; }); } // Initialize flight options and baggage options for the first time displayFlightOptions(); displayBaggageOptions();

Learner Support

Simple Booking Form

statue of man holding book near brown concrete building during daytime

Understanding the Booking Form

A booking form is a crucial tool for gathering information from individuals looking to reserve a service or product. It typically contains several fields designed to collect vital details. Each field serves a specific purpose and must be completed accurately for successful processing.

Key Fields of a Booking Form

Common fields in a booking form include name, email, contact number, and date of booking. When inputting your name, ensure it reflects your official identification. The email field is particularly important; it should contain a valid email address for confirmation purposes. A valid email generally follows the format of username@domain.com. For the contact number, double-check the country code and format to avoid any communication issues.

Tips for Filling Out the Form

To complete the form correctly, take your time and read each instruction carefully. Here are a few techniques that can assist you: First, use a valid email address where you regularly check for updates. Second, ensure your contact number is formatted consistently, including any necessary area codes. Finally, pay attention to optional fields—while not mandatory, they can help customize your booking experience. Always review your inputs before submission to minimize errors.

Practice Appointment Booking Form

Booking Form

Book Your Appointment

Full Name *

Email Address *

Phone Number *

Service Type *

Preferred Date *

Preferred Time *

Additional Notes

IMPORTANT – this is not a real booking website. This is for practice only

You did it. Booking Confirmed!

Thank you for your booking. A confirmation email has been sent to the following address

Name:

Email:

Service:

Date:

Time:

Processing your booking…