{"id":9984,"date":"2025-01-13T21:08:08","date_gmt":"2025-01-13T20:08:08","guid":{"rendered":"https:\/\/alm-telecoms.com\/wpbc-booking\/"},"modified":"2025-01-13T21:08:08","modified_gmt":"2025-01-13T20:08:08","slug":"wpbc-booking","status":"publish","type":"page","link":"https:\/\/alm-telecoms.com\/en\/wpbc-booking\/","title":{"rendered":"Booking Form"},"content":{"rendered":"<div id=\"form_id751881314331\"  class=\"wpbc_container wpbc_container_booking_form  wpdevelop\" ><form  id=\"booking_form1\"   class=\"booking_form vertical\" method=\"post\" action=\"\" data-trp-original-action=\"\"><div id=\"ajax_respond_insert1\" class=\"ajax_respond_insert\" style=\"display:none;\"><\/div><a name=\"bklnk1\" id=\"bklnk1\"><\/a><div id=\"booking_form_div1\" class=\"booking_form_div\"><!-- HTML Structure for Multi-Step Form with Sidebar Navigation -->\r\n<div id=\"sidebar-multiStepForm\" class=\"container mt-5\">\r\n    <div class=\"row\">\r\n        <!-- Sidebar Navigation -->\r\n        <div class=\"col-md-4 bg-primary text-white p-4 rounded-left\">\r\n            <ul class=\"list-group list-group-flush\">\r\n                <li class=\"list-group-item bg-transparent text-white active d-flex align-items-center mb-3\" data-target=\"#step1\">\r\n                    <i class=\"fas fa-envelope mr-2\"><\/i> Choose an option\r\n                <\/li>\r\n                <li class=\"list-group-item bg-transparent text-white d-flex align-items-center mb-3\" data-target=\"#step2\">\r\n                    <i class=\"fas fa-cogs mr-2\"><\/i> Services\r\n                <\/li>\r\n                <li class=\"list-group-item bg-transparent text-white d-flex align-items-center mb-3\" data-target=\"#step3\">\r\n                    <i class=\"fas fa-calendar-alt mr-2\"><\/i> Date and time\r\n                <\/li>\r\n                <li class=\"list-group-item bg-transparent text-white d-flex align-items-center mb-3\" data-target=\"#step4\">\r\n                    <i class=\"fas fa-user mr-2\"><\/i> Personal info\r\n                <\/li>\r\n                <li class=\"list-group-item bg-transparent text-white d-flex align-items-center mb-3\" data-target=\"#step5\">\r\n                    <i class=\"fas fa-check mr-2\"><\/i> Confirmation\r\n                <\/li>\r\n            <\/ul>\r\n            <hr class=\"bg-light\">\r\n            <div class=\"contact-info\">\r\n                <p><strong>Our contacts<\/strong><\/p>\r\n                <p>+221 77 091 56 56<\/p>\r\n                <p>contact@alm-telecoms.com<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Form Content -->\r\n        <div class=\"col-md-8 bg-white p-4 rounded-right shadow-sm d-flex flex-column\">\r\n            <!-- Step 1: Choisissez une option -->\r\n            <div class=\"step\" id=\"step1\">\r\n                <h4>Choose an option<\/h4>\r\n                <p>Option :<\/p>\r\n                <span class=\"wpbc_wrap_select wpdev-form-control-wrap Option1\"><select onchange=\"javascript:if(typeof( showCostHintInsideBkForm ) == 'function') {  showCostHintInsideBkForm(1);}\" name=\"Option1\" class=\"form-control wpdev-validates-as-required\"><option value=\"Rendez-vous Physique\">Physical appointment<\/option><option value=\"Rendez-vous de maintenance\">Maintenance appointments<\/option><option value=\"Demande de devis\">Request a quote<\/option><\/select><\/span>\r\n            <\/div>\r\n\r\n            <!-- Step 2: Services -->\r\n            <div class=\"step d-none\" id=\"step2\">\r\n                <h4>Choose a service<\/h4>\r\n                <p>Service:<\/p>\r\n                <span class=\"wpbc_wrap_select wpdev-form-control-wrap Option1\"><select onchange=\"javascript:if(typeof( showCostHintInsideBkForm ) == 'function') {  showCostHintInsideBkForm(1);}\" name=\"Option1\" class=\"form-control wpdev-validates-as-required\"><option value=\"Conseil et Expertise\">Professional Assistance and expertise<\/option><option value=\"Formation et Audit\">Training and Audit<\/option><option value=\"SAV et Maintenance\">Customer service and maintenance<\/option><\/select><\/span>\r\n            <\/div>\r\n\r\n            <!-- Step 3: Date et Heure -->\r\n            <div class=\"step d-none\" id=\"step3\">\r\n                <h4>Date and time<\/h4>\r\n                <p>Date :<\/p>\r\n                <div class=\"wpbc_calendar_wraper wpbc_change_over_triangle\"><div class=\"bk_calendar_frame wpbc_no_custom_width  months_num_in_row_ cal_month_num_1\" style=\"\"><div id=\"calendar_booking1\">Calendar is loading...<\/div><\/div><textarea id=\"date_booking1\" name=\"date_booking1\" autocomplete=\"off\" style=\"display:none;\"><\/textarea><div class=\"block_hints datepick\"><div class=\"wpdev_hint_with_text\"><div class=\"block_free datepick-days-cell\"><a>&nbsp;<\/a><\/div><div class=\"block_text\">- <\/div><div class=\"block_text\">Available<\/div><\/div><div class=\"wpdev_hint_with_text\"><div class=\"block_booked date_approved\">&nbsp;<\/div><div class=\"block_text\">- <\/div><div class=\"block_text\">Booked<\/div><\/div><div class=\"wpdev_hint_with_text\"><div class=\"block_pending date2approve\">&nbsp;<\/div><div class=\"block_text\">- <\/div><div class=\"block_text\">Pending<\/div><\/div><div class=\"wpdev_hint_with_text\"><div class=\"\"><span class=\"wpbc_change_over_triangle\"><div class=\"datepick-inline\" style=\"width:30px !important;border: 0;box-shadow: none;float: left;min-width: 30px;padding: 0;\"><table class=\"datepick\" style=\"\"><tbody><tr><td class=\"datepick-days-cell date_available date2approve timespartly times_clock\" style=\"height: 30px !important;\"><div class=\"wpbc-cell-box\">\t<div class=\"wpbc-diagonal-el\">\t\t<div class=\"wpbc-co-out\"><svg height=\"100%\" width=\"100%\" viewbox=\"0 0 100 100\" preserveaspectratio=\"none\"><polygon points=\"0,0 0,99 99,0\"><\/polygon><polygon points=\"0,0 0,100 49,100 49,0\"><\/polygon><\/svg><\/div>\t\t<div class=\"wpbc-co-in\"><svg height=\"100%\" width=\"100%\" viewbox=\"0 0 98 98\" preserveaspectratio=\"none\"><polygon points=\"0,99 99,99 99,0\"><\/polygon><polygon points=\"50,98 98,98 98,0 50,0\"><\/polygon><\/svg><\/div>\t<\/div>\t<div class=\"date-cell-content\">\t\t<div class=\"date-content-top\"><div class=\"wpbc_time_dots\">-<\/div><\/div>\t\t<a>&nbsp;<\/a>\t\t<div class=\"date-content-bottom\"><\/div>\t<\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/span><\/div><div class=\"block_text\">- <\/div><div class=\"block_text\">Partially booked<\/div><\/div><\/div><\/div>\r\n                <p>Select a time (mandatory) :<\/p>\r\n                <span class=\"wpbc_wrap_select wpdev-form-control-wrap rangetime1\"><select onchange=\"javascript: wpbc_in_form__make_exclusive_selectbox(this); if(typeof( showCostHintInsideBkForm ) == 'function') {  showCostHintInsideBkForm(1);}\" name=\"rangetime1[]\" class=\"form-control wpdev-validates-as-required\" multiple=\"multiple\"><option value=\"10:00 - 12:00\">10:00 AM - 12:00 PM<\/option><option value=\"12:00 - 14:00\">12:00 PM - 02:00 PM<\/option><option value=\"14:00 - 16:00\">02:00 PM - 04:00 PM<\/option><option value=\"16:00 - 18:00\">04:00 PM - 06:00 PM<\/option><option value=\"18:00 - 20:00\">06:00 PM - 08:00 PM<\/option><\/select><\/span>\r\n            <\/div>\r\n\r\n            <!-- Step 4: Infos personnelles -->\r\n            <div class=\"step d-none\" id=\"step4\">\r\n                <h4>Personal info<\/h4>\r\n                <p>First name (required) :<\/p>\r\n                <span class=\"wpbc_wrap_text wpdev-form-control-wrap name1\"><input type=\"text\" name=\"name1\" value=\"\" class=\"form-control wpdev-validates-as-required\" size=\"40\" \/><\/span>\r\n                <p>Name (required) :<\/p>\r\n                <span class=\"wpbc_wrap_text wpdev-form-control-wrap secondname1\"><input type=\"text\" name=\"secondname1\" value=\"\" class=\"form-control wpdev-validates-as-required\" size=\"40\" \/><\/span>\r\n                <p>Email (required) :<\/p>\r\n                <span class=\"wpbc_wrap_text wpdev-form-control-wrap email1\"><input type=\"text\" name=\"email1\" value=\"\" class=\"form-control wpdev-validates-as-email wpdev-validates-as-required\" size=\"40\" \/><\/span>\r\n                <p>Phone :<\/p>\r\n                <span class=\"wpbc_wrap_text wpdev-form-control-wrap phone1\"><input type=\"text\" name=\"phone1\" value=\"\" class=\"form-control\" size=\"40\" \/><\/span>\r\n            <\/div>\r\n\r\n            <!-- Step 5: Confirmation -->\r\n            <div class=\"step d-none\" id=\"step5\">\r\n                <h4>Confirmation<\/h4>\r\n                <p><span class=\"wpbc_wrap_checkbox wpdev-form-control-wrap term_and_condition1\"><span class=\"wpdev-validates-as-required wpdev-checkbox\"><span class=\"wpdev-list-item\"><label for=\"checkboxid177749719702301\"  class=\"wpdev-list-item-label\"><input  class=\"wpdev-validates-as-required wpdev-checkbox\" id=\"checkboxid177749719702301\"  onchange=\"javascript:if(typeof( showCostHintInsideBkForm ) == 'function') {  showCostHintInsideBkForm(1);}\"  type=\"checkbox\"  name=\"term_and_condition1[]\"  value=\"J&#039;accepte les termes et conditions\" \/>&nbsp;&nbsp;I accept the terms and conditions<\/label><\/span><\/span><\/span><\/p>\r\n                <p><\/p>\r\n                <p><input type=\"button\" value=\"Send\" class=\"wpbc_button_light btn btn-primary\" onclick=\"mybooking_submit(this.form,1, 'en_US' );\" \/><img decoding=\"async\" class=\"ajax-loader\"  style=\"vertical-align:middle;box-shadow:none;width:14px;visibility: hidden;\" alt=\"ajax loader\" src=\"https:\/\/alm-telecoms.com\/wp-content\/plugins\/booking.bl.9.8.12\/assets\/img\/ajax-loader.gif\" \/><\/p>\r\n            <\/div>\r\n\r\n            <!-- Footer Navigation -->\r\n            <div class=\"mt-4\">\r\n                <div class=\"d-flex justify-content-between\">\r\n                    <button type=\"button\" class=\"btn btn-secondary prev-step d-none\">Back<\/button>\r\n                    <button type=\"button\" class=\"btn btn-primary next-step\">Continue<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<!-- CSS -->\r\n<style>\r\n.container {\r\n    font-family: Arial, sans-serif;\r\n}\r\n\t\r\n\t\r\n.bg-primary {\r\n  background-color: #BF4619 !important;\r\n}\t\r\n\t\r\n.wpdev-form-control-wrap {\r\n  display: inline-flex;\r\n  flex-flow: row wrap;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  width: 100% !important;\r\n  margin: 0.25em 0;\r\n}\r\n\r\n.list-group-item {\r\n    cursor: pointer;\r\n    padding: 15px;\r\n    border-radius: 5px;\r\n    margin-bottom: 10px;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.list-group-item.active {\r\n    background-color: #0056b3;\r\n    color: white;\r\n    font-weight: bold;\r\n}\r\n\r\n\r\n.step.active {\r\n  display: block !important;\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- JavaScript -->\r\n<script>\r\nfunction updateButtons(stepId) {\r\n    const prevButton = document.querySelector('.prev-step');\r\n    const nextButton = document.querySelector('.next-step');\r\n\r\n    \/\/ Update visibility of buttons\r\n    if (stepId === '#step1') {\r\n        prevButton.classList.add('d-none');\r\n        nextButton.textContent = 'Continuer';\r\n    } else if (stepId === '#step5') {\r\n        prevButton.classList.remove('d-none');\r\n        nextButton.textContent = 'Envoyer';\r\n    } else {\r\n        prevButton.classList.remove('d-none');\r\n        nextButton.textContent = 'Continuer';\r\n    }\r\n}\r\n\r\nfunction initializeForm() {\r\n    document.querySelector('.prev-step').classList.add('d-none');\r\n    document.querySelectorAll('.step').forEach(step => step.classList.add('d-none'));\r\n    document.querySelector('#step1').classList.add('active');\r\n}\r\n\r\ndocument.querySelectorAll('.list-group-item').forEach(item => {\r\n    item.addEventListener('click', () => {\r\n        document.querySelectorAll('.list-group-item').forEach(i => i.classList.remove('active'));\r\n        item.classList.add('active');\r\n\r\n        const target = item.getAttribute('data-target');\r\n        document.querySelectorAll('.step').forEach(step => step.classList.remove('active'));\r\n        document.querySelector(target).classList.add('active');\r\n\r\n        updateButtons(target);\r\n    });\r\n});\r\n\r\ndocument.querySelector('.next-step').addEventListener('click', () => {\r\n    const currentStep = document.querySelector('.step.active');\r\n    const nextStep = currentStep.nextElementSibling;\r\n\r\n    if (nextStep && nextStep.classList.contains('step')) {\r\n        currentStep.classList.remove('active');\r\n        nextStep.classList.add('active');\r\n\r\n        const currentNav = document.querySelector('.list-group-item.active');\r\n        const nextNav = currentNav.nextElementSibling;\r\n        if (nextNav) {\r\n            currentNav.classList.remove('active');\r\n            nextNav.classList.add('active');\r\n        }\r\n        updateButtons(`#${nextStep.id}`);\r\n    }\r\n});\r\n\r\ndocument.querySelector('.prev-step').addEventListener('click', () => {\r\n    const currentStep = document.querySelector('.step.active');\r\n    const prevStep = currentStep.previousElementSibling;\r\n\r\n    if (prevStep && prevStep.classList.contains('step')) {\r\n        currentStep.classList.remove('active');\r\n        prevStep.classList.add('active');\r\n\r\n        const currentNav = document.querySelector('.list-group-item.active');\r\n        const prevNav = currentNav.previousElementSibling;\r\n        if (prevNav) {\r\n            currentNav.classList.remove('active');\r\n            prevNav.classList.add('active');\r\n        }\r\n        updateButtons(`#${prevStep.id}`);\r\n    }\r\n});\r\n\r\ndocument.addEventListener('DOMContentLoaded', initializeForm);\r\n<\/script><script type='text\/javascript'>jQuery(document).ready( function(){    moveOptionalElementsToGarbage( 1 ); });<\/script><script type='text\/javascript'> jQuery(document).ready( function(){   _wpbc.seasons__set( 1, [] );  }); <\/script><input id=\"bk_type1\" name=\"bk_type1\" class=\"\" type=\"hidden\" value=\"1\" \/><\/div><div id=\"submiting1\"><\/div><div class=\"form_bk_messages\" id=\"form_bk_messages1\" ><\/div><input type=\"hidden\" id=\"wpbc_nonceCALCULATE_THE_COST1\" name=\"wpbc_nonceCALCULATE_THE_COST1\" value=\"beb0427bc8\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/9984\" \/><input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form><\/div><div id=\"booking_form_garbage1\" class=\"booking_form_garbage\"><\/div><script type=\"text\/javascript\">\n                                jQuery(document).ready( function(){\n                                    jQuery(\".widget_wpdev_booking .booking_form.form-horizontal\").removeClass(\"form-horizontal\");\n                                    var visible_booking_id_on_page_num = visible_booking_id_on_page.length;\n                                    if (visible_booking_id_on_page_num !== null ) {\n                                        for (var i=0;i< visible_booking_id_on_page_num ;i++){\n                                          if ( visible_booking_id_on_page[i]==\"booking_form_div1\" ) {\n                                              document.getElementById(\"form_id751881314331\").innerHTML = \"<span style='color:#A00;font-size:10px;'>Warning! Booking calendar for this booking resource are already at the page, please check more about this issue at this page: https:\/\/wpbookingcalendar.com\/faq\/why-the-booking-calendar-widget-not-show-on-page\/<\/span>\";                                                                                                  \n                                              jQuery(\"#form_id751881314331\").animate( {opacity: 1}, 10000 ).fadeOut(5000);\n                                              return;\n                                          }\n                                        }\n                                        visible_booking_id_on_page[ visible_booking_id_on_page_num ]=\"booking_form_div1\";\n                                    }\n                                });\n                            <\/script> <script type='text\/javascript'> jQuery(document).ready( function(){  _wpbc.balancer__set_max_threads( 3 );  _wpbc.calendar__set_param_value( 1 , 'calendar_scroll_to' , false );  _wpbc.calendar__set_param_value( 1 , 'booking_max_monthes_in_calendar' , '2y' );  _wpbc.calendar__set_param_value( 1 , 'booking_start_day_weeek' , '0' );  _wpbc.calendar__set_param_value( 1 , 'calendar_number_of_months' , '1' );   _wpbc.calendar__set_param_value( 1, 'days_select_mode', 'multiple' );   _wpbc.calendar__set_param_value( 1, 'fixed__days_num', 3 );   _wpbc.calendar__set_param_value( 1, 'fixed__week_days__start',   [-1] );   _wpbc.calendar__set_param_value( 1, 'dynamic__days_min', 1 );   _wpbc.calendar__set_param_value( 1, 'dynamic__days_max', 30 );   _wpbc.calendar__set_param_value( 1, 'dynamic__days_specific',    [] );   _wpbc.calendar__set_param_value( 1, 'dynamic__week_days__start', [-1] );   _wpbc.calendar__set_param_value( 1, 'booking_date_format', 'j F Y' );   _wpbc.calendar__set_param_value( 1, 'booking_time_format', 'Ghi' );  _wpbc.set_other_param( 'message_dates_times_unavailable', 'These dates and times in this calendar are already booked or unavailable.' );  _wpbc.set_other_param( 'message_choose_alternative_dates', 'Please choose alternative date(s), times, or adjust the number of slots booked.' );  _wpbc.set_other_param( 'message_cannot_save_in_one_resource', 'It is not possible to store this sequence of the dates into the one same resource.' );  _wpbc.calendar__set_param_value( 1 , 'is_parent_resource' , 0 );  _wpbc.calendar__set_param_value( 1 , 'booking_capacity_field' , '' );  _wpbc.calendar__set_param_value( 1 , 'booking_is_dissbale_booking_for_different_sub_resources' , 'Off' );  _wpbc.calendar__set_param_value( 1 , 'booking_recurrent_time' , 'Off' );   if ( 'function' === typeof ( wpbc__conditions__SAVE_INITIAL__days_selection_params__bm ) ){ wpbc__conditions__SAVE_INITIAL__days_selection_params__bm( 1 ); }   wpbc_calendar_show( '1' );   _wpbc.set_secure_param( 'nonce',   '5efb1481a8' );   _wpbc.set_secure_param( 'user_id', '0' );   _wpbc.set_secure_param( 'locale',  'en_US' );  wpbc_calendar__load_data__ajx( {\"resource_id\":1,\"booking_hash\":\"\",\"request_uri\":\"\\\/en\\\/wp-json\\\/wp\\\/v2\\\/pages\\\/9984\",\"custom_form\":\"standard\",\"aggregate_resource_id_str\":\"\"} );  } ); <\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-9984","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/alm-telecoms.com\/en\/wp-json\/wp\/v2\/pages\/9984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alm-telecoms.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alm-telecoms.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alm-telecoms.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alm-telecoms.com\/en\/wp-json\/wp\/v2\/comments?post=9984"}],"version-history":[{"count":0,"href":"https:\/\/alm-telecoms.com\/en\/wp-json\/wp\/v2\/pages\/9984\/revisions"}],"wp:attachment":[{"href":"https:\/\/alm-telecoms.com\/en\/wp-json\/wp\/v2\/media?parent=9984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}