This free HTML code provides a convenient and user-friendly way to create a hotel booking form on your website. The form includes fields for visitors to input their name, email, phone number, check-in, check-out dates, room preferences, and additional messages. With its easy-to-use layout and attractive design, this booking form allows hotel guests to effortlessly submit their reservation details.
How to Create a Booking Form in HTML
1. First of all, load the Google Fonts by adding the following CDN link into the head tag of your HTML document.
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Nanum+Gothic'>
2. Create the HTML structure for the booking form as follows:
<form class="booking-form" action="#" method="post"> <div class="elem-group"> <label for="name">Your Name</label> <input type="text" id="name" name="visitor_name" placeholder="John Doe" pattern=[A-Z\sa-z]{3,20} required> </div> <div class="elem-group"> <label for="email">Your E-mail</label> <input type="email" id="email" name="visitor_email" placeholder="john.doe@email.com" required> </div> <div class="elem-group"> <label for="phone">Your Phone</label> <input type="tel" id="phone" name="visitor_phone" placeholder="498-348-3872" pattern=(\d{3})-?\s?(\d{3})-?\s?(\d{4}) required> </div> <hr> <div class="elem-group inlined"> <label for="adult">Adults</label> <input type="number" id="adult" name="total_adults" placeholder="2" min="1" required> </div> <div class="elem-group inlined"> <label for="child">Children</label> <input type="number" id="child" name="total_children" placeholder="2" min="0" required> </div> <div class="elem-group inlined"> <label for="checkin-date">Check-in Date</label> <input type="date" id="checkin-date" name="checkin" required> </div> <div class="elem-group inlined"> <label for="checkout-date">Check-out Date</label> <input type="date" id="checkout-date" name="checkout" required> </div> <div class="elem-group"> <label for="room-selection">Select Room Preference</label> <select id="room-selection" name="room_preference" required> <option value="">Choose a Room from the List</option> <option value="connecting">Connecting</option> <option value="adjoining">Adjoining</option> <option value="adjacent">Adjacent</option> </select> </div> <hr> <div class="elem-group"> <label for="message">Anything Else?</label> <textarea id="message" name="visitor_message" placeholder="Tell us anything else that might be important." required></textarea> </div> <button type="submit">Book The Rooms</button> </form>
3. Style the booking form using the following CSS styles. You can modify the CSS rules to customize the form according to your needs.
.booking-form { width: 500px; margin: 0 auto; padding: 50px; background: #fff; } div.elem-group { margin: 20px 0; } div.elem-group.inlined { width: 49%; display: inline-block; float: left; margin-left: 1%; } label { display: block; font-family: 'Nanum Gothic'; padding-bottom: 10px; font-size: 1.25em; } input, select, textarea { border-radius: 2px; border: 2px solid #777; box-sizing: border-box; font-size: 1.25em; font-family: 'Nanum Gothic'; width: 100%; padding: 10px; } div.elem-group.inlined input { width: 95%; display: inline-block; } textarea { height: 250px; } hr { border: 1px dotted #ccc; } button { height: 50px; background: orange; border: none; color: white; font-size: 1.25em; font-family: 'Nanum Gothic'; border-radius: 4px; cursor: pointer; padding: 0 12px; } button:hover { background: #333; }
4. Finally, add the following JavaScript function to your project.
var currentDateTime = new Date(); var year = currentDateTime.getFullYear(); var month = (currentDateTime.getMonth() + 1); var date = (currentDateTime.getDate() + 1); if(date < 10) { date = '0' + date; } if(month < 10) { month = '0' + month; } var dateTomorrow = year + "-" + month + "-" + date; var checkinElem = document.querySelector("#checkin-date"); var checkoutElem = document.querySelector("#checkout-date"); checkinElem.setAttribute("min", dateTomorrow); checkinElem.onchange = function () { checkoutElem.setAttribute("min", this.value); }
That’s all! hopefully, you have successfully created a Booking Form using this free HTML Code. If you have any questions or suggestions, feel free to comment below.