<html lang="en">
<head>
<title> Booking Form - XYZ Hotels </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="path/to/css/smart-forms.css">
<link rel="stylesheet" href="path/to/css/font-awesome.min.css">
</head>
<body>
<!-- OUR BOOKING FORM MARKUP -->
</body>
</html>
<div class="smart-wrap">
<div class="smart-forms smart-container wrap-2">
<div class="form-header header-primary">
<h4><i class="fa fa-calendar"></i>Make Room Reservations in Minutes</h4>
</div>
<form method="post" action="/" id="contact">
<div class="form-body">
<!-- OUR FORM ELEMENTS WILL GO HERE -->
</div>
<div class="form-footer">
<button type="submit" class="button btn-primary">Confirm Booking</button>
<button type="reset" class="button">Cancel</button>
</div>
</form>
</div>
</div
<div class="section">
<label for="guestname" class="field-label">Please Enter Your Name</label>
<label for="guestname" class="field prepend-icon">
<input type="text" name="guestname" id="guestname" class="gui-input" required="" placeholder="John Doe/Jane Doe">
<span class="field-icon"><i class="fa fa-user"></i></span>
</label>
</div>
<div class="frm-row">
<div class="section colm colm6">
<label for="guestemail" class="field-label">Email Address</label>
<label for="guestemail" class="field prepend-icon">
<input type="email" name="guestemail" id="guestemail" class="gui-input" required="" placeholder="john@something.com">
<span class="field-icon"><i class="fa fa-envelope"></i></span>
</label>
</div>
<div class="section colm colm6">
<label for="guestelephone" class="field-label">Telephone / Mobile</label>
<label for="guestelephone" class="field prepend-icon">
<input type="text" name="guestelephone" id="guestelephone" class="gui-input" required="" placeholder="Telephone / Moble Number">
<span class="field-icon"><i class="fa fa-phone-square"></i></span>
</label>
</div>
</div>
<div class="frm-row">
<div class="section colm colm6">
<label for="adults" class="field-label">Number of Adults</label>
<label for="adults" class="field prepend-icon">
<input type="number" id="adults" name="adults" class="gui-input" required="" placeholder="Number of adults">
<span class="field-icon"><i class="fa fa-users"></i></span>
</label>
</div>
<div class="section colm colm6">
<label for="children" class="field-label">Number of Children</label>
<label for="children" class="field prepend-icon">
<input type="number" id="children" name="children" class="gui-input" required="" placeholder="Number of children">
<span class="field-icon"><i class="fa fa-users"></i></span>
</label>
</div>
</div>
<div class="frm-row">
<div class="section colm colm6">
<label for="checkin" class="field-label">Check-in Date</label>
<label for="checkin" class="field prepend-icon">
<input type="text" id="checkin" name="checkin" class="gui-input" required="" placeholder="mm/dd/yyyy">
<span class="field-icon"><i class="fa fa-calendar"></i></span>
</label>
</div>
<div class="section colm colm6">
<label for="checkout" class="field-label">Check-out Date</label>
<label for="checkout" class="field prepend-icon">
<input type="text" id="checkout" name="checkout" class="gui-input" required="" placeholder="mm/dd/yyyy">
<span class="field-icon"><i class="fa fa-calendar"></i></span>
</label>
</div>
</div>
<div class="spacer-t20 spacer-b30">
<div class="tagline"><span>Please answer these questions for a pleasant stay</span></div>
</div>
<div class="frm-row">
<div class="option-group field">
<div class="section colm colm6">
<label class="switch">
<input type="checkbox" name="switch1" id="switch1" value="switch1">
<span class="switch-label" data-on="YES" data-off="NO"></span>
<span>Will you be bringing a pet?</span>
</label>
</div>
<div class="section colm colm6">
<label class="switch">
<input type="checkbox" name="switch2" id="switch2" value="switch2">
<span class="switch-label" data-on="YES" data-off="NO"></span>
<span>Do you need us to pick you up?</span>
</label>
</div>
</div>
</div>
No comments:
Post a Comment