Booking Form

Booking Form

by Solodev CMS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div>
<!-- Static navbar -->
<nav class="navbar navbar-default">
   <div class="container-fluid">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
         <span class="sr-only">Toggle navigation</span>
         <span>Book Now!</span>
         </button>
         <a class="navbar-brand" href="/">
         <img src="https://www.solodev.com/assets/email/logo.png" alt="Logo Solodev">
         </a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
         <form class="form book-now-form" role="form" id="widget_booking_form" name="widget_booking_form" >
            <input id="campaign" type="hidden" value="visitflagler_topNavWidget" name="campaign"> <input id="clone_id" type="hidden" value="278" name="clone_id">
            <div class="form-group">
               <label for="lodging">Book Your Stay</label> 
               <select class="form-control" id="lodgingID" name="lodgingID" placeholder="All Lodging">
                  <option value="103" selected="selected">
                     All Options
                  </option>
                  <option value="50">
                     Flights
                  </option>
                  <option value="9">
                     Hotels
                  </option>
                  <option value="21">
                    ...

CSS

label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: 700;
}
.form-control {
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.book-now-form {
  padding-top: 10px;  
}
.book-now-form .form-group {
    margin-right: 1.5em;
}
.book-now-form label {
    font-size: 13px;
    display: block;
    color: #fff;
    padding-top: 5px;
}
.book-now-form .form-control {
    height: 25px;
    line-height: 25px;
    background: white;
    display: block;
    font-size: 12px;
    color: #969696;
    padding: 4px 6px;
}
.book-now-form #start-date, .book-now-form #end-date {
    padding-right: 22px;
    background: url(https://www.solodev.com/assets/booking-form/icon_calendar.png) no-repeat scroll 98% center rgb(255, 255, 255);
}
@media (min-width: 992px) {
  .book-now-form label {
    float: left;
    margin-right: 1em;
    padding-top: 2px;
    display: block;
  }
}
@media (min-width: 768px) {
  .book-now-form .form-group {
    margin-bottom: 0;
    float: left;
    margin-right: 1em;
  }	
  .book-now-form label {
    float: left;
    margin-right: 5px;
    padding-top: 2px;
    display: block;
    padding-top:5px;
  }
  .book-now-form .form-control {
    float: left;
    width: 100px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
}
@media (max-width: 768px) {
  #navbar {
    width: 100%;
  }
}
.navbar-brand>img {
  padding-top: 11px;
  width: 130px;
}
.navbar-brand {
    height: auto;
    margin: 0;
    padding: 0;
}
#navbar {
  float: right;
}
.navbar {
  background-color: 	#00bff3;
}
.navbar-default .navbar-toggle {
  border-color: #fff;
  color: #fff;
}
.navbar-collapse {
  padding-right: 0px;
}
.btn-sm {
    line-height: 1;
}

.ct-section_header {
text-align:...

JavaScript

$( document ).ready(function() {
$( function() {
  var dateToday = new Date();
  var dates = $("#start-date, #end-date").datepicker({
    defaultDate: "+2d",
    changeMonth: true,
    numberOfMonths: 1,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "start-date" ? "minDate" : "maxDate",
        instance = $(this).data("datepicker"),
        date = $.datepicker.parseDate(instance.settings.dateFormat || 		$.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
  });
});
});