English / Spanish / Portuguese
Demos

Group

CSS – Place within <head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
  .fleet .crs-inner {
    margin: 15px 0;
    border: 3px solid #ddd; /* remove for borderless */
    border-radius: 10px; /* remove for borderless */
    padding: 15px; /* remove for borderless */
  }
  .fleet .disabled img {
    opacity: 0.3;
  }
  .fleet .crs-name {
    font-weight: bold;
    text-align: center;
  }
  .fleet ul {
    list-style-type: none;
    padding-left: 0;
  }
</style>

HTML – Place within <body>, where you want the form to appear

<div class="crs-specials fleet" style="display: none">
  <div class="row"></div>
</div>

JS – Place right before </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="https://cdn.crs.rentals/jquery.crs.js?v=20181105204713"></script>
<script>
  (function ($, undefined) {
    $('.crs-specials').crsGroup({
      domain: 'https://www.samplecarrental.com',
      lang: 'en-US',
      code: 'specials',
      start: '1.12:00',
      end: '1.00:00',
      location: 1131,
      charges: 'DailyRate WeeklyRate MonthlyRate',
      itemClass: 'col-sm-4',
      redir: '/english/rent/quote.aspx'
      });
  })(jQuery);
</script>

Create reservation form

CSS – Place within <head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.10/jquery.timepicker.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

HTML – Place within <body>, where you want the form to appear

<div class="crs-reserve">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label class="control-label" for="pickupId">
          <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
          Pick-up location
        </label>
        <select id="pickupId" name="pickupId" class="form-control" data-copy="[name=dropoffId]"></select>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group">
        <label class="control-label" for="dropoffId">
          <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
          Drop-off location
        </label>
        <select id="dropoffId" name="dropoffId" class="form-control"></select>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3 col-xs-6">
      <div class="form-group">
        <label class="control-label" for="pickupDate">
          <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
          Pick-up date
        </label>
        <input type="text" id="pickupDate" name="pickupDate" class="form-control" data-copy="[name=dropoffDate]">
      </div>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div class="form-group">
        <label class="control-label" for="pickupTime">
          <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
          Pick-up time
        </label>
        <input type="text" id="pickupTime" name="pickupTime" class="form-control" data-copy="[name=dropoffTime]">
      </div>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div class="form-group">
        <label class="control-label" for="dropoffDate">
          <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
          Drop-off date
        </label>
        <input type="text" id="dropoffDate" name="dropoffDate" class="form-control">
      </div>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div class="form-group">
        <label class="control-label" for="dropoffTime">
          <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
          Drop-off time
        </label>
        <input type="text" id="dropoffTime" name="dropoffTime" class="form-control">
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-6 col-xs-12">
      <div class="form-group">
        <label class="control-label" for="ageGroup">
          <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
          Driver age
        </label>
        <select id="ageGroup" name="ageGroup" class="form-control"></select>
      </div>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div class="form-group">
        <label class="control-label" for="rateCode">
          <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
          Rate code
        </label>
        <input type="text" id="rateCode" name="rateCode" class="form-control">
      </div>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div class="form-group">
        <label class="control-label" for="coupon">
          <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
          Coupon code
        </label>
        <input type="text" id="coupon" name="coupon" class="form-control">
      </div>
    </div>
  </div>

  <button type="button" class="crs-submit btn btn-lg btn-primary center-block">
    Continue
    <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span>
  </button>
</div>

JS – Place right before </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.10/jquery.timepicker.min.js"></script>
<script src="https://cdn.crs.rentals/jquery.crs.js?v=20181105204713"></script>
<script>
  (function ($, undefined) {
    $.datepicker
      .setDefaults($.datepicker.regional['en-US'])
      .setDefaults({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'm/d/yy',
        minDate: 0
      });
    $.fn.timepicker.defaults.timeFormat = 'h:i A';

    $('.crs-reserve').crsCreateReservationForm({
      domain: 'https://www.samplecarrental.com',
      redir: '/english/rent/?validate=1',
      lang: 'en-US',
      defaults: {
        pickupId: undefined,    // '123'
        pickupDate: undefined,  // '6/20/2017'
        pickupTime: undefined,  // '12:00 PM'
        dropoffId: undefined,   // '456'
        dropoffDate: undefined, // '6/21/2017'
        dropoffTime: undefined, // '12:00 PM'
        ageGroup: undefined,    // '789'
        rateCode: undefined,    // 'ABC'
        coupon: undefined       // 'XYZ'
      }
    });
  })(jQuery);
</script>

Change reservation form

Basic form

CSS – Place within <head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

HTML – Place within <body>, where you want the form to appear

<div class="crs-change">
  <div class="row">
    <div class="col-sm-9">
      <div class="form-group">
        <label class="control-label" for="email">
          <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
          Email
        </label>
        <input type="email" id="email" name="email" class="form-control">
      </div>
    </div>

    <div class="col-sm-3">
      <div class="form-group">
        <label class="control-label" for="code">
          <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
          Confirmation #
        </label>
        <input type="text" id="code" name="code" class="form-control">
      </div>
    </div>
  </div>

  <button type="button" class="crs-submit btn btn-lg btn-primary center-block">
    Continue
    <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span>
  </button>
</div>

JS – Place right before </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdn.crs.rentals/jquery.crs.js?v=20181105204713"></script>
<script>
  (function ($, undefined) {
    $('.crs-change').crsUpdateReservationForm('https://www.samplecarrental.com/english/rent/view.aspx');
  })(jQuery);
</script>

Inline form

CSS – Place within <head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

HTML – Place within <body>, where you want the form to appear

<div class="crs-change">
  <div class="form-group">
    <label class="sr-only" for="email">
      Email
    </label>
    <input type="email" id="email" name="email" class="form-control" placeholder="Email">
  </div>

  <div class="form-group">
    <label class="sr-only" for="code">
      Confirmation #
    </label>
    <input type="text" id="code" name="code" class="form-control" placeholder="Confirmation #">
  </div>

  <div class="form-group">
    <button type="button" class="crs-submit btn btn-primary">
      Continue
      <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span>
    </button>
  </div>
</div>

JS – Place right before </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdn.crs.rentals/jquery.crs.js?v=20181105204713"></script>
<script>
  (function ($, undefined) {
    $('.crs-change').crsUpdateReservationForm('https://www.samplecarrental.com/english/rent/view.aspx');
  })(jQuery);
</script>