Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Appointment Booking</title>
  <style>
    /* CSS styling for the webpage */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    label {
      display: block;
      margin-top: 10px;
    }
    input[type="text"],
    input[type="email"],
    input[type="datetime-local"],
    textarea {
      width: 100%;
      padding: 5px;
      margin-top: 5px;
    }
    button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Appointment Booking</h1>
  
  <form id="bookingForm">
    <label for="name">Name:</label>
    <input type="text" id="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" required>

    <label for="dateTime">Date and Time:</label>
    <input type="datetime-local" id="dateTime" required>

    <label for="message">Message:</label>
    <textarea id="message"></textarea>

    <button type="submit">Book Appointment</button>
  </form>

  <script>
    // JavaScript code to handle form submission
    document.getElementById('bookingForm').addEventListener('submit', function(e) {
      e.preventDefault(); // Prevent form submission

      // Fetch input values
      var name = document.getElementById('name').value;
      var email = document.getElementById('email').value;
      var dateTime = document.getElementById('dateTime').value;
      var message = document.getElementById('message').value;

      // You can perform additional validation here if needed

      // Display a confirmation message
      alert('Thank you, ' + name + '! Your appointment is booked for ' + dateTime);

      // Clear the form
      document.getElementById('bookingForm').reset();
    });
  </script>
</body>
</html>
Editor is loading...