{"id":57,"date":"2026-07-05T15:31:14","date_gmt":"2026-07-05T19:31:14","guid":{"rendered":"https:\/\/appointa.store\/demos\/gentlemans-cut\/book-online\/"},"modified":"2026-07-05T15:31:14","modified_gmt":"2026-07-05T19:31:14","slug":"book-online","status":"publish","type":"page","link":"https:\/\/appointa.store\/demos\/gentlemans-cut\/book-online\/","title":{"rendered":"Book Online"},"content":{"rendered":"\n<div class=\"appointa_booking_wrap\" id=\"appointa_booking_wrap\">\n\n\t<!-- Progress Steps -->\n\t<nav class=\"appointa_steps\" aria-label=\"Booking steps\">\n\t\t<div class=\"appointa_step appointa_step--active\" data-step=\"1\">\n\t\t\t<div class=\"appointa_step__bubble\"><span class=\"appointa_step__num\">1<\/span><\/div>\n\t\t\t<div class=\"appointa_step__label\">Service<\/div>\n\t\t<\/div>\n\t\t<div class=\"appointa_step_line\"><\/div>\n\t\t<div class=\"appointa_step\" data-step=\"2\">\n\t\t\t<div class=\"appointa_step__bubble\"><span class=\"appointa_step__num\">2<\/span><\/div>\n\t\t\t<div class=\"appointa_step__label\">Date &amp; Time<\/div>\n\t\t<\/div>\n\t\t<div class=\"appointa_step_line\"><\/div>\n\t\t<div class=\"appointa_step\" data-step=\"3\">\n\t\t\t<div class=\"appointa_step__bubble\"><span class=\"appointa_step__num\">3<\/span><\/div>\n\t\t\t<div class=\"appointa_step__label\">Your Info<\/div>\n\t\t<\/div>\n\t\t<div class=\"appointa_step_line\"><\/div>\n\t\t<div class=\"appointa_step\" data-step=\"4\">\n\t\t\t<div class=\"appointa_step__bubble\"><span class=\"appointa_step__num\">4<\/span><\/div>\n\t\t\t<div class=\"appointa_step__label\">Payment<\/div>\n\t\t<\/div>\n\t\t<div class=\"appointa_step_line\"><\/div>\n\t\t<div class=\"appointa_step\" data-step=\"5\">\n\t\t\t<div class=\"appointa_step__bubble\"><span class=\"appointa_step__num\">5<\/span><\/div>\n\t\t\t<div class=\"appointa_step__label\">Summary<\/div>\n\t\t<\/div>\n\t<\/nav>\n\n\t<!-- ===== STEP 1: Service & Staff ===== -->\n\t<div class=\"appointa_panel appointa_panel--active\" id=\"appointa_panel_1\">\n\t\t<h2 class=\"appointa_panel__title\">Choose Service &amp; Staff<\/h2>\n\n\t\t<div class=\"appointa_field_group\" id=\"appointa_category_group\">\n\t\t\t<label class=\"appointa_label\" for=\"appointa_category\">Category<\/label>\n\t\t\t<select id=\"appointa_category\" class=\"appointa_select\">\n\t\t\t\t<option value=\"\">\u2014 Select a category \u2014<\/option>\n\t\t\t<\/select>\n\t\t<\/div>\n\n\t\t<div class=\"appointa_field_group appointa_hidden\" id=\"appointa_service_group\">\n\t\t\t<label class=\"appointa_label\" for=\"appointa_service\">Service<\/label>\n\t\t\t<select id=\"appointa_service\" class=\"appointa_select\">\n\t\t\t\t<option value=\"\">\u2014 Select a service \u2014<\/option>\n\t\t\t<\/select>\n\t\t<\/div>\n\n\t\t<div class=\"appointa_field_group appointa_hidden\" id=\"appointa_staff_group\">\n\t\t\t<label class=\"appointa_label\">Staff Member<\/label>\n\t\t\t<div id=\"appointa_staff_cards\" class=\"appointa_staff_cards\"><\/div>\n\t\t<\/div>\n\n\t\t<div class=\"appointa_actions\">\n\t\t\t<button id=\"appointa_step1_next\" class=\"appointa_btn appointa_btn--primary\" disabled>\n\t\t\t\tNext\t\t\t\t<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"><path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\"\/><\/svg>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/div>\n\n\t<!-- ===== STEP 2: Date & Time ===== -->\n\t<div class=\"appointa_panel\" id=\"appointa_panel_2\">\n\t\t<h2 class=\"appointa_panel__title\">Choose Date &amp; Time<\/h2>\n\n\t\t<div class=\"appointa_datetime_wrap\">\n\n\t\t\t<!-- Calendar -->\n\t\t\t<div class=\"appointa_calendar_wrap\">\n\t\t\t\t<div class=\"appointa_calendar_header\">\n\t\t\t\t\t<button class=\"appointa_cal_nav\" id=\"appointa_cal_prev\" aria-label=\"Previous month\">&#8249;<\/button>\n\t\t\t\t\t<span id=\"appointa_cal_month_label\" class=\"appointa_cal_month_label\"><\/span>\n\t\t\t\t\t<button class=\"appointa_cal_nav\" id=\"appointa_cal_next\" aria-label=\"Next month\">&#8250;<\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"appointa_calendar_grid\">\n\t\t\t\t\t<div class=\"appointa_cal_dow\">Mo<\/div>\n\t\t\t\t\t<div class=\"appointa_cal_dow\">Tu<\/div>\n\t\t\t\t\t<div class=\"appointa_cal_dow\">We<\/div>\n\t\t\t\t\t<div class=\"appointa_cal_dow\">Th<\/div>\n\t\t\t\t\t<div class=\"appointa_cal_dow\">Fr<\/div>\n\t\t\t\t\t<div class=\"appointa_cal_dow\">Sa<\/div>\n\t\t\t\t\t<div class=\"appointa_cal_dow\">Su<\/div>\n\t\t\t\t\t<div id=\"appointa_cal_days\" class=\"appointa_cal_days\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<!-- Time Slots -->\n\t\t\t<div class=\"appointa_slots_wrap\">\n\t\t\t\t<h3 class=\"appointa_slots_title\">Available Times<\/h3>\n\t\t\t\t<div id=\"appointa_slots_grid\" class=\"appointa_slots_grid\">\n\t\t\t\t\t<p class=\"appointa_slots_placeholder\">Select a date to see available times.<\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t<\/div>\n\n\t\t<div class=\"appointa_actions\">\n\t\t\t<button id=\"appointa_step2_back\" class=\"appointa_btn appointa_btn--secondary\">\n\t\t\t\t<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"><path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\"\/><\/svg>\n\t\t\t\tBack\t\t\t<\/button>\n\t\t\t<button id=\"appointa_step2_next\" class=\"appointa_btn appointa_btn--primary\" disabled>\n\t\t\t\tNext\t\t\t\t<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"><path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\"\/><\/svg>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/div>\n\n\t<!-- ===== STEP 3: Client Info ===== -->\n\t<div class=\"appointa_panel\" id=\"appointa_panel_3\">\n\t\t<h2 class=\"appointa_panel__title\">Your Information<\/h2>\n\n\t\t<div class=\"appointa_form_row\">\n\t\t\t<div class=\"appointa_field_group\">\n\t\t\t\t<label class=\"appointa_label\" for=\"appointa_first_name\">\n\t\t\t\t\tFirst Name <span class=\"appointa_required\">*<\/span>\n\t\t\t\t<\/label>\n\t\t\t\t<input type=\"text\" id=\"appointa_first_name\" class=\"appointa_input\" autocomplete=\"given-name\" placeholder=\"John\">\n\t\t\t<\/div>\n\t\t\t<div class=\"appointa_field_group\">\n\t\t\t\t<label class=\"appointa_label\" for=\"appointa_last_name\">\n\t\t\t\t\tLast Name <span class=\"appointa_required\">*<\/span>\n\t\t\t\t<\/label>\n\t\t\t\t<input type=\"text\" id=\"appointa_last_name\" class=\"appointa_input\" autocomplete=\"family-name\" placeholder=\"Doe\">\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<div class=\"appointa_field_group\">\n\t\t\t<label class=\"appointa_label\" for=\"appointa_email\">\n\t\t\t\tEmail Address <span class=\"appointa_required\">*<\/span>\n\t\t\t<\/label>\n\t\t\t<input type=\"email\" id=\"appointa_email\" class=\"appointa_input\" autocomplete=\"email\" placeholder=\"john@example.com\">\n\t\t<\/div>\n\n\t\t<div class=\"appointa_field_group\">\n\t\t\t<label class=\"appointa_label\" for=\"appointa_phone\">Phone Number<\/label>\n\t\t\t<input type=\"tel\" id=\"appointa_phone\" class=\"appointa_input\" autocomplete=\"tel\" placeholder=\"+1 555 000 0000\">\n\t\t<\/div>\n\n\t\t<div id=\"appointa_step3_error\" class=\"appointa_alert appointa_alert--error appointa_hidden\"><\/div>\n\n\t\t<div class=\"appointa_actions\">\n\t\t\t<button id=\"appointa_step3_back\" class=\"appointa_btn appointa_btn--secondary\">\n\t\t\t\t<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"><path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\"\/><\/svg>\n\t\t\t\tBack\t\t\t<\/button>\n\t\t\t<button id=\"appointa_step3_next\" class=\"appointa_btn appointa_btn--primary\">\n\t\t\t\tNext\t\t\t\t<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"><path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\"\/><\/svg>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/div>\n\n\t<!-- ===== STEP 4: Payment ===== -->\n\t<div class=\"appointa_panel\" id=\"appointa_panel_4\">\n\t\t<h2 class=\"appointa_panel__title\">Payment Method<\/h2>\n\t\t<div id=\"appointa_payment_options\" class=\"appointa_payment_options\"><\/div>\n\n\t\t<div class=\"appointa_actions\">\n\t\t\t<button id=\"appointa_step4_back\" class=\"appointa_btn appointa_btn--secondary\">\n\t\t\t\t<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"><path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\"\/><\/svg>\n\t\t\t\tBack\t\t\t<\/button>\n\t\t\t<button id=\"appointa_step4_next\" class=\"appointa_btn appointa_btn--primary\">\n\t\t\t\tNext\t\t\t\t<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"><path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\"\/><\/svg>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/div>\n\n\t<!-- ===== STEP 5: Summary ===== -->\n\t<div class=\"appointa_panel\" id=\"appointa_panel_5\">\n\t\t<h2 class=\"appointa_panel__title\">Booking Summary<\/h2>\n\t\t<div id=\"appointa_summary\" class=\"appointa_summary\"><\/div>\n\n\t\t<div id=\"appointa_submit_error\" class=\"appointa_alert appointa_alert--error appointa_hidden\"><\/div>\n\n\t\t<div class=\"appointa_actions\">\n\t\t\t<button id=\"appointa_step5_back\" class=\"appointa_btn appointa_btn--secondary\">\n\t\t\t\t<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"><path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\"\/><\/svg>\n\t\t\t\tBack\t\t\t<\/button>\n\t\t\t<button id=\"appointa_step5_submit\" class=\"appointa_btn appointa_btn--primary appointa_btn--confirm\">\n\t\t\t\t<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"><path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"\/><\/svg>\n\t\t\t\tConfirm Booking\t\t\t<\/button>\n\t\t<\/div>\n\t<\/div>\n\n\t<!-- ===== SUCCESS ===== -->\n\t<div class=\"appointa_panel appointa_panel--success appointa_hidden\" id=\"appointa_panel_success\">\n\t\t<div class=\"appointa_success_icon\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" width=\"48\" height=\"48\">\n\t\t\t\t<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"\/>\n\t\t\t<\/svg>\n\t\t<\/div>\n\t\t<h2 class=\"appointa_success_title\">Booking Confirmed!<\/h2>\n\t\t<p class=\"appointa_success_msg\">Your appointment has been booked successfully. You will receive a confirmation email shortly.<\/p>\n\t\t<button id=\"appointa_book_another\" class=\"appointa_btn appointa_btn--secondary\">\n\t\t\tBook Another Appointment\t\t<\/button>\n\t<\/div>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-57","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/appointa.store\/demos\/gentlemans-cut\/wp-json\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appointa.store\/demos\/gentlemans-cut\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/appointa.store\/demos\/gentlemans-cut\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/appointa.store\/demos\/gentlemans-cut\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":0,"href":"https:\/\/appointa.store\/demos\/gentlemans-cut\/wp-json\/wp\/v2\/pages\/57\/revisions"}],"wp:attachment":[{"href":"https:\/\/appointa.store\/demos\/gentlemans-cut\/wp-json\/wp\/v2\/media?parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}