demo-easyservicesbooking.joomboost.com Open in urlscan Pro
193.34.145.202  Public Scan

Form analysis
1 forms found in the DOM

Name: bookingForm — POST https://demo-easyservicesbooking.joomboost.com/index.php?option=com_easyservicesbooking&task=booking.create

<form method="post" action="https://demo-easyservicesbooking.joomboost.com/index.php?option=com_easyservicesbooking&amp;task=booking.create" id="easyservicesbooking-reservation-form" class="form-validate" name="bookingForm">
  <div id="booking-request">
    <div class="form form-inline">
      <div class="row">
        <div class="col-md-3" id="therapistSelect">
          <label for="field_cal_id">Resource</label>
          <select class="form-select w-100" name="cal_id" id="field_cal_id" data-esb-update="services" required="" aria-required="true">
            <option value="">- Please select -</option>
            <option value="1">Massage Therapist 1</option>
            <option value="2">Beauty Therapist 1</option>
            <option value="3">Naturopath 1</option>
            <option value="4">Acupuncturist 1</option>
          </select>
        </div>
        <div class="col-md-3" id="shiftSelect">
          <label for="select-timegrouping">Shift</label>
          <select name="timegrouping" id="select-timegrouping" data-esb-reset="result" class="w-100 form-select ">
            <option value="">- Please select -</option>
            <option value="morning"> morning </option>
            <option value="afternoon"> afternoon </option>
            <option value="evening"> evening </option>
          </select>
        </div>
        <div class="col-md-3" id="serviceSelect">
          <label for="field_service_id">Service</label>
          <select class="form-select w-100" name="service_id" id="field_service_id" data-esb-reset="result" required="" aria-required="true">
            <option value="">- Please select -</option>
          </select>
        </div>
        <div class="col-md-3" id="availablefromText">
          <label for="availablefrom">Available From</label>
          <input data-value="2024-08-22" type="text" class="col-md-12 form-control picker__input" id="availablefrom" name="" placeholder="Available From" readonly="" aria-haspopup="true" aria-expanded="false" aria-readonly="false"
            aria-owns="availablefrom_root">
          <div class="picker" id="availablefrom_root" aria-hidden="true">
            <div class="picker__holder" tabindex="-1">
              <div class="picker__frame">
                <div class="picker__wrap">
                  <div class="picker__box">
                    <div class="picker__header">
                      <div class="picker__month">August</div>
                      <div class="picker__year">2024</div>
                      <div class="picker__nav--prev picker__nav--disabled" data-nav="-1" role="button" aria-controls="availablefrom_table" title="Previous month"> </div>
                      <div class="picker__nav--next" data-nav="1" role="button" aria-controls="availablefrom_table" title="Next month"> </div>
                    </div>
                    <table class="picker__table" id="availablefrom_table" role="grid" aria-controls="availablefrom" aria-readonly="true">
                      <thead>
                        <tr>
                          <th class="picker__weekday" scope="col" title="Sunday">Sun</th>
                          <th class="picker__weekday" scope="col" title="Monday">Mon</th>
                          <th class="picker__weekday" scope="col" title="Tuesday">Tue</th>
                          <th class="picker__weekday" scope="col" title="Wednesday">Wed</th>
                          <th class="picker__weekday" scope="col" title="Thursday">Thu</th>
                          <th class="picker__weekday" scope="col" title="Friday">Fri</th>
                          <th class="picker__weekday" scope="col" title="Saturday">Sat</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus picker__day--disabled" data-pick="1722117600000" role="gridcell" aria-label="28 July, 2024" aria-disabled="true">28</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus picker__day--disabled" data-pick="1722204000000" role="gridcell" aria-label="29 July, 2024" aria-disabled="true">29</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus picker__day--disabled" data-pick="1722290400000" role="gridcell" aria-label="30 July, 2024" aria-disabled="true">30</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus picker__day--disabled" data-pick="1722376800000" role="gridcell" aria-label="31 July, 2024" aria-disabled="true">31</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1722463200000" role="gridcell" aria-label="1 August, 2024" aria-disabled="true">1</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1722549600000" role="gridcell" aria-label="2 August, 2024" aria-disabled="true">2</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1722636000000" role="gridcell" aria-label="3 August, 2024" aria-disabled="true">3</div>
                          </td>
                        </tr>
                        <tr>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1722722400000" role="gridcell" aria-label="4 August, 2024" aria-disabled="true">4</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1722808800000" role="gridcell" aria-label="5 August, 2024" aria-disabled="true">5</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1722895200000" role="gridcell" aria-label="6 August, 2024" aria-disabled="true">6</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1722981600000" role="gridcell" aria-label="7 August, 2024" aria-disabled="true">7</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723068000000" role="gridcell" aria-label="8 August, 2024" aria-disabled="true">8</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723154400000" role="gridcell" aria-label="9 August, 2024" aria-disabled="true">9</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723240800000" role="gridcell" aria-label="10 August, 2024" aria-disabled="true">10</div>
                          </td>
                        </tr>
                        <tr>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723327200000" role="gridcell" aria-label="11 August, 2024" aria-disabled="true">11</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723413600000" role="gridcell" aria-label="12 August, 2024" aria-disabled="true">12</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723500000000" role="gridcell" aria-label="13 August, 2024" aria-disabled="true">13</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723586400000" role="gridcell" aria-label="14 August, 2024" aria-disabled="true">14</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723672800000" role="gridcell" aria-label="15 August, 2024" aria-disabled="true">15</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723759200000" role="gridcell" aria-label="16 August, 2024" aria-disabled="true">16</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723845600000" role="gridcell" aria-label="17 August, 2024" aria-disabled="true">17</div>
                          </td>
                        </tr>
                        <tr>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1723932000000" role="gridcell" aria-label="18 August, 2024" aria-disabled="true">18</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1724018400000" role="gridcell" aria-label="19 August, 2024" aria-disabled="true">19</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1724104800000" role="gridcell" aria-label="20 August, 2024" aria-disabled="true">20</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--disabled" data-pick="1724191200000" role="gridcell" aria-label="21 August, 2024" aria-disabled="true">21</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus picker__day--today picker__day--selected picker__day--highlighted" data-pick="1724277600000" role="gridcell" aria-label="22 August, 2024" aria-activedescendant="true">22</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus" data-pick="1724364000000" role="gridcell" aria-label="23 August, 2024">23</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus" data-pick="1724450400000" role="gridcell" aria-label="24 August, 2024">24</div>
                          </td>
                        </tr>
                        <tr>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus" data-pick="1724536800000" role="gridcell" aria-label="25 August, 2024">25</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus" data-pick="1724623200000" role="gridcell" aria-label="26 August, 2024">26</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus" data-pick="1724709600000" role="gridcell" aria-label="27 August, 2024">27</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus" data-pick="1724796000000" role="gridcell" aria-label="28 August, 2024">28</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus" data-pick="1724882400000" role="gridcell" aria-label="29 August, 2024">29</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus" data-pick="1724968800000" role="gridcell" aria-label="30 August, 2024">30</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--infocus" data-pick="1725055200000" role="gridcell" aria-label="31 August, 2024">31</div>
                          </td>
                        </tr>
                        <tr>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus" data-pick="1725141600000" role="gridcell" aria-label="1 September, 2024">1</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus" data-pick="1725228000000" role="gridcell" aria-label="2 September, 2024">2</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus" data-pick="1725314400000" role="gridcell" aria-label="3 September, 2024">3</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus" data-pick="1725400800000" role="gridcell" aria-label="4 September, 2024">4</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus" data-pick="1725487200000" role="gridcell" aria-label="5 September, 2024">5</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus" data-pick="1725573600000" role="gridcell" aria-label="6 September, 2024">6</div>
                          </td>
                          <td role="presentation">
                            <div class="picker__day picker__day--outfocus" data-pick="1725660000000" role="gridcell" aria-label="7 September, 2024">7</div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="picker__footer"><button class="picker__button--today" type="button" data-pick="1724277600000" disabled="" aria-controls="availablefrom">Today</button><button class="picker__button--clear" type="button" data-clear="1"
                        disabled="" aria-controls="availablefrom">Clear</button><button class="picker__button--close" type="button" data-close="true" disabled="" aria-controls="availablefrom">Close</button></div>
                  </div>
                </div>
              </div>
            </div>
          </div><input type="hidden" name="availablefrom" value="2024-08-22">
        </div>
      </div>
      <button id="btnLoadSlots" class="btn btn-primary mt-4"> Search </button>
    </div>
  </div>
  <!-- begin render appt slots -->
  <div id="esb-slots-list">
    <div id="esb-slots-error">
      <div class="alert alert-warning">
        <strong>No available time slots</strong>, please fill booking details to get available time slots.
      </div>
    </div>
  </div>
  <div id="esb-selected-slot-info" style="display: none">
    <h3>Selected Slot</h3>
    <div>
      <div class="row">
        <div class="col-md-12">
          <div class="col-md-4"> Appointment Date<br>
            <strong class="esb-date"></strong>
          </div>
          <div class="col-md-4"> Start Time<br><strong class="esb-from"></strong>
          </div>
          <div class="col-md-4"> End Time<br><strong class="esb-to"></strong>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="bookingDetails" style="display: none">
    <h2>Your Personal Details</h2>
    <style>
      fieldset {
        margin-bottom: 0px !important;
      }
    </style>
    <label id="firstname-lbl" for="firstname" class="required"> First Name<span class="star" aria-hidden="true">&nbsp;*</span></label>
    <input type="text" name="firstname" id="firstname" value="" class="form-control required" required="">
    <label id="lastname-lbl" for="lastname" class="required"> Last Name<span class="star" aria-hidden="true">&nbsp;*</span></label>
    <input type="text" name="lastname" id="lastname" value="" class="form-control required" required="">
    <label id="email-lbl" for="email" class="required"> Email<span class="star" aria-hidden="true">&nbsp;*</span></label>
    <input type="email" name="email" id="email" value="" class="form-control validate-email required" required="">
    <label id="mobile-lbl" for="mobile" class="required"> Mobile<span class="star" aria-hidden="true">&nbsp;*</span></label>
    <input type="text" name="mobile" id="mobile" value="" class="form-control required" required="">
    <label id="gender-lbl" for="gender" class="required"> Gender<span class="star" aria-hidden="true">&nbsp;*</span></label>
    <fieldset id="gender" class="required radio" required="">
      <legend class="visually-hidden"> Gender </legend>
      <div class="required radio">
        <div class="form-check"> <input class="form-check-input" type="radio" id="gender0" name="gender" value="Male" required="">
          <label for="gender0" class="form-check-label"> Male </label>
        </div>
        <div class="form-check"> <input class="form-check-input" type="radio" id="gender1" name="gender" value="Female" required="">
          <label for="gender1" class="form-check-label"> Female </label>
        </div>
      </div>
    </fieldset>
    <!-- draw recaptcha if needed -->
    <!-- end draw recaptcha -->
    <div style="margin-top:20px;">
      <button class="btn btn-success" style="width: 100%;" type="submit" id="easyservicesbooking-submit"> Book now </button>
    </div>
  </div>
  <input type="hidden" name="view" value="booking">
  <input type="hidden" name="dateparam" value="2024-08-22T07:38:05+00:00">
  <input type="hidden" name="dtend" value="">
  <input type="hidden" name="dtstart" value="">
  <input type="hidden" name="bf1638bd02fbf4f0b72f5dbdece205ac" value="1">
</form>

Text Content

Demo - Easy Services Booking
 * Quick Booking
 * Calendar Booking
 * Calendar Booking (2 Columns)
 * Calendar Booking (Multi-page)
 * Client Interface
 * Modules
   * Slim Calendar Module
   * Diary Management Module


QUICK BOOKING


Resource - Please select - Massage Therapist 1 Beauty Therapist 1 Naturopath 1
Acupuncturist 1
Shift - Please select - morning afternoon evening
Service - Please select -
Available From
August
2024



SunMonTueWedThuFriSat
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7

TodayClearClose
Search
No available time slots, please fill booking details to get available time
slots.


SELECTED SLOT

Appointment Date

Start Time

End Time



YOUR PERSONAL DETAILS

First Name * Last Name * Email * Mobile * Gender * Gender
Male
Female
Book now