Book Order Form template

In this article, we will create a Book order form template with the help of html, CSS, and JavaScript. In this, we will learn some basics of this concept and some examples of Book order form templates with the help of some web technology.

What do you mean by the Book order form template?

A book order form is a printed form on which a customer writes the details of a product or service they wish to order. This type of form is mainly used in eCommerce websites for ordering products online. For example, Online Purchasing, Online Room Booking, Online Food orders, etc.

Let's take some examples of Book order form templates.

Example 1:

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<meta charset="UTF-8">  
<title> Book Order Form template Example </title>   
 </head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
body {
  font-family: 'Roboto Condensed', sans-serif;
  color: #262626;
  margin: 5% 0;
}
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1200px)
{
  .container {
    max-width: 1140px;
  }
}
.d-flex {
  display: flex;
  flex-direction: row;
  background: #f6f6f6;
  border-radius: 0 0 5px 5px;
  padding: 25px;
}
form {
  flex: 4;
}
.Yorder {
  flex: 2;
}
.title {
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #5195A8), color-stop(100, #70EAFF));
  background: -moz-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
  background: -ms-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
  background: -o-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
  background: linear-gradient(to bottom right, #5195A8 0%, #70EAFF 100%);
  border-radius: 5px 5px 0 0 ;
  padding: 20px;
  color: #f6f6f6;
}
h2 {
  margin: 0;
  padding-left: 15px; 
}
.required {
  color: red;
}
label {
  display: block;
  margin: 15px;
}
table {
  display: block;
  margin: 15px;
}
label>span {
  float: left;
  width: 25%;
  margin-top: 12px;
  padding-right: 10px;
}
input[type="email"]
{
  width: 70%;
  height: 30px;
  padding: 5px 10px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  color: #888;
}
select
{
  width: 70%;
  height: 30px;
  padding: 5px 10px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  color: #888;
}
input[type="text"] {
  width: 70%;
  height: 30px;
  padding: 5px 10px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  color: #888;
}
input[type="tel"] 
{
  width: 70%;
  height: 30px;
  padding: 5px 10px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  color: #888;
}
select {
  width: 72%;
  height: 45px;
  padding: 5px 10px;
  margin-bottom: 10px;
}
.Yorder {
  margin-top: 15px;
  height: 600px;
  padding: 20px;
  border: 1px solid #dadada;
}
table {
  margin: 0;
  padding: 0;
}
th {
  border-bottom: 1px solid #dadada;
  padding: 10px 0;
}
tr>td:nth-child(1) {
  text-align: left;
  color: #2d2d2a;
}
tr>td:nth-child(2) {
  text-align: right;
  color: #52ad9c;
}
td {
  border-bottom: 1px solid #dadada;
  padding: 25px 25px 25px 0;
}
p {
  display: block;
  color: #888;
  margin: 0;
  padding-left: 25px;
}
.Yorder>div {
  padding: 15px 0; 
}
button {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: none;
  border-radius: 30px;
  background: #52ad9c;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}
button:hover {
  cursor: pointer;
  background: #428a7d;
}
</style>
<body>
<div class="container">
  <div class="title">
      <h2> Book Order Form template Example </h2>
  </div>
<div class="d-flex">
  <form action="" method="">
    <label>
      <span class="fname"> First Name <span class="required"> * </span></span>
      <input type="text" name="fname">
    </label>
    <label>
      <span class="lname"> Last Name <span class="required"> * </span> </span>
      <input type="text" name="lname">
    </label>
    <label>
      <span> Company Name </span>
      <input type="text" name="cn">
    </label>
    <label>
      <span>Country <span class="required">*</span></span>
      <select name="selection">
        <option value="select"> Select a country... </option>
        <option value="AFG">Afghanistan</option>
        <option value="ALA">?land Islands</option>
        <option value="ALB">Albania</option>
        <option value="DZA">Algeria</option>
        <option value="ASM">American Samoa</option>
        <option value="AND">Andorra</option>
        <option value="BOL">Bolivia</option>
        <option value="BES">Bonaire</option>
        <option value="BIH">Bosnia</option>
        <option value="BWA">Botswana</option>
        <option value="BVT">Bouvet Island</option>
        <option value="BRA">Brazil</option>
        <option value="CUB">Cuba</option>
        <option value="CUW">Cura?ao</option>
        <option value="CYP">Cyprus</option>
        <option value="CZE">Czech Republic</option>
        <option value="EST">Estonia</option>
        <option value="ETH">Ethiopia</option>
        <option value="FLK">Falkland Islands (Malvinas)</option>
        <option value="LTU">Lithuania</option>
        <option value="LUX">Luxembourg</option>
        <option value="MAC">Macao</option>
        <option value="MKD">Macedonia, the former Yugoslav Republic of</option>
        <option value="MDG">Madagascar</option>
        <option value="MCO">Monaco</option>
        <option value="MNG">Mongolia</option>
        <option value="MNE">Montenegro</option>
        <option value="MSR">Montserrat</option>
        <option value="MAR">Morocco</option>
        <option value="NPL">Nepal</option>
        <option value="BLM">Saint Barth?lemy</option>
        <option value="SHN">Saint Helena, Ascension and Tristan da Cunha</option>
        <option value="KNA">Saint Kitts and Nevis</option>
        <option value="LCA">Saint Lucia</option>
        <option value="MAF">Saint Martin (French part)</option>
        <option value="SPM">Saint Pierre and Miquelon</option>
        <option value="VCT">Saint Vincent and the Grenadines</option>
        <option value="VNM">Viet Nam</option>
        <option value="VGB">Virgin Islands, British</option>
        <option value="VIR">Virgin Islands, U.S.</option>
        <option value="WLF">Wallis and Futuna</option>
        <option value="ESH">Western Sahara</option>
        <option value="YEM">Yemen</option>
        <option value="ZMB">Zambia</option>
        <option value="ZWE">Zimbabwe</option>
      </select>
    </label>
    <label>
      <span> Address <span class="required"> * </span></span>
      <input type="text" name="houseadd" placeholder="House number and street name" required>
    </label>
    <label>
      <span>�</span>
      <input type="text" name="apartment" placeholder="Apartment, suite, unit etc. (optional)">
    </label>
    <label>
      <span> Town / City <span class="required">*</span></span>
      <input type="text" name="city"> 
    </label>
    <label>
      <span> State / County <span class="required">*</span></span>
      <input type="text" name="city"> 
    </label>
    <label>
      <span> Postcode / ZIP <span class="required">*</span></span>
      <input type="text" name="city"> 
    </label>
    <label>
      <span> Phone Number <span class="required">*</span></span>
      <input type="tel" name="city"> 
    </label>
    <label>
      <span> Email Address <span class="required">*</span></span>
      <input type="email" name="city"> 
    </label>
  </form>
  <div class="Yorder">
    <table>
      <tr>
        <th colspan="2"> Your order </th>
      </tr>
      <tr>
        <td> Product Name x 2(Qty) </td>
        <td> $8.00 </td>
      </tr>
      <tr>
        <td> Subtotal </td>
        <td> $8.00 </td>
      </tr>
      <tr>
        <td> Shipping </td>
        <td> Free shipping </td>
      </tr>
    </table><br>
    <div>
      <input type="radio" name="dbt" value="dbt" checked> Direct Bank Transfer
    </div>
    <p>
        Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order will not be shipped until the funds have cleared in our account.
    </p>
    <div>
      <input type="radio" name="dbt" value="cd"> Cash on Delivery
    </div>
    <div>
      <input type="radio" name="dbt" value="cd"> Paypal <span>
      </span>
    </div>
    <button type="button"> Place Order </button>
  </div>
 </div>
</div>
</body>
</html>

Explanation:

In the above example, we have created an order product form. When the user orders a product online, then their required information is stored in this form and after that the product is booked.

Output:

Following figure shows the output of this example:

Example 2:

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<meta charset="UTF-8">  
<title> Online Room Book Form template Example </title>   
 </head>
<style>
body {
  width: 500px;
  margin: 0 auto;
  padding: 50px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
div.elem-group {
  margin: 10px 0;
}
div.elem-group.inlined {
  width: 49%;
  display: inline-block;
  float: left;
  margin-left: 1%;
}
label {
  display: block;
  font-family: 'Nanum Gothic';
  padding-bottom: 8px;
  font-size: 1em;
}
input {
  border-radius: 2px;
  border: 2px solid #777;
  box-sizing: border-box;
  font-size: 1em;
  font-family: 'Nanum Gothic';
  width: 100%;
  padding: 10px;
}
select {
  border-radius: 2px;
  border: 2px solid #777;
  box-sizing: border-box;
  font-size: 1.25em;
  font-family: 'Nanum Gothic';
  width: 100%;
  padding: 8px;
}
textarea {
  border-radius: 2px;
  border: 2px solid #777;
  box-sizing: border-box;
  font-size: 1em;
  font-family: 'Nanum Gothic';
  width: 100%;
  padding: 8px;
}
div.elem-group.inlined input {
  width: 95%;
  display: inline-block;
}
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
textarea {
  height: 250px;
}
h2 {
 font-style: italic;
font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
font-size: 1.75em;
font-weight: bold;
  }
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;
}
button:hover {
  border: 2px solid black;
}
</style>
<body>
 <h2> Online Room Book Form template Example </h2> 
<form action="#" method="post">
  <div class="elem-group">
    <label for="name"> Enter Your Name </label>
    <input type="text" id="name" name="visitor_name" placeholder="Rama Dev" pattern= [A-Z\sa-z]{3,20} required>
  </div>
  <div class="elem-group">
    <label for="email"> Enter Your E-mail </label>
    <input type="email" id="email" name="visitor_email" placeholder="RamaDev@email.com" required>
  </div>
  <div class="elem-group">
    <label for="phone"> Enter Your Phone Number </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"> Message </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>
<script>
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);
}
</script>
</body>
</html>

Explanation:

In the above example, we have created an online room book form template. In this, the user selects a room according to their preference, and the required information is stored in this form, and after that, the room is booked.

Output:

The following figure shows the output of this example: