<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span class="modal-title fs-5" id="exampleModalLabel">New message</span> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="progressContainer" style="display: none; width: 60px; height: 60px; margin: 0 auto;"></div> <form id='reportForm'> <div class="mb-3"> <label class="col-form-label">Name:</label> <input type="text" class="form-control" name="name" id="name" placeholder="Enter your name"> <span style="color: red;" class="error-message nameError"></span> </div> <div class="mb-3"> <label class="col-form-label">Email:</label> <input type="text" class="form-control" id="email" name="email" placeholder="Enter your site email"> <span style="color: red;" class="error-message emailError"></span> </div> <div class="mb-3"> <label class="col-form-label">Phone Number:</label> <input type="text"class="form-control" name="phoneNumber" id="phoneNumber" placeholder="Enter your phone number"> <span style="color: red;" class="error-message phoneError"></span> </div> <div class="mb-3"> <label class="col-form-label">Comment:</label> <textarea name="comment" class="form-control" id="comment" placeholder="Enter a comment"></textarea> <span style="color: red;" class="error-message commentError"></span> </div> <div id="errorMessages" class="alert mb-3" style="display: none;"></div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-success" id="sendReport">Send</button> </div> </div> </div></div>