{"id":1299,"date":"2026-04-12T02:51:52","date_gmt":"2026-04-12T02:51:52","guid":{"rendered":"https:\/\/templates.elementrostudio.com\/barberio\/?page_id=1299"},"modified":"2026-04-13T01:31:02","modified_gmt":"2026-04-13T01:31:02","slug":"book-appoinment","status":"publish","type":"page","link":"https:\/\/templates.elementrostudio.com\/barberio\/book-appoinment\/","title":{"rendered":"Book Appoinment"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1299\" class=\"elementor elementor-1299\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb24f22 e-con-full e-flex e-con e-parent\" data-id=\"eb24f22\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b677819 animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"b677819\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;slideInDown&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Book Your Appointment<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30a9a8e elementor-widget-mobile__width-initial elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"30a9a8e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;rotateIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Choose your service, select your barber, and reserve your time.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43884e2 elementor-icon-list--layout-inline elementor-align-start animated-slow elementor-list-item-link-full_width elementor-invisible elementor-widget elementor-widget-icon-list\" data-id=\"43884e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;slideInUp&quot;}\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items elementor-inline-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Home<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-right-arrow\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Book Appoinment<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3dae6c9 e-flex e-con-boxed e-con e-parent\" data-id=\"3dae6c9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-92004f5 e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"92004f5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;slideInUp&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-62bd21d elementor-widget elementor-widget-image\" data-id=\"62bd21d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"64\" height=\"64\" src=\"https:\/\/templates.elementrostudio.com\/barberio\/wp-content\/uploads\/sites\/4\/2026\/04\/29-Appointment-1.png\" class=\"elementor-animation-grow attachment-large size-large wp-image-629\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54b6a40 elementor-widget elementor-widget-heading\" data-id=\"54b6a40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Make a Reservation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3f6582b e-con-full e-flex e-con e-child\" data-id=\"3f6582b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-c33a331 e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"c33a331\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInLeft&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-565c275 e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"565c275\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;slideInUp&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3876af4 elementor-widget elementor-widget-metform\" data-id=\"3876af4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"metform.default\">\n\t\t\t\t\t<div id=\"mf-response-props-id-561\" data-previous-steps-style=\"\" data-editswitchopen=\"\" data-response_type=\"alert\" data-erroricon=\"fas fa-exclamation-triangle\" data-successicon=\"fas fa-check\" data-messageposition=\"top\" class=\"   mf-scroll-top-no\">\n\t\t<div class=\"formpicker_warper formpicker_warper_editable\" data-metform-formpicker-key=\"561\" >\n\t\t\t\t\n\t\t\t<div class=\"mf-widget-container\">\n\t\t\t\t\r\n\t\t<div\r\n\t\t\tid=\"metform-wrap-3876af4-561\"\r\n\t\t\tclass=\"mf-form-wrapper\"\r\n\t\t\tdata-form-id=\"561\"\r\n\t\t\tdata-action=\"https:\/\/templates.elementrostudio.com\/barberio\/wp-json\/metform\/v1\/entries\/insert\/561\"\r\n\t\t\tdata-wp-nonce=\"aa0af9c575\"\r\n\t\t\tdata-form-nonce=\"e65d417bbb\"\r\n\t\t\tdata-quiz-summery = \"false\"\r\n\t\t\tdata-save-progress = \"false\"\r\n\t\t\tdata-form-type=\"general-form\"\r\n\t\t\tdata-stop-vertical-effect=\"\"\r\n\t\t\t><\/div>\r\n\r\n\r\n\t\t<!----------------------------- \r\n\t\t\t* controls_data : find the the props passed indie of data attribute\r\n\t\t\t* props.SubmitResponseMarkup : contains the markup of error or success message\r\n\t\t\t* https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\r\n\t\t--------------------------- -->\r\n\r\n\t\t\t\t<script type=\"text\/mf\" class=\"mf-template\">\r\n\t\t\tfunction controls_data (value){\r\n\t\t\t\tlet currentWrapper = \"mf-response-props-id-561\";\r\n\t\t\t\tlet currentEl = document.getElementById(currentWrapper);\r\n\t\t\t\t\r\n\t\t\t\treturn currentEl ? currentEl.dataset[value] : false\r\n\t\t\t}\r\n\r\n\r\n\t\t\tlet is_edit_mode = '' ? true : false;\r\n\t\t\tlet message_position = controls_data('messageposition') || 'top';\r\n\r\n\t\t\t\r\n\t\t\tlet message_successIcon = controls_data('successicon') || '';\r\n\t\t\tlet message_errorIcon = controls_data('erroricon') || '';\r\n\t\t\tlet message_editSwitch = controls_data('editswitchopen') === 'yes' ? true : false;\r\n\t\t\tlet message_proClass = controls_data('editswitchopen') === 'yes' ? 'mf_pro_activated' : '';\r\n\t\t\t\r\n\t\t\tlet is_dummy_markup = is_edit_mode && message_editSwitch ? true : false;\r\n\r\n\t\t\t\r\n\t\t\treturn html`\r\n\t\t\t\t<form\r\n\t\t\t\t\tclassName=\"metform-form-content\"\r\n\t\t\t\t\tref=${parent.formContainerRef}\r\n\t\t\t\t\tonSubmit=${ validation.handleSubmit( parent.handleFormSubmit ) }\r\n\t\t\t\t\r\n\t\t\t\t\t>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\t${is_dummy_markup ? message_position === 'top' ?  props.ResponseDummyMarkup(message_successIcon, message_proClass) : '' : ''}\r\n\t\t\t\t\t${is_dummy_markup ? ' ' :  message_position === 'top' ? props.SubmitResponseMarkup`${parent}${state}${message_successIcon}${message_errorIcon}${message_proClass}` : ''}\r\n\r\n\t\t\t\t\t<!--------------------------------------------------------\r\n\t\t\t\t\t*** IMPORTANT \/ DANGEROUS ***\r\n\t\t\t\t\t${html``} must be used as in immediate child of \"metform-form-main-wrapper\"\r\n\t\t\t\t\tclass otherwise multistep form will not run at all\r\n\t\t\t\t\t---------------------------------------------------------->\r\n\r\n\t\t\t\t\t<div className=\"metform-form-main-wrapper\" key=${'hide-form-after-submit'} ref=${parent.formRef}>\r\n\t\t\t\t\t${html`\r\n\t\t\t\t\t\t\t\t<div data-elementor-type=\"wp-post\" key=\"2\" data-elementor-id=\"561\" className=\"elementor elementor-561\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div className=\"elementor-element elementor-element-5d3a9de e-flex e-con-boxed e-con e-parent\" data-id=\"5d3a9de\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div className=\"e-con-inner\">\n\t\t<div className=\"elementor-element elementor-element-4aa1788 e-con-full e-flex e-con e-child\" data-id=\"4aa1788\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div className=\"elementor-element elementor-element-8d50141 e-con-full e-flex e-con e-child\" data-id=\"8d50141\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div className=\"elementor-element elementor-element-bbf1ea5 ha-has-bg-overlay elementor-widget elementor-widget-mf-listing-fname\" data-id=\"bbf1ea5\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-listing-fname&quot;}\" data-widget_type=\"mf-listing-fname.default\">\n\t\t\t\t\t\n\t\t<div className=\"mf-input-wrapper\">\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-text-bbf1ea5\">\n\t\t\t\t\t${ parent.decodeEntities(`Your Name`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\"><\/span>\n\t\t\t\t<\/label>\n\t\t\t\n\t\t\t<input type=\"text\" className=\"mf-input \" id=\"mf-input-text-bbf1ea5\" \n\t\t\t\tname=\"mf-listing-fname\" \n\t\t\t\tplaceholder=\"${ parent.decodeEntities(``) } \"\n\t\t\t\tonInput=${ parent.handleChange }\n\n\t\t\t\t\t\t\t\t\taria-invalid=${validation.errors['mf-listing-fname'] ? 'true' : 'false'}\n\t\t\t\t\tref=${ el => parent.activateValidation({\"message\":\"This field is required.\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":false,\"expression\":\"null\"}, el) }\n\t\t\t\t\t\t\t\/>\n\n\t\t\t\t\t\t\t<${validation.ErrorMessage}\n\t\t\t\t\terrors=${validation.errors}\n\t\t\t\t\tname=\"mf-listing-fname\"\n\t\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\n\t\t\t\t\t\/>\n\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-b9d6c34 ha-has-bg-overlay elementor-widget elementor-widget-mf-telephone\" data-id=\"b9d6c34\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-telephone&quot;}\" data-widget_type=\"mf-telephone.default\">\n\t\t\t\t\t\n\t\t<div className=\"mf-input-wrapper\">\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-telephone-b9d6c34\">\n\t\t\t\t\t${ parent.decodeEntities(`Telephone`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\"><\/span>\n\t\t\t\t<\/label>\n\t\t\t\n\t\t\t<input\n\t\t\t\ttype=\"tel\"\n\t\t\t\tclassName=\"mf-input \"\n\t\t\t\tid=\"mf-input-telephone-b9d6c34\" \n\t\t\t\tname=\"mf-telephone\"\n\t\t\t\tplaceholder=\"${ parent.decodeEntities(``) } \"\n\t\t\t\t\t\t\t\t\tonInput=${parent.handleChange}\n\t\t\t\t\taria-invalid=${validation.errors['mf-telephone'] ? 'true' : 'false'}\n\t\t\t\t\tref=${el => parent.activateValidation({\"message\":\"This field is required.\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":false,\"expression\":\"null\"}, el)}\n\t\t\t\t\t\t\t\t\/>\n\t\t\t\n\t\t\t\t\t\t\t<${validation.ErrorMessage}\n\t\t\t\t\terrors=${validation.errors}\n\t\t\t\t\tname=\"mf-telephone\"\n\t\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\n\t\t\t\t\t\/>\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-e7a686d ha-has-bg-overlay elementor-widget elementor-widget-mf-select\" data-id=\"e7a686d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;Service&quot;,&quot;mf_input_list&quot;:[{&quot;mf_input_option_text&quot;:&quot;Haircut&quot;,&quot;mf_input_option_value&quot;:&quot;value-1&quot;,&quot;_id&quot;:&quot;bb5d0cf&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;},{&quot;mf_input_option_text&quot;:&quot;Beard Trim&quot;,&quot;mf_input_option_value&quot;:&quot;value-2&quot;,&quot;_id&quot;:&quot;e5bd69d&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;},{&quot;mf_input_option_text&quot;:&quot;Hairstyling&quot;,&quot;mf_input_option_value&quot;:&quot;value-3&quot;,&quot;_id&quot;:&quot;d8188f1&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;},{&quot;mf_input_option_text&quot;:&quot;Kids Haircut&quot;,&quot;mf_input_option_value&quot;:&quot;value-4&quot;,&quot;_id&quot;:&quot;71fe962&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;}]}\" data-widget_type=\"mf-select.default\">\n\t\t\t\t\t\n\t\t\n\t\t<div className=\"mf-input-wrapper\">\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-select-e7a686d\">\n\t\t\t\t\t${ parent.decodeEntities(`Select Service`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\"><\/span>\n\t\t\t\t<\/label>\n            \n            <${props.Select}\n                className=${\"mf-input mf-input-select  \" + ( validation.errors['Service'] ? 'mf-invalid' : '' )}\n                classNamePrefix=\"mf_select\"\n                name=\"Service\"\n                placeholder=\"${ parent.decodeEntities(`Select `) } \"\n                isSearchable=${false}\n                options=${[{\"label\":\"Haircut\",\"value\":\"value-1\",\"isDisabled\":false},{\"label\":\"Beard Trim\",\"value\":\"value-2\",\"isDisabled\":false},{\"label\":\"Hairstyling\",\"value\":\"value-3\",\"isDisabled\":false},{\"label\":\"Kids Haircut\",\"value\":\"value-4\",\"isDisabled\":false}]}\n                value=${parent.getValue(\"Service\") ? [{\"label\":\"Haircut\",\"value\":\"value-1\",\"isDisabled\":false},{\"label\":\"Beard Trim\",\"value\":\"value-2\",\"isDisabled\":false},{\"label\":\"Hairstyling\",\"value\":\"value-3\",\"isDisabled\":false},{\"label\":\"Kids Haircut\",\"value\":\"value-4\",\"isDisabled\":false}].filter(item => item.value === parent.getValue(\"Service\"))[0] : []}\n                onChange=${(e)=> parent.handleSelect(e, \"Service\")}\n                ref=${() => {\n\t\t\t\t                    register({ name: \"Service\" }, parent.activateValidation({\"message\":\"This field is required.\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":false}));\n                    if ( parent.getValue(\"Service\") === '' && false ) {\n\t\t\t\t    parent.setValue( 'Service', '', true );\n                        parent.handleChange({\n                            target: {\n                                name: 'Service',\n                                value: ''\n                            }\n                        });\n                    }\n                }}\n                \/>\n\n            \t\t\t\t<${validation.ErrorMessage}\n\t\t\t\t\terrors=${validation.errors}\n\t\t\t\t\tname=\"Service\"\n\t\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\n\t\t\t\t\t\/>\n\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div className=\"elementor-element elementor-element-1c795ee e-con-full e-flex e-con e-child\" data-id=\"1c795ee\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div className=\"elementor-element elementor-element-1e569aa ha-has-bg-overlay elementor-widget elementor-widget-mf-email\" data-id=\"1e569aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-email&quot;}\" data-widget_type=\"mf-email.default\">\n\t\t\t\t\t\r\n\t\t<div className=\"mf-input-wrapper\">\r\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-email-1e569aa\">\r\n\t\t\t\t\t${ parent.decodeEntities(`Email`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\"><\/span>\r\n\t\t\t\t<\/label>\r\n\t\t\t\r\n\t\t\t<input \r\n\t\t\t\ttype=\"email\" \r\n\t\t\t\t \r\n\t\t\t\tdefaultValue=\"\" \r\n\t\t\t\tclassName=\"mf-input \" \r\n\t\t\t\tid=\"mf-input-email-1e569aa\" \r\n\t\t\t\tname=\"mf-email\" \r\n\t\t\t\tplaceholder=\"${ parent.decodeEntities(``) } \" \r\n\t\t\t\t \r\n\t\t\t\tonBlur=${parent.handleChange} onFocus=${parent.handleChange} aria-invalid=${validation.errors['mf-email'] ? 'true' : 'false' } \r\n\t\t\t\tref=${el=> parent.activateValidation({\"message\":\"This field is required.\",\"emailMessage\":\"Please enter a valid Email address\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":false,\"expression\":\"null\"}, el)}\r\n\t\t\t\t\t\t\t\/>\r\n\r\n\t\t\t\t\t\t<${validation.ErrorMessage} \r\n\t\t\t\terrors=${validation.errors} \r\n\t\t\t\tname=\"mf-email\" \r\n\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\r\n\t\t\t\/>\r\n\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-aa82e10 ha-has-bg-overlay elementor-widget elementor-widget-mf-date\" data-id=\"aa82e10\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-date&quot;}\" data-widget_type=\"mf-date.default\">\n\t\t\t\t\t\t\t\r\n\t\t<div className=\"mf-input-wrapper\">\r\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-date-aa82e10\">\r\n\t\t\t\t\t${ parent.decodeEntities(`Date`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\"><\/span>\r\n\t\t\t\t<\/label>\r\n\t\t\t\r\n\t\t\t<${props.Flatpickr}\r\n\t\t\t\t\tname=\"mf-date\"\r\n\t\t\t\t\tclassName=\"mf-input mf-date-input mf-left-parent  \"\r\n\t\t\t\t\tplaceholder=\"${ parent.decodeEntities(``) } \"\r\n\t\t\t\t\toptions=${{\"minDate\":\"\",\"maxDate\":\"\",\"dateFormat\":\"m-d-Y\",\"enableTime\":\"\",\"disable\":[],\"mode\":\"single\",\"static\":true,\"disableMobile\":true,\"time_24hr\":false}}\r\n\t\t\t\t\tvalue=${parent.getValue('mf-date')}\r\n\t\t\t\t\tonInput=${parent.handleDateTime}\r\n\t\t\t\t\taria-invalid=${validation.errors['mf-date'] ? 'true' : 'false'}\r\n\t\t\t\t\tref=${el => props.DateWidget(\r\n\t\t\t\t\t\t\tel, \r\n\t\t\t\t\t\t\t'', \r\n\t\t\t\t\t\t\t{\"message\":\"This field is required.\",\"required\":false},  \r\n\t\t\t\t\t\t\tregister, \r\n\t\t\t\t\t\t\tparent \r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\/>\r\n\r\n\t\t\t\t\t\t\t<${validation.ErrorMessage}\r\n\t\t\t\t\terrors=${validation.errors}\r\n\t\t\t\t\tname=\"mf-date\"\r\n\t\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\r\n\t\t\t\t\t\/>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-3bed59e ha-has-bg-overlay elementor-widget elementor-widget-mf-select\" data-id=\"3bed59e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mf_input_name&quot;:&quot;mf-select&quot;,&quot;mf_input_list&quot;:[{&quot;mf_input_option_text&quot;:&quot;Alex Carter&quot;,&quot;mf_input_option_value&quot;:&quot;value-1&quot;,&quot;_id&quot;:&quot;7567eea&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;},{&quot;mf_input_option_text&quot;:&quot;Daniel Brooks&quot;,&quot;mf_input_option_value&quot;:&quot;value-2&quot;,&quot;_id&quot;:&quot;a10d38f&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;},{&quot;mf_input_option_text&quot;:&quot;Ryan Mitchell&quot;,&quot;mf_input_option_value&quot;:&quot;value-3&quot;,&quot;_id&quot;:&quot;7994a36&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;},{&quot;mf_input_option_text&quot;:&quot;Jason Lee&quot;,&quot;mf_input_option_value&quot;:&quot;value-4&quot;,&quot;_id&quot;:&quot;79ddf5d&quot;,&quot;mf_input_option_status&quot;:&quot;&quot;,&quot;mf_input_option_selected&quot;:&quot;&quot;}]}\" data-widget_type=\"mf-select.default\">\n\t\t\t\t\t\n\t\t\n\t\t<div className=\"mf-input-wrapper\">\n\t\t\t\t\t\t\t<label className=\"mf-input-label\" htmlFor=\"mf-input-select-3bed59e\">\n\t\t\t\t\t${ parent.decodeEntities(`Select Barber`) } \t\t\t\t\t<span className=\"mf-input-required-indicator\"><\/span>\n\t\t\t\t<\/label>\n            \n            <${props.Select}\n                className=${\"mf-input mf-input-select  \" + ( validation.errors['mf-select'] ? 'mf-invalid' : '' )}\n                classNamePrefix=\"mf_select\"\n                name=\"mf-select\"\n                placeholder=\"${ parent.decodeEntities(`Select `) } \"\n                isSearchable=${false}\n                options=${[{\"label\":\"Alex Carter\",\"value\":\"value-1\",\"isDisabled\":false},{\"label\":\"Daniel Brooks\",\"value\":\"value-2\",\"isDisabled\":false},{\"label\":\"Ryan Mitchell\",\"value\":\"value-3\",\"isDisabled\":false},{\"label\":\"Jason Lee\",\"value\":\"value-4\",\"isDisabled\":false}]}\n                value=${parent.getValue(\"mf-select\") ? [{\"label\":\"Alex Carter\",\"value\":\"value-1\",\"isDisabled\":false},{\"label\":\"Daniel Brooks\",\"value\":\"value-2\",\"isDisabled\":false},{\"label\":\"Ryan Mitchell\",\"value\":\"value-3\",\"isDisabled\":false},{\"label\":\"Jason Lee\",\"value\":\"value-4\",\"isDisabled\":false}].filter(item => item.value === parent.getValue(\"mf-select\"))[0] : []}\n                onChange=${(e)=> parent.handleSelect(e, \"mf-select\")}\n                ref=${() => {\n\t\t\t\t                    register({ name: \"mf-select\" }, parent.activateValidation({\"message\":\"This field is required.\",\"minLength\":1,\"maxLength\":\"\",\"type\":\"none\",\"required\":false}));\n                    if ( parent.getValue(\"mf-select\") === '' && false ) {\n\t\t\t\t    parent.setValue( 'mf-select', '', true );\n                        parent.handleChange({\n                            target: {\n                                name: 'mf-select',\n                                value: ''\n                            }\n                        });\n                    }\n                }}\n                \/>\n\n            \t\t\t\t<${validation.ErrorMessage}\n\t\t\t\t\terrors=${validation.errors}\n\t\t\t\t\tname=\"mf-select\"\n\t\t\t\t\tas=${html`<span className=\"mf-error-message\"><\/span>`}\n\t\t\t\t\t\/>\n\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div className=\"elementor-element elementor-element-37ac65c e-con-full e-flex e-con e-child\" data-id=\"37ac65c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div className=\"elementor-element elementor-element-c553081 elementor-widget__width-initial mf-btn--center elementor-widget elementor-widget-mf-button\" data-id=\"c553081\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"mf-button.default\">\n\t\t\t\t\t\t\t<div className=\"mf-btn-wraper \" data-mf-form-conditional-logic-requirement=\"\">\r\n\t\t\t\t\t\t\t<button type=\"submit\" className=\"metform-btn metform-submit-btn \" id=\"\">\r\n\t\t\t\t\t<span>${ parent.decodeEntities(`Book Appoinment`) } <\/span>\r\n\t\t\t\t<\/button>\r\n\t\t\t        <\/div>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div className=\"elementor-element elementor-element-246451f elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"246451f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Walk in or book online \u2014 we\u2019re ready when you are.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t`}\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t${is_dummy_markup ? message_position === 'bottom' ? props.ResponseDummyMarkup(message_successIcon, message_proClass) : '' : ''}\r\n\t\t\t\t\t${is_dummy_markup ? ' ' : message_position === 'bottom' ? props.SubmitResponseMarkup`${parent}${state}${message_successIcon}${message_errorIcon}${message_proClass}` : ''}\r\n\t\t\t\t\r\n\t\t\t\t<\/form>\r\n\t\t\t`\r\n\t\t<\/script>\r\n\r\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce1bdca e-flex e-con-boxed e-con e-parent\" data-id=\"ce1bdca\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2a81e67 e-con-full e-flex e-con e-child\" data-id=\"2a81e67\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-2c1570d e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"2c1570d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;slideInUp&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a37ce13 elementor-widget elementor-widget-heading\" data-id=\"a37ce13\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Booking Information<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51c2044 elementor-widget elementor-widget-text-editor\" data-id=\"51c2044\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Please arrive 5\u201310 minutes before your scheduled time. If you need to cancel or reschedule, kindly inform us in advance.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b489ea9 elementor-widget elementor-widget-heading\" data-id=\"b489ea9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Why Book With Us<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9a56a8 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"c9a56a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-checkmark\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Professional Barbers<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-checkmark\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Easy Booking Process<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-checkmark\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Premium Experience<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-checkmark\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Flexible Scheduling<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-03026ce e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"03026ce\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInRight&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Book Your Appointment Choose your service, select your barber, and reserve your time. Home Book Appoinment Make a Reservation Booking Information Please arrive 5\u201310 minutes before your scheduled time. If you need to cancel or reschedule, kindly inform us in advance. Why Book With Us Professional Barbers Easy Booking Process Premium Experience Flexible Scheduling<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1299","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/templates.elementrostudio.com\/barberio\/wp-json\/wp\/v2\/pages\/1299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/templates.elementrostudio.com\/barberio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/templates.elementrostudio.com\/barberio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/templates.elementrostudio.com\/barberio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/templates.elementrostudio.com\/barberio\/wp-json\/wp\/v2\/comments?post=1299"}],"version-history":[{"count":19,"href":"https:\/\/templates.elementrostudio.com\/barberio\/wp-json\/wp\/v2\/pages\/1299\/revisions"}],"predecessor-version":[{"id":1671,"href":"https:\/\/templates.elementrostudio.com\/barberio\/wp-json\/wp\/v2\/pages\/1299\/revisions\/1671"}],"wp:attachment":[{"href":"https:\/\/templates.elementrostudio.com\/barberio\/wp-json\/wp\/v2\/media?parent=1299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}